codelock
Posts: 3
Joined: Wed May 19, 2021 9:02 pm

Cannot read property indexOf of undefined in highcharts colorAxis

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`.
Image

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.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Cannot read property indexOf of undefined in highcharts colorAxis

Hello,

Thanks for contacting us with your question!

It is hard to tell you what is not working and what could be done without taking look at your code.

Could you reproduce the issue in an online editor that I could work on? You can start here: https://codesandbox.io/s/highcharts-rea ... rked-xqjon .

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Cannot read property indexOf of undefined in highcharts colorAxis

Hi codelock,

Also please do not duplicate topics on different support channels:
https://www.highcharts.com/blog/support/

If you asked the question on StackOverflow then you'll find the answer there:
https://stackoverflow.com/questions/692 ... -coloraxis

Kind Regards

Return to “Highcharts Usage”