[Bullet chart]: Cannot read properties of undefined (reading 'Series/Column/ColumnSeries.js') in react

[niralivasoya]

Setup used

• Reactjs

Code

import { simulation1 } from '@/data/ChartData';
import Highcharts from 'highcharts';
import bulletChart from 'highcharts/modules/bullet';
import HighchartsReact from 'highcharts-react-official';

bulletChart(Highcharts);

const HorizontalBarChartCarbon = () => {
    const defaultCarbonCutoffs = [100, 30, 40];

    const chartOptions = {
        chart: {
            type: 'bullet',
            height: 190,
            inverted: true,
        },
        title: {
            text: 'Carbon Output (kgCO2/m2/yr)',
            margin: 20,
            style: {
                fontSize: '14px',
                color: '#5D5C56',
                fontWeight: 600,
            },
            align: 'left',
        },
        xAxis: {
            categories: ['Operational CO2', 'Embodied CO2', 'Life Cycle CO2'],
            labels: {
                distance: 10,
                style: {
                    color: '#7C7A73',
                    fontSize: '11px',
                },
            },
            gridLineWidth: 1,
        },
        yAxis: {
            title: {
                text: null,
            },
            opposite: true,
            labels: {
                distance: 10,
                style: {
                    color: '#7C7A73',
                    fontSize: '11px',
                },
            },
            gridLineWidth: 1,
        },
        legend: {
            enabled: false,
        },
        plotOptions: {
            bullet: {
                color: '#794F9F',
                pointPadding: 0,
                pointWidth: 26,
            },
            targetOptions: {
                height: 1,
            },
        },
        series: [
            {
                name: 'Value',
                data: [
                    {
                        y: simulation1.EUI,
                        target: defaultCarbonCutoffs[0],
                    },
                    {
                        y: simulation1.CEDI,
                        target: defaultCarbonCutoffs[1],
                    },
                    {
                        y: simulation1.TEDI,
                        target: defaultCarbonCutoffs[2],
                    },
                ],
            },
        ],
    };

    return (
        <div>
            <HighchartsReact highcharts={Highcharts} options={chartOptions} />
        </div>
    );
};

export default HorizontalBarChartCarbon;

Current Result

What is wrong here, I am getting the above error. It is working properly but in the console, I am getting this error continuously.

I have used Bullet, especially for setting the marker (Targets). Please suggest if there is any alternate way to do this.

Thanks

[ppotaczek]

Hi @niralivasoya,

Thank you for contacting us!

I've tried to reproduce the problem, but everything works fine with the coded that you provided. Live example: https://codesandbox.io/s/highcharts-react-demo-9yq3xg?file=/demo.jsx

However, some of your parent components can trigger re-render and the chart may update unnecessarily, so please try to keep your chartOptions in state or memorize them.

Best regards!

[niralivasoya]

@ppotaczek, Thank you so much for your reply. I will try to minimize the re-rendering.

[ppotaczek]

Closed due to inactivity.