separate legend with onclick function for 2 donut charts

[willtron]

I'm attempting to create a legend outside of the highcharts container in order to hide/show data series on 2 donut charts simultaneously -- similar to how a normal legend would function when you clicked on one of the series listed in the legend for each individual chart. The data for each series is generated on the server via php and passed as json on the client side. I have everything looking the way I'd like, including rendering the "custom legend" in a div tag and populating the div tag with the proper series color and series names, but I can't get the onclick event to work correctly. In particular, I don't know what this line dose

const points = Highcharts.charts.map((chart) => chart.series[inx])

I get undefined for 'points' and "Uncaught TypeError: Cannot read property 'visible' of undefined" in the console

Code: Select all

		  $('#legend .item').click(function() {
			const inx = $(this).index()
			const points = Highcharts.charts.map((chart) => chart.series[inx])
			console.log(points);
			points.forEach((point) => {
			  if (point.visible) point.setVisible(false)
			  else point.setVisible(true)
			})
		  })

I can't find any reference to the Highcharts.charts.map class/function(?) in any of the highcharts API documentation.

The fiddle with all the code I'm attempting to use can be found here https://jsfiddle.net/Willtron/75rb2gv3/25/

Note: I modified the legend code from another jsfiddle https://jsfiddle.net/1v4m5jce/ and am basically trying to tweak it to fit my circumstance. I'm not exactly adept at jquery or js. I've tried several different code variations over the past couple hours and I'm at a loss.

[pawelys]

Hello, welcome to the official highcharts forum, and thanks for contacting us with your question! In the second demo, everything seems to work fine.

The line that you emphasized is the map function for an array, here is its documentation. This isn't the highcharts method, just general Array.prototype.map js function. Check the API reference below: https://developer.mozilla.org/pl/docs/W ... /Array/map

In case of any further questions feel free to contact us again!
Kind regards,

[willtron]

thanks for the js array map info. it pointed me in the right direction. after a few iterations I finally got this to work. the key was understanding the js dot notation for the highcharts objects and properties. the code I was using from the origainal line charts example above was

const points = Highcharts.charts.map((chart) => chart.series[inx])

for my specific donut chart situation I had to tweak this to

const points = Highcharts.charts.map((chart) => chart.series[0].data[inx])

I had tried =>chart.series.data[inx] in my original effort, but that didn't work. the key was adding the [0] index to the series array. So, the final code that worked was

Code: Select all

		  $('#legend .item').click(function() {
			const inx = $(this).index()
			console.log(inx);
			const points = Highcharts.charts.map((chart) => chart.series[0].data[inx])
			console.log(points);
			points.forEach((point) => {
			  if (point.visible) point.setVisible(false)
			  else point.setVisible(true)
			})
		  })

The fiddle that reflects the above final code is here https://jsfiddle.net/thfjrkwb/

One final question: is there a way to add the glow/highlight affect to the requisite chart segment when I hover over one of the series names in my custom legend similar to the functionality in the embedded highcharts legend?

[pawelys]

Hi! Good to hear, you figured it out!

What you can do, is override the mouseIn and mouseOut events, so they add CSS class to the correct legend item. Let me know if this works for you!
In case of any further questions feel free to contact us again!
Kind regards,

[willtron]

I appreciate the words of encouragement, but I'm afraid I have no idea how to implement this or where to place the code.

[pawelys]

I've decided to help you a bit, and show, how I would approach the problem. Check the following demo, and let me know, if that works for you! Kind regards
https://jsfiddle.net/BlackLabel/16cy9032/

[willtron]

thanks Pawel. your fiddle provided the functionality I was looking for. btw, your code comment regarding the charts title "shenanigans" made me chuckle .... thanks again

[pawelys]

You're welcome! In case of any further questions feel free to contact us again! Kind regards,