Page 1 of 1

Add material checkbox to legend

Posted: Mon Dec 03, 2018 5:47 am
by amdeshpande
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

Re: Add material checkbox to legend

Posted: Mon Dec 03, 2018 3:02 pm
by bastss
Hello amdeshpande,

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

Best regards!

Re: Add material checkbox to legend

Posted: Tue Dec 04, 2018 5:13 am
by amdeshpande
Yeah.
But the checkbox for the legend item should be same as material checkbox.
https://material.angular.io/components/ ... x/overview

Re: Add material checkbox to legend

Posted: Tue Dec 04, 2018 1:43 pm
by bastss
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!