amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Add material checkbox to legend

Hi ,
We are using highcharts with material UI in angular 6.
I want to enable the checkboxes for legend items, but we need the checkboxes rendered by highcharts to look like material checkboxes.
I tried adding the styling as suggested in the below fiddle but its working properly for me.

http://jsfiddle.net/pcj83fwa/

Suggest any options for this
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Add material checkbox to legend

Hello amdeshpande,

Are you looking for something like this http://jsfiddle.net/Le4Vc/4/?

Best regards!
Sebastian Wędzel,
Highcharts Developer
amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Re: Add material checkbox to legend

Yeah.
But the checkbox for the legend item should be same as material checkbox.
https://material.angular.io/components/ ... x/overview
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Add material checkbox to legend

amdeshpande,

It is impossible to create checkbox buttons like this in Highcharts. You need to turn Highcharts legend off and create your own legend inside your Angular component. Using hide and show methods could be useful API: https://api.highcharts.com/class-refere ... eries#hide. Also, check this example: https://jsfiddle.net/Bastss/ye0h71vz/

Kind regards!
Sebastian Wędzel,
Highcharts Developer

Return to “Highcharts Usage”