Overview – Chart Legend

When the data appearing in a chart contains multiple dataSeries, it becomes more readable if they are shown in a legend. This helps in identifying each dataSeries/dataPoint in the chart.

In this section we will study about Styling and Aligning Legend.

CanvasJS HTML5 Chart Label

Enabling Default Legend

When we want Legend to appear for a dataSeries, we set showInLegend to true in that dataSeries, this makes the dataSeries to appear in legend. This way you can choose which dataSeries to show in legend.
By default name of series is shown in legend. To Customize the text, you can mention legendText in dataSeries.

In the next example we will enable legend and add custom text to it.

Try Editing The Code

Legend Object

After Enabling Legend for Charts, we can control the appearance, positioning and Styling of legend. 

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 legend:{
   //legend properties
 },
 .
 . 
});
chart.render();
Applies To Attribute Type Default Options/Examples
legend cursor String null “pointer”, “crosshair”..
legend fontSize Number 12 25, 30 ..
legend fontFamily String “Trebuchet MS, Helvetica, sans-serif” “arial” , “tahoma”, “verdana” ..
legend fontColor String “#333333” “red”, “yellow” ,”#FF0000″ ..
legend fontWeight String “bold” “lighter”, “normal, “bold”, “bolder”
legend fontStyle String ““normal”” “normal”,“italic”, “oblique”
legend markerMargin Number Auto calculated based on fontSize 4, 12..
legend itemclick Function null function (e){….}
legend itemmouseover Function null function (e){….}
legend itemmousemove Function null function (e){….}
legend itemmouseout 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

Below Chart we will Add font Properties to Style the text appearing in legend.

Try Editing The Code

Aligning Legend

Legend can be positioned in 8 different places by combining verticalAlign and horizontalAlign properties. Below is a table showing various combinations.

Options horizontalAlign verticalAlign
1 “left” “top”
2 “left” “center”
3 “left” “bottom”
4 “center” “top”
5 “center” “bottom”
6 “right” “top”
7 “right” “center”
8 “right” “bottom”
Try Editing The Code

Finishing it up.

In the next example, we add legend in a chart and style it by adding legend object to the Chart Options.

Try Editing The Code

  Also See:    

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

50 Comments

  1. Gilles says:

    Padding (and Line-height) control for legends would be nice because the legend touches the right border of the canvas box sometimes.

    • Sunil Urs says:

      Gilles,

      If you can create a fiddle showing the issue, we’ll fix the same at the earliest. I’ll add Padding to the wish list.

    • Sunil Urs says:

      Thank you… A margin of few pixels should fix the issue. I’ll do the same in the next release…

  3. MadhanKumar says:

    Is that posible to hide the coresponding dataseries in the chart by clicking the legend text….?

    • Sunil Urs says:

      Madhan, this feature is not available as of now. But am planning to implement it in future versions…

      Update: This is possible from version 1.4. Here is an example.

  5. Brian says:

    Is there any way to specify a background color and border for the legend, to make it stand out a bit from the background?

    • Sunil Urs says:

      It is not possible to show legend for each column that way. But you workaround this by creating multiple series – each with a single dataPoint.

  8. AlanJames says:

    Is it possible to dynamically change the ” legendText ” when updating the datapoints (without refreshing the page) ?

    • AlanJames says:

      What I mean by this is, on a multi-line dynamic chart, I would like to remove a add another one, this works..except for the legend text and tooltip/name……how do you update those ?

    • AlanJames says:

      Not to worry…. I worked it out thanks..

      I put the chart creation in it’s own function, then when I remove/add a line, I set the datapoints on all lines to zero and then call the the chart creation function…refreshing the chart with the new info.

  12. Amechi Egbe says:

    He is it possible to extend the legend outside of the chart area, as I would like to enable filtering of the data points on a separate table. For now the only thing I see is being able to use the legend within the Chart area.

    • Anjali says:

      Hi,

      Its not possible to render legend outside the chart area. But in case you want to filter data in a table or something based on the legend clicked by the user, you can do so by subscribing to legend’s itemClick event.

    • Anjali says:

      karthik,

      It is not possible yet. But currently we are implementing maxWidth and maxHeight property for legend which should be available in the next version – by the end of this month.

  14. msp says:

    Hi, Ihave a problem,
    How i can to show legend , value , and data in multiline chartjs with database?

  15. Jitesh says:

    Hi, I am plotting multi charts. Is it possible to keep legends in left bottom of the page , currently it is at just below the charts. ??

    Also Is it possible to create each legend in new line, currently all legend are grouping horizontally with space separating. ??

      • Ola says:

        This doesn’t work very well if you have multiple lines/legends (50+) in the chart.

        – Even if verticalAlign=left and horizontalAlign=bottom is set this doesn’t work after ~ 50 legends. There will be more than one legend per line and each item seems to be stripped.

        – The size of the legend (amount of items/length) affects the size of the chart. there should be a way for force the width+height for the chart and legend separately.

        • Vishwas says:

          We’ve put a limit on the maximum height of Legend (relative to chart height) so that it doesn’t keep reducing chart’s size and that is why it gets clipped after a certain number. You can override this behavior by setting maxHeight property of legend. Generally it is not recommended to have too many (>40) legends. Still, if it not avoidable, you increase the chart’s height itself in order to accommodate all the legends.

        • Ola says:

          That’s one idea but the chart height (chart + legend) does vary if you have e.g. 20 legends compared to 30 legends. The result is that also the chart (plot area) varies in size for these two examples. In other words, the legend size is growing and consuming space from the chart plot area.

          I assume everyone would like to have the same dimensioning of the actual chart area independently of the amount of legends. One solution could be to implement variables for setting fixed size of the chart area and then just let the legend grow according to needs.

          • Sanjoy says:

            Thanks for the suggestion. Though this feature is not available as of now, we’ll consider this in future versions.

  16. German says:

    This is an outstanding work. Thanks very much!
    Just one simple question, instead of giving a fixed value like fontSize: 20, I would like to use relative fontsize: 3em.
    How could I do that? If this feature is not supported, it would be nice to use CSS to alter the size from outside.

    Thanks again,
    Germán

  17. marissajmc says:

    In a splineArea chart, the legend icons are triangles. Can the legend icon shape be changed to a square?

  20. Memorymantra says:

    Great job guys!! Such a handy and easy graph through canvasjs.
    How can I show legends of my choice in bar graph. in given bar graph below. I want orange color should be shown as : “used”, green as “free”, red as “not available”, blue as “faulty”. It is bar graph. so legend should be defined on the basis of color.
    dataPoints: [
    { label: “avb0”, y: 100, color: “orange” },
    { label: “avb1”, y: 100, color: “green” },
    { label: “avb2”, y: 100, color: “orange” },
    { label: “avb3”, y: 100, color: “blue” },
    { label: “avb4”, y: 100, color: “orange” },
    { label: “avb5”, y: 100, color: “green” },
    { label: “avb6”, y: 100, color: “red” },
    { label: “avb7”, y: 100, color: “orange” },
    { label: “avb8”, y: 100, color: “orange” },
    { label: “avb9”, y: 100, color: “blue” },
    { label: “avb10”, y: 100, color: “green” },
    { label: “avb11”, y: 100, color: “orange” },
    { label: “avb12”, y: 100, color: “red” },
    { label: “avb13”, y: 100, color: “blue” },
    { label: “avb14”, y: 100, color: “orange” },
    { label: “avb15”, y: 100, color: “orange” },

    ]

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