import Chartkick from 'chartkick'; import { toggle } from '@utils'; export function toggleChart(event, chartClass) { const nextSelectorItem = event.target, nextChart = document.querySelector(chartClass), nextChartId = nextChart.children[0].id, currentSelectorItem = nextSelectorItem.parentElement.querySelector( '.segmented-control-item-active' ), currentChart = nextSelectorItem.parentElement.parentElement.querySelector( '.chart:not(.hidden)' ); // Change the current selector and the next selector states currentSelectorItem.classList.toggle('segmented-control-item-active'); nextSelectorItem.classList.toggle('segmented-control-item-active'); // Hide the currently shown chart and show the new one toggle(currentChart); toggle(nextChart); // Reflow needed, see https://github.com/highcharts/highcharts/issues/1979 Chartkick.charts[nextChartId].getChartObject().reflow(); }