From 5cfc41709441e14099ec67d3109314d49eb49a92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Mon, 19 Dec 2022 15:25:01 +0100 Subject: [PATCH 1/2] Created first version of the solution. --- .../highcharts/13-synchronized-pies/main.js | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/highcharts-api/highcharts/13-synchronized-pies/main.js b/highcharts-api/highcharts/13-synchronized-pies/main.js index e69de29..eb10b71 100644 --- a/highcharts-api/highcharts/13-synchronized-pies/main.js +++ b/highcharts-api/highcharts/13-synchronized-pies/main.js @@ -0,0 +1,66 @@ +Highcharts.chart('container', { + chart: { + events: { + load() { + const chart = this; + chart.addSeries({ + type: 'pie', + center: ['75%', '50%'], + data: chart.series[0].data.map(el => ({ name: el.name, y: el.y })) + }); + } + } + }, + + plotOptions: { + pie: { + size: '50%', + dataLabels: { + enabled: false, + }, + point: { + events: { + mouseOver(e) { + const chart = this.series.chart; + + chart.series[e.target.series.index === 0 ? 1 : 0].points[e.target.x].setState('hover'); + + if(!chart.secondTooltip) chart.secondTooltip = new Highcharts.Tooltip(chart, chart.tooltip.options); + chart.secondTooltip.refresh(chart.series[1].points[e.target.x]); + }, + + legendItemClick(e) { + this.series.chart.series[1].points[e.target.x].update({ + visible: !e.target.visible + }); + } + } + } + }, + }, + + series: [{ + type: 'pie', + center: ['25%', '50%'], + showInLegend: true, + data: [{ + name: 'Commerce', + y: 70, + }, { + name: 'Engineering', + y: 30, + }, { + name: 'Financial Services', + y: 18.8 + }, { + name: 'Logistics, Aviation & Shipping', + y: 5.5 + }, { + name: 'Seafood & Marine', + y: 9.8 + }, { + name: 'Corporate Services & oters', + y: 3.5 + }] + }] +}); From f4d5958de30bbb6b524c5fc816557651311749f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Wed, 21 Dec 2022 11:25:12 +0100 Subject: [PATCH 2/2] Resolved issues after first code review. --- .../highcharts/13-synchronized-pies/main.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/highcharts-api/highcharts/13-synchronized-pies/main.js b/highcharts-api/highcharts/13-synchronized-pies/main.js index eb10b71..1f0e467 100644 --- a/highcharts-api/highcharts/13-synchronized-pies/main.js +++ b/highcharts-api/highcharts/13-synchronized-pies/main.js @@ -21,14 +21,21 @@ Highcharts.chart('container', { point: { events: { mouseOver(e) { - const chart = this.series.chart; + const chart = this.series.chart, + otherSeries = chart.series[e.target.series.index === 0 ? 1 : 0], //another pie series + otherPoint = otherSeries.points[e.target.x]; //corresponding point in another pie - chart.series[e.target.series.index === 0 ? 1 : 0].points[e.target.x].setState('hover'); + otherSeries.points[e.target.x].setState('hover'); if(!chart.secondTooltip) chart.secondTooltip = new Highcharts.Tooltip(chart, chart.tooltip.options); - chart.secondTooltip.refresh(chart.series[1].points[e.target.x]); + chart.secondTooltip.refresh(otherPoint); + }, + mouseOut(e) { + const chart = this.series.chart; + if(chart.secondTooltip) { + chart.secondTooltip.destroy(); + } }, - legendItemClick(e) { this.series.chart.series[1].points[e.target.x].update({ visible: !e.target.visible