A custom formatter function that returns text to be displayed inside individual legend items.
Note
var chart = new CanvasJS.Chart("container",
{
.
.
legend:{
itemTextFormatter: function ( e ) {
return "Custom Legend " + e.dataPoint.label;
}
},
.
.
});
chart.render();
e: { // parameter sent to function
chart,
legend,
dataSeries,
dataPoint // Available only in case of pie / doughnut
}
Also See:
Comments 7
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
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…?
Jake,
Its not possible to add HTML content to legend, as of now.
is it possible support multiple legend box with single legend Text?
i means like following
[REDBOX] [BLUE_BOX] [PINK_BOX] : legendText
Lalit,
Sorry as of now legend supports only one marker. As a workaround you can check this example.
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.