legend: Object

Whenever the chart contains multiple dataSeries, it is recommended to represent each dataSeries in a legend. This way it becomes easier for the user to know what exactly is represented by each of the dataSeries. In case of Pie and Doughnut charts, an entry is created for each dataPoint and in rest of the chart types entries are created for each dataSeries.

You can selectively show or hide a dataSeries in the Legend using showInLegend property of dataSeries. Legend items/entries are stacked vertically (vertical orientation) when it displayed to the right or left of plotArea and horizontally (horizontal orientation) when it is on top or bottom of plotArea. 

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 legend:{   //legend properties


 },
 .
 .
});
chart.render();

Simple Legend Attributes

Applies To Attribute Type Default Options/Examples
legend fontSize Number Auto. Calculated 25, 30 ..
legend fontFamily String “monospace, sans-serif,arial black” “arial” , “tahoma”, “verdana” ..
legend fontColor String “black” “red”, “yellow” ,”#FF0000″ ..
legend fontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
legend fontStyle String “normal” “normal”,“italic”, “oblique”
legend verticalAlign String “bottom” “top”, “center”, “bottom”
legend horizontalAlign String “right” “left”, “center”, “right”
legend cursor String “default” “pointer”, “crosshair”, …
legend itemmouseover Function null function(e) { },
legend itemmousemove Function null function(e) { },
legend itemmouseout Function null function(e) { },
legend itemclick Function null function(e) { },
legend reversed Boolean false true, false
legend maxWidth Number Automatically calculated based on the chart size. 200, 300, etc.
legend maxHeight Number Automatically calculated based on the chart size. 200, 300, etc.
legend itemMaxWidth Number Automatically calculated based on the chart size. 200, 300, etc.
legend itemWidth Number Automatically calculated based on the chart size. 200, 300, etc.
legend itemWrap Boolean true true, false
legend itemTextFormatter Function null function(e) {}
legend dockInsidePlotArea Boolean false true, false
Try Editing The Code

  Also See:    

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

28 Comments

  1. Lincoln says:

    is there a way of showing two Legends with only one data set? half of my bars (column chart) are one colour while the other half is a second colour

    • Sunil Urs says:

      It is not possible to show two legends for the same series. But what you can do is add another series with dataPoints set to empty array like dataPoints:[] and set the second color to this series.

  2. Liquid90605 says:

    Is it possible to set a margin on the legend? I am using a font that has a large line height and the lower part of the ‘g’ character is being cut off.

    • Sunil Urs says:

      Margin isn’t available for legend. Can you please post a screenshot (better if you can create a jsfiddle) so that I can have a look and figure out a solution.

    • Sunil Urs says:

      Legend is not shown by default. It is displayed only when “showInLegend” property of dataSeries is set to true.

  4. taniguchi says:

    Is it possible to change order of legend, like from bottom to top or top to bottom. At stack column 100, bar and legend is opposite order.

  6. Konstantin says:

    Is there a way to force each element in legend at a new line? Currently they heading in a row.

    • Anjali says:

      You can do so in two ways.

      1. Move the legend to the left side of chart as shown in the last example.
      2. By setting maxWidth property of legend.

      • Konstantin says:

        I’m using IE8 and canvasjs-1.6.2, because when I’m switching to 1.7.0 IE stops drawing graph lines.
        And so when I’m setting
        legend:{
        verticalAlign: “center”,
        horizontalAlign: “right”,
        maxWidth: 100,
        fontSize : 10
        }
        there is no any effect, legend is still same, in a row.

        • Anjali says:

          konstantian,

          Can you please create a jsfiddle of the chart so that we can have a look? Without seeing the entire code it would be difficult to figure out the issue.

          • Anjali says:

            konstantian,

            You are setting legend option twice because of which second option overrides first option. Please refer to this jsfiddle with the issue fixed.

          • Konstantin says:

            Thank you, that helped a lot.
            But I have one more question: in this piece of code when I’m calling

            var canvas = $(“#chartContainer .canvasjs-chart-canvas”).get(0);
            dataURL = canvas.toDataURL();

            generated image appear withoin graph lines, just graph area itself, with legend, but withiut lines.

          • Anjali says:

            konstantin,

            Issue is most probably because you are calling canvas.toDataURL() before the animation completes. You can fix the issue by calling canvas.toDataURL() inside setTimeout() with delay for 2 second.

  7. Bryan says:

    Is it possible to make the course title and/or the legend text non-breaking text? I’ve been trying to include   but it doesn’t seem to be working. The result is “Legend String” and “Doughnut Title” gets put on my doughnut chart:

    var reviewsData = [
    { y: courses_reviewed, legendText: Legend String}
    ];

    renderMyChart(trackingContainer, trackingData, “Doughnut Title”);

    Here’s a JFIDDLE demonstrating the above: http://jsfiddle.net/gratiafide/n6r5gsqq/2/

    Thanks in advance for your help.

  11. Michael says:

    Is there a way to disable the entire legend? I am trying to make the entire legend toggle when a button is pressed.

  12. ssd-dev says:

    If there are too many items in the legend, they are cut off as shown here: https://jsfiddle.net/4wu3mpf1/3/
    This is definitely an edge case. However, this occurs often in my application.

    Maybe it would be possible to introduce an optional scroll bar for the legend.
    To provide this configuration option, a custom scroll bar and scroll behavior is required. I acknowledge that this is not easy to implement as I was not able to find any prototype of scroll bars inside a canvas element.

    Nonetheless, it would be great to have this problem solved. Maybe someone comes up with a better idea than scroll bars. Cutting off the legend labels is, unfortunately, not an option.

    • Sanjoy says:

      We are aware of this issue, and might come up with scroll bar for legend in future versions. For now please refer this thread.

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