Kendo UI React.js Chart Legend Customization

Hello,

There are two options:

1) Programmatically draw shapes in the legend as it is an SVG and we have to draw all elements:

https://www.telerik.com/kendo-react-ui/components/charts/api/ChartLegendItemProps/#toc-visual

More details on the drawing API:

https://www.telerik.com/kendo-react-ui/components/drawing/

2) Another option, in this case, is the custom external legend. We have many customers using this approach for these cases as it allows nice flexibility and keeps all of the information in the state. It requires rendering items for each series and dynamically showing and hiding them based on which one is clicked.

I made an example with an external legend to show a possible approach:

https://stackblitz.com/edit/react-ujkzeh-jmvjmh?file=app/main.jsx

Regards,
Stefan
Progress Telerik