Cannot use Highchart Histogram in React

Question

I am working on some charts of Highchart and all of them are OK. But Today I want to create new Histogram chart and show in my dashboard But I have problem to use Highchart imports and dependencies.

I reviewed some sample such as : https://codesandbox.io/s/bellcurve-react-highcharts-q4cxg?file=/src/index.js:61-108

Mentioned sample was worked on codesandbox but I cannot use it in my project

Error Details:

TypeError: Cannot read property 'seriesType' of undefined

And My code is as below:

import React, { Component } from 'react';

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

import bellCurve from "highcharts/modules/histogram-bellcurve"; //module
bellCurve(Highcharts); //init module


class UvChart3 extends Component {
    constructor(props) {
        super(props);

        this.state = {
            config: {
                title: {
                    text: null
                },

                legend: {
                    enabled: false
                },

                xAxis: [
                    {
                        title: {
                            text: "Data"
                        },
                        visible: false
                    },
                    {
                        title: {
                            text: "Bell curve"
                        },
                        opposite: true,
                        visible: false
                    }
                ],

                yAxis: [
                    {
                        title: {
                            text: "Data"
                        },
                        visible: false
                    },
                    {
                        title: {
                            text: "Bell curve"
                        },
                        opposite: true,
                        visible: false
                    }
                ],

                series: [
                    {
                        name: "Bell curve",
                        type: "bellcurve",
                        xAxis: 1,
                        yAxis: 1,
                        intervals: 4,
                        baseSeries: 1,
                        zIndex: -1,
                        marker: {
                            enabled: true
                        }
                    },
                    {
                        name: "Data",
                        type: "scatter",
                        data: [
                            0.0,
                            10.0,


                        ],
                        visible: false,
                        marker: {
                            radius: 1.5
                        }
                    }
                ]
            }
        };
    }
    render() {
        return (
            <HighchartsReact
                constructorType={"chart"}
                ref={this.chartComponent}
                highcharts={Highcharts}
                options={this.state.config}
            />
        );
    }
}

export default UvChart3;

Would you please help me?

Answer 1

It seems that the codesandbox which you have shared uses the not official version of the Highcharts React wrapper, but the code in your project does.

Make sure that you have installed the correct version of the React Wrapper in your local project - https://github.com/highcharts/highcharts-react

And try to use this config: https://stackblitz.com/edit/react-cygz3p?file=index.js