itemTextFormatter: Function

A custom formatter function that returns text to be displayed inside individual legend items.

Note
  • legendText property of dataSeries / dataPoint overrides itemTextFormatter.
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
legend:{
   itemTextFormatter: function ( e ) {
               return "Custom Legend "  + e.dataPoint.label;  
   }  
 },

 .
 .
});
chart.render();

By using itemTextFormatter, you can return any value to be displayed inside legendItems.
Below is the structure of object passed as parameter to the function:

e: { // parameter sent to function
       chart,
       legend,
       dataSeries,
       dataPoint          // Available only in case of pie / doughnut
 }
Note
  • dataPoint is available as part of parameter only in case of pie / doughnut charts. It is null in case of other chart types.
Try Editing The Code

  Also See:    

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

7 Comments

  1. Jake says:

    Any chance of adding HTML encoding support to the legendText or itemTextFormatter? I’m trying to render a element icon before each legend item, but it always just outputs the HTML as a part of the string. Another option is to allow custom images/svgs as the dataSeries marker…?

  2. Lalit says:

    is it possible support multiple legend box with single legend Text?
    i means like following

    [REDBOX] [BLUE_BOX] [PINK_BOX] : legendText

      • Lalit says:

        Thanks for fast reply,
        i fixed problem but one more thing legendText propertie support html?

      • Lalit says:

        i need something like following with column chart

        [REDBOX] [BLUE_BOX] [PINK_BOX] : legendText1
        [REDBOX] [BLUE_BOX] [PINK_BOX] : legendText2
        [REDBOX] [BLUE_BOX] [PINK_BOX] : legendText3

        • Sanjoy says:

          Legend text doesn’t support HTML properties. So, implementing custom legend with HTML you can customize it according to your requirement. Here is an example of custom legend implementation.

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