CanvasJS allows you to localize various culture / language / country specific elements in the Chart like number formatting style – where you can choose which character to use as a decimal separator and as a digit group separator (also referred to as a thousand separator). By default CanvasJS is set to Neutral English Culture – “en”.
Add a new cultureInfo object that defines parameters that need to be customized. Cultures added this way are global and hence can be used by all charts within the page.
CanvasJS.addCultureInfo("es",
{
decimalSeparator: ".",
digitGroupSeparator: ",",
days: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
});
var chart = new CanvasJS.Chart("container",
{
.
culture: "es",
.
.
});
chart.render();
| Applies To | Attribute | Type | Default | Options/Examples | Remark |
|---|---|---|---|---|---|
| cultureInfo | decimalSeparator | String | “.” | “. “, ”,” | Character used to separate fractional part from the whole number. |
| cultureInfo | digitGroupSeparator | String | “,” | “,”, “.” | Also referred to as Thousand Separator |
| cultureInfo | zoomText | String | “Zoom” | “zoom”, etc | Text is shown inside the Button till v1.4 v1.5 onwards Text is shown as tooltip. |
| cultureInfo | panText | String | “Pan” | “pan”, etc | Text is shown inside the Button till v1.4 v1.5 onwards Text is shown as tooltip. |
| cultureInfo | resetText | String | “Reset” | “reset”, etc | Text is shown inside the Button till v1.4 v1.5 onwards Text is shown as tooltip. |
| cultureInfo | savePNGText | String | “Save as PNG” | “save as png”, etc | Set text is shown instead of Save as PNG. |
| cultureInfo | saveJPGText | String | “Save as JPG” | “save as jpg”, etc | Set text is shown instead of Save as JPG. |
| cultureInfo | printText | String | “Print” | “print chart”, etc | Set text is shown instead of Print. |
| cultureInfo | menuText | String | “More Options” | “More Options”, etc | Tool Tip for Menu Button. |
| cultureInfo | days | Array of strings | [“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”] | [“domingo”, “lunes”, “martes”, “miércoles”, “jueves”, “viernes”, “sábado”] | Day names starting from Sunday. Should be exactly 7 in total. |
| cultureInfo | shortDays | Array of strings | [“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”] | Short Day names starting from Sunday. Should be exactly 7 in total. | |
| cultureInfo | months | Array of strings | [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”] | Custom Months Array | Month Names starting from January |
| cultureInfo | shortMonths | Array of String | [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”] | Custom Short Days Array | Short Month Names starting from January |
Also See:
Comments 13
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
Pingback: Version 1.2 supports Localizing Charts
It seems that culture formating (decimalSeparator and digitGroupSeprataor) does not work on tooltips if using content: function to display them. If you add the following code to the above chart, the tooltip is not formated according to culture settings:
toolTip:{
enabled: true, //disable here
animationEnabled: true, //disable here
content: function(e){
var content;
content = e.entries[0].dataPoint.y + ” €”;
return content;
}
},
Tested on Chrome 32 and IE 9 (both on Windows Vista).
In case you are using content function, formatting the content should be taken care by the function itself. ToolTip just shows the final “string” returned by your function.
i need both x and y axis in a string label.. can you people help me to draw a chart like that
You can use labelFormatter to format labels or to add custom labels as required.
Hello, when use: savePNGText: ‘Sauvegarder PNG’, the menu display png on other line.
How fix the width of the menu ?
Thank you
For changing the width you can set the min-width property using CSS for the menu container. As shown in the example.
Hello Sanjoy, thank you :)
Love you script
Hello,
I am working on a chart with weekly based x axis. My data is on the Monday of every week. I want to change the first day of the week to Monday. Is there any way to do that?
Thank you.
As of now we don’t have a way to define first day of the week. But if it is just the label that you want to change, then you can use labelFormatter to customize the same.
Thank you for your reply. My problem is that chart does not show the data at the first day of the week. For example data of this week is on the 15/02. When I put this data to the line chart, x axis shows 07/02, 14/02, etc and my data does not stay at the top of this shown points(it stays at the top of its own date as expected). So I think labelFormatter will not help me to fix this problem. I need an option such as “firstDayofWeek”: “monday” or something like that.
Is there any way to set the culture default time and date format? For example we don’t use ‘AM’ and ‘PM’ but only 24h format. Also we type dates like 1. jan 2015, not jan 01 2015.
I have a time series spanning several weeks and I like the adaptive labeling when zooming, but I want to set the default format instead of fixing the format either 24h time or date (d-mmm-yyyy)
Joi,
Sorry as of now this feature is not available but as a workaround according to zoom-level you can set valueFormatString using rangeChanging event. Here is an example.