Overview – Labels & Index Labels in Chart

Comments 80

1. is there any way to hide the labels?

   • Set valueFormatString to a single space ” “

     • I’ve tried valueFormatString to ” ” to hide labels on the x axis. It does not work for me. What else can I try ?

       • Savioz,

         Here is an example that I’ve created.

         • Nice example. A small problem arises, when you want to hide the X indexex only: The horizontally placed Y-labels are cut off (leftmost, rightmost). There should be enough space reserved for them (automatically or via manual option).

         • Sorry, but am not able to understand the issue here. Can you please create a jsfiddle so that we can understand the issue?

2. Really wish there’s ‘Autofit’, ‘Arap’ and ‘MaxWidth’ for index label. Coming soon perhaps?

   • Makes sense. Will add this feature in v1.4

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

   • 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. 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. Is it possible to make the x-axis label clickable and it returns the string value of the label?

   • Brittney,

     As of now this feature is not available.

     —
     Sunil Urs

5. Is there an ability to change vertical position of a label?
   I am trying your library because of poor performance of Amcharts, but when I am setting labelFontSize to 10, I get very little distance between label and axis line http://postimg.org/image/h53k0ohkp/

   • We just tried at our end and were not able to reproduce the issue. Can you please create a jsfiddle and post it in our forum so that we can have a look?

6. how to remove the background color for the chart

   • Hi,

     You can remove background color by setting backgroundColor property of Chart to null.

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

   • Alex,

     Please use toolTipContent property for showing x values (Date) in toolTip.

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

   • 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. is it possible that index label value don’t overlap each other? while using this with combination graphs ?

   • kaushal,

     To some extent you can avoid this by setting different indexLabelPlacement value for each chart. This might not work if there are more than two series.

10. Is it possible to put xAxis labels on top?

    • zukilover,

      Do you mean to say secondary x-axis or placing labels inside the plotArea (above axis line) ??

11. 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?

    • Sorry, this feature is not available yet.

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

    • You can add any custom property inside dataPoint and display the same using keywords inside toolTip as shown here.

13. 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?

    • allxie,

      You can use labelFormatter function of axisY.

14. can i get complete name of the labels on mouse hover

    • vishal,

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

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

    • I’ve found the answer: yAxis2 :)

16. I am trying to use your column chart. I have many x axis values as you can see in the jsfiddle
    https://jsfiddle.net/vz04h29c/4/

    Why the label of x-axis is not displaying for all the columns. I need to show all of them.

    Thanks

    • please use this link for jsfiddle if the chart is not displayed in jsfiddle. http://jsfiddle.net/vz04h29c/4/

    • i figured it out by setting interval for
      axisX: {

      interval: 1
      },

17. I’m trying to make stackedBar100 with labels on y axis. Exactly the same situation like in this example:
    https://canvasjs.com/docs/charts/chart-types/html5-stacked-bar-100-chart/

    When I have more items in my dataset, chart display just only every second label. This behavior is unwanted, because on the axis are words, not ascending data.

    Is there any option to force displaying all labels on my y axis?

    • I got this. It is axisX.interval.

    • You can override the default behavior by setting interval of axisX to 1.

18. How I can remove or not show the Label of an element when the value is equal to ‘0’ ?

    • Do you want to skip Label when x-value is zero or when y-value is zero?

19. how to display index label on tool tip?

    • You can display indexLabel on tooltip by using content as shown below.
      toolTip:{
content:"{indexLabel}" ,
}

      • 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);
        }

        • Use e.entries[i].dataPoint.indexLabel in toolTip contentFormatter to get the indexLabel.

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

    • This feature is not available yet.

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

    • *only _one_ index label per column

    • For this case you can set the indexLabel as “#total” only for last dataSeries. And you can refer to this link to do the same.

22. How can I display table in x axis label a graph?

23. I want to do something like this..Can or not ?
    http://www.advsofteng.com/doc/cdcfdoc/images/datatable2.png

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

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

26. can it be possible to assign jan to 1 instead of 0

    • Rabin,

      It is part of JavaScript Specification and hence not possible to change at our end.

27. Is there any way to use for example {label}, as parameter input for a my own more complex format method?

    • 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. 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"
    });

    • Tejas,

      Can you please create a fiddle that shows up the issue, so that we can have a look into it and help you out.

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

    • Hi Joseph,

      You can achieve this by inverting the Y-values and toolTip.content & labels using toolTip.contentFormatter, labelFormatter to invert tooltip content and the labels so as to match with dataPoints. Here is the example.

      • Thank you very much, I couldn’t make it without your help

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

    • Hi,

      Here your x value is in string, converting it back to date object will work for you.

32. how to create the index labels shown on the chart not by hover on the chart

    • Krishnaveni,
      indexLabel will be shown in chart even without hovering mouse.

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

    • As of now CanvasJS doesn’t support click event on indexLabel, but in pie you can have legend for each sector which will support itemclick event.

      • Thanks Sanjoy for your reply…..)

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

    • Roman,

      Positioning indexLabel anywhere in chart is not possible as of now but you can use stripLine labels with stripline color as transparent to show your text in the extreme right of the chart. Here is an example.

      • Thanks for the useful answer! Now, everything works as i wanted

    • very good

35. how to remove index label from doughnut chart?

    • By default doughnut chart won’t show indexLabel unless you set it in dataSeries or dataPoint level. Here is an example.