Overview – Labels & Index Labels in Chart

Labels are used to indicate what a certain position on the axis means.

Index Labels can be used to display additional information about a dataPoint. Its orientation can be either horizontal or vertical.
Below image shows labels and index labels in a column chart.

CanvasJS HTML5 Chart Label

Labels

Labels appears next to the dataPoint on axis Line. On Axis Y it is the Y value, and on X axis is either user defined “label” or x value at that point.
labels can be customized by using the following properties.

Applies To Attribute Type Default Examples
axisX/axisX2/axisY/axisY2 labelAngle Number 0 45,-45, 60 ..
axisX/axisX2/axisY/axisY2 labelFontFamily String “arial” “tahoma”, “verdana” ..
axisX/axisX2/axisY/axisY2 labelFontColor String “black” “red”, “#006400” ..
axisX/axisX2/axisY/axisY2 labelFontSize Number 12 25, 30 ..
axisX/axisX2/axisY/axisY2 labelFontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
axisX/axisX2/axisY/axisY2 labelFontStyle String ““normal”” “normal”,“italic”, “oblique”
axisX/axisX2/axisY/axisY2 labelAutoFit Boolean true true, false
axisX/axisX2/axisY/axisY2 labelWrap Boolean true true, false
axisX/axisX2/axisY/axisY2 labelMaxWidth Number null (auto) 100, 140, etc
axisX/axisX2/axisY/axisY2 labelFormatter Function null function(e) { }

You can try out various properties to customize labels in the below example.

Try Editing The Code

Formatting Labels

When values of x or y are numbers of higher order or when they represent currency, etc formatting them with separators and adding appropriate symbols (comma, dot, $, etc) helps in increasing the readability. Read More About Formatting Date & Time & formatting numbers .

Try Editing The Code
 Tip   
  • You can hide numeric / dateTime labels on axis by setting valueFormatString to ” ” (space). This only hides the auto generated numeric/dateTime labels but will continue to show label(string) values that are set inside dataPoints.

Index Labels

Index Labels are Text Snippets containing additional description of dataPoint. They are positioned above the actual dataPoint with a predetermined orientation.

You can show Index Label for any dataPoint by setting its indexLabel property. You can also set indexLabel at dataSeries level – which applies to all dataPoints in the series. indexLabel value set at dataPoint will override indexLabel at dataSeries level (if set).

Keywords:

Instead of setting string values for all indexLabels, you can also use keywords like x, y, etc that will automatically show corresponding properties as indexLabel. This will allow you to define indexLabel at the series level once. While setting indexLabel you specify a keyword by enclosing it in flower brackets like {x}, {y}, {color}, etc

In case of stacked, pie and doughnut charts you can also use special keywords like #percent & #total
eg: indexLabel: “#percent”

Range Charts have two indexLabels – one for each y value. This requires the use of a special keyword #index to show index label on either sides of the column/bar/area.
eg: indexLabel: “{x}: {y[#index]}”

For example you can set the following indexLabel at dataSeries:
   indexLabel: “${y}”
   indexLabel: “x:{x}, y:{y}”

Important keywords to keep in mind are – {x}, {y}, {name}, {label}.
Below are properties which can be used to customize indexLabel.

Applies To Attribute Type Default Options/Examples
dataSeries/ dataPoint indexLabel String (Keywords supported) {}
dataSeries/ dataPoint indexLabelPlacement String “outside” “inside”,”outside”
dataSeries/ dataPoint indexLabelOrientation String “horizontal” “horizontal”,”vertical”
dataSeries/ dataPoint indexLabelBackgroundColor String null “red”,”#1E90FF”..
dataSeries/ dataPoint indexLabelFontColor String “black” “red”,”#1E90FF”..
dataSeries/ dataPoint indexLabelFontSize Number 12 16,20,24..
dataSeries/ dataPoint indexLabelFontStyle String “normal” “normal”, “italic”, “oblique”
dataSeries/ dataPoint indexLabelFontFamily String “arial” “arial”, “calibri”, “tahoma”..
dataSeries/ dataPoint indexLabelFontWeight String “normal” “lighter”, “normal” ,”bold” , “bolder”
dataSeries/ dataPoint indexLabelLineColor String “#808080” “red”, “#1E90FF”..
dataSeries/ dataPoint indexLabelLineThickness Number 2 3,4..
dataSeries/ dataPoint indexLabelWrap Boolean true true,false..
dataSeries/ dataPoint indexLabelTextAlign String “left” “left”,”center”,”right”
dataSeries/ dataPoint indexLabelMaxWidth Number null (auto) 4,20..
dataSeries/ dataPoint indexLabelLineDashType String “solid” “dot”, “dash”..
dataSeries/ dataPoint indexLabelFormatter Function null function(e) { }
Try Editing The Code

Finishing it up.

Here is an example that uses above mentioned concepts

Try Editing The Code
 Tip   
  • You can hide numeric / dateTime labels on axis by setting valueFormatString to ” ” (space). This only hides the auto generated numeric/dateTime labels but will continue to show label(string) values that are set inside dataPoints.

  Also See:    

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

80 Comments

    • Bowo says:

      Great. Thanks!

      Also, if possible at all, enabling center-align on labels would be great too. This will help aesthetics for long labels that spills into the next line. Currently it’s left-aligned.

    • Bowo says:

      While I’m at this, another idea would be to provide option to set font size for smaller screens, so that longer labels won’t spill into the next line when the chart is viewed on mobile devices. This probably would come in handy across all text-type information on the charts, including chart title.

  3. Edward says:

    One approach for flexible label formatting would be to allow callbacks to JS methods, passed in as a parameter, similar to the way GD::Graph works in PERL, what that does is allow people to write their own more complex formatting routines in any way they want, rather than the developer trying to accommodate lots of different unique requests, one way to handle this is to wrap the parameter to valueFormatString inside a try catch structure, where if the passed in value matches a valid function then it is passed the variable and prints the return value, if it fails then you process the format string normally.

  4. brittney says:

    Is it possible to make the x-axis label clickable and it returns the string value of the label?

  7. Alex says:

    I have a dataserie including more than 1000 datapoint {x: new Date (2014,1,1,12,3,0,0), y: 321, label:”2014″}. The label for the xaxis in this case gonna be only year (2014). I wonder how I can show the complete data (2014/1/1) in the tooltip?

  8. Dan says:

    Do you have a solution for long x-axis labels ??
    (the ‘labelWrap’ and ‘labelAutoFit’ doesn’t seem enough)
    the solution I am looking for is adding ‘…’ and a tool tip if the string is too big to fit (= css ellipsis).

    • Anjali says:

      Dan,

      As of now we don’t have any alternate apart from “labelWrap” and “labelAutoFit” . Thanks for you suggestion, we will consider this in future version.

  9. kaushal patel says:

    is it possible that index label value don’t overlap each other? while using this with combination graphs ?

  11. Mr Anderson says:

    I’m using the Candle Stick chart type to show minute by minute candle sticks for a day. However instead of using prices for the OHLC values on the I’m using the % change from the day’s opening price. To show the actual price info I’m using the toolTipContent for each dataPoint, but I’d also like to show the price on the Y axis for each displayed label.

    For example, say the Y axis is showing labels for 0.0%, 0.5%, 1.0% etc, I’d like to show the corresponding price next to each of these, e.g. “0.0% ($100.00)”, “0.5% ($100.50)”, “1.0% ($101.00)”.

    Any suggestions for how to do this?

  12. blais says:

    Hello, it’s possible to make a tooltip with the label value but don’t have the label directly on the Doughnut.
    Thanks

  13. Allxie says:

    I’m graphing with time as the y axis, and I’m aware that this does not support time units in the y axis, but I was hoping to graph time in seconds, and then reformat it into a string and use those strings as the labels on the y axis. Is there any way to customize the y axis?

    • Anjali says:

      vishal,

      Sorry, this feature is not available yet. But we will consider it for future versions.

  15. Chris says:

    Is it possible to have the yAxis labels on the right side of the chart? Or even inside the chart?

      • manimaran.S says:

        how to append “indexLabel” into contentFormatter…

        i tried this : contentFormatter: function(e){
        var str = “”;
        var temp = “” + (e.entries[i].dataPoint.x) +”{indexLabel}”+ ” over” + “” + ” runs ” + “” ;
        str = str.concat(temp);
        }
        return (str);
        }

  20. Anand says:

    Is there a way to set a minimum display height for the column. Say for example if the value on Y-axis is too low it will not be showed on the graph, instead of that I want to display a default height column with the actual height as the label.

  21. Randex says:

    How can I display only index label per column with #total number on a graph with “stackedColumn” chart?

  24. Sumon says:

    I tried it use for 12 months like January-December but it does not work for 12 levels but it works fine for 11 level means jan-nov.

    I checked everything and see that it does not work less than 11 lebels..

    Now i can i use it for 12 months level in Yaxis

    Thanks

    • Rishabh Rajgarhia says:

      In JavaScript months are indexed from 0 (Jan) to 11(Dec). Please make sure that you are following the same. If this doesn’t solve the problem, please create a jsfiddle so that we can have a look.

  25. egocentric13 says:

    Can someone help me with the horizontal (x-axis label).

    The labels became alternate with each other.
    The number of columns are only 10.

    Odd number columns have their label displayed.
    Even number columns does not.

    When I remove the 12th column, all the labels of the column appeared again.

    • Vishwas R says:

      In case you want to apply custom formatting for axis label, you can use labelFormatter for which label is sent as a parameter. In case you want to format indexLabel, you can use indexLabelFormatter which gets dataPoint as a parameter and you can access label via dataPoint. In case this doesn’t answer your question, please create a jsfiddle so that we can understand your requirement better.

  28. Tejas Masurkar says:

    Hello , I want to add label value dynamically for ex

    for (var i = 0; i <= atmLoadDistWSHDataPts.length; i=i+2) {
    dataPoints.push({
    label: atmLoadDistWSHDataY[i],
    y: parseInt(atmLoadDistWSHDataPts[i+1],10),
    color:"Blue"
    });

    but this is not working as expected
    When i try to put data manually withing double quotes its working

    for (var i = 0; i <= atmLoadDistWSHDataPts.length; i=i+2) {
    dataPoints.push({
    label: "ABC",
    y: parseInt(atmLoadDistWSHDataPts[i+1],10),
    color:"Blue"
    });

  29. Joseph says:

    Hello everybody, Is there any way to invert the Y-Label, so I could have the 0 in the top and the highest number at the bottom?

    This is what I want to achieve: https://goo.gl/6h03ix

    Thanks for your help.

  30. mmek says:

    I have few “line” series and after adding indexLabels its hard to find the actual point it is referring to. is there a way to draw a line to the point which it is pointing to ?

  31. abayomismart says:

    I receive data in JSON format from an http api and would want to pass that to the dataPoints variable but the candlestick chart is not displaying anything. But if I export the content of my json object and hardcode it it works, though I notice that there are double quotes arround some of my data what can I do to solve this problem this is a sample of my data from the http api
    [{“x”:”new Date(2014, 11, 13)”,”y”:[148.83,148.83,148.83,148.83]},
    {“x”:”new Date(2014, 11, 14)”,”y”:[148.83,148.83,148.83,148.83]}]
    what can I do. Please help me out it urgent.

  33. Naresh H K says:

    Hi ,
    I have piechart in my application ,it has indexLabel for each sector.How can i add click event for Index Label?

  34. Roman says:

    Hello!

    How can I set the position indexLabel to the far right of the chart (not on the rightmost position of the current bar) in bar-chart (when indexLabelPlacement: “inside” & bars in horizontal position)?

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