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 it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 7

  1. 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. is it possible support multiple legend box with single legend Text?
    i means like following

    [REDBOX] [BLUE_BOX] [PINK_BOX] : legendText

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

      • 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

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

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.