culture: String

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”.

Default: “en”
Notes
  • “en” is the only one available culture by default. If you have to customize for any other culture, you have to add them.

Adding a new cultureInfo

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"],
               });

Using the newly added cultureInfo

var  chart =  new  CanvasJS.Chart("container",
{
 .
    culture:  "es",
 .
 . 

});
chart.render();

cultureInfo Attributes

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
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

13 Comments

  1. Pingback: Version 1.2 supports Localizing Charts

  2. Simon says:

    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).

    • Sunil Urs says:

      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.

  4. yann says:

    Hello, when use: savePNGText: ‘Sauvegarder PNG’, the menu display png on other line.
    How fix the width of the menu ?
    Thank you

  5. Can says:

    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.

      • Can says:

        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.

  6. Joi says:

    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)

If you have any questions, please feel free to ask in our forums. Ask Question