I want to create a scatter chart, where the color of the scatter is determined by a value, which will be displayed on a colorAxis as a gradient. Here is the jsfiddle of the problem:<
https://jsfiddle.net/codelock/2b3fmnLw/13/> As I have created the component in react, I am importing `highcharts`, `highchartsReact`, and `heatmap` module in the component and wrapping the Highcharts with heatmap like follows:
Code: Select all
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { Grid, Typography } from '@material-ui/core'
import hm from 'highcharts/modules/heatmap'
hm(Highcharts)
I am adding options in the colorAxis as follows and then assigning the `colorAxis` variable in the colorAxis property of the chart.
Code: Select all
colorAxis.push({
id: selected.mixCode,
min: colorArray?.[0],
max: colorArray?.[colorArray.length - 1],
minColor: colorSet[0],
maxColor: colorSet[3],
marker: null,
showInLegend: true,
marginRight: '10px',
})
And the chart options stays the same as the referenced fiddle, but values are assigned dynamically. The problem requires the data to be dynamically selected. For example, the current fiddle output shows 2 people - John and Gina. The user has the option to select any 10 names from the given list. There is no error when the first set of people are selected. Everything renders perfectly. After I deselect from the people list for the first time, if I try to select or deselect another person, the app crashes with following error: `TypeError: Cannot read property 'indexOf' of undefined`.
So far I have tried:
1. replacing `heatmap` with `coloraxis` module while importing
2. If I remove the colorAxis entirely or assign some static value, it works perfectly.