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

Add material checkbox to legend

Mon Dec 03, 2018 5:47 am

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
Posts: 140
Joined: Wed Oct 17, 2018 10:59 am

Re: Add material checkbox to legend

Mon Dec 03, 2018 3:02 pm

Hello amdeshpande,

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

Best regards!

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

Re: Add material checkbox to legend

Tue Dec 04, 2018 5:13 am

Yeah.
But the checkbox for the legend item should be same as material checkbox.
https://material.angular.io/components/ ... x/overview

bastss
Posts: 140
Joined: Wed Oct 17, 2018 10:59 am

Re: Add material checkbox to legend

Tue Dec 04, 2018 1:43 pm

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!

Return to “Highcharts Usage”