I'm working with heat maps in react and I have run into a weird issue. I am using Highcharts version 9.2.2 since I was told there was a bug with the most recent version of heat maps related to keyboard navigation. When I don't try to update the chart, my keyboard navigation works as expected. But when I try to update the chart using setChartOptions function, it breaks and keyboard navigation occurs in a weird order. I've included a code sample below.
Any thought on what is going wrong?
Code: Select all
import React, { useEffect, useState } from 'react';
import { render } from 'react-dom';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import highchartsAccessibility from 'highcharts/modules/accessibility';
import highchartsDebugger from 'highcharts/modules/debugger';
import highchartsExporting from 'highcharts/modules/exporting';
import highchartsExportData from 'highcharts/modules/export-data';
import highchartsNoDataToDisplay from 'highcharts/modules/no-data-to-display';
import highchartsPatternFill from 'highcharts/modules/pattern-fill';
import highchartsHeatMap from 'highcharts/modules/heatmap';
import _set from 'lodash-es/set';
import _clone from 'lodash-es/clone';
import _merge from 'lodash-es/merge';
if (typeof Highcharts === 'object') {
highchartsAccessibility(Highcharts);
highchartsDebugger(Highcharts);
highchartsExporting(Highcharts);
highchartsNoDataToDisplay(Highcharts);
highchartsExportData(Highcharts);
highchartsPatternFill(Highcharts);
highchartsHeatMap(Highcharts);
}
const HeatMapChart = () => {
const [chartOptions, setChartOptions] = useState({
chart: {
type: 'heatmap',
displayErrors: false,
},
colors: Highcharts.getOptions().colors,
colorAxis: {
dataClassColor: 'category',
dataClasses: [
{
from: 125,
},
{
from: 100,
to: 125,
},
{
from: 75,
to: 100,
},
{
from: 50,
to: 75,
},
{
from: 25,
to: 50,
},
{
from: 0,
to: 25,
},
],
},
series: [
{
name: 'Logins over time',
data: [
[0, 0, 7],
[0, 1, 30],
[0, 2, 90],
[1, 0, 10],
[1, 1, 80],
[1, 2, 90],
[2, 0, 20],
[2, 1, 55],
[2, 2, 120],
[3, 0, 110],
[3, 1, 8],
[3, 2, 55],
[4, 0, 25],
[4, 1, 110],
[4, 2, 70],
[5, 0, 40],
[5, 1, 10],
[5, 2, 100],
[6, 0, 10],
[6, 1, 8],
[6, 2, 50],
[7, 0, 30],
[7, 1, 40],
[7, 2, 25],
],
},
],
plotOptions: {
series: {
animation: false,
dataLabels: {
enabled: true,
},
},
},
});
useEffect(() => {
_set(chartOptions, 'chart.displayErrors', true);
_set(chartOptions, 'plotOptions.series.animation', true);
const newOptions = {
...chartOptions,
};
setChartOptions(newOptions);
}, []);
return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};
export default HeatMapChart;
render(<HeatMapChart />, document.getElementById('root'));