column or bar chart does not render - error: The "highcharts" property was not passed

[Kapil Adiyecha]

Versions:
"react": "^16.14.0",
"react-dom": "^16.14.0",
"highcharts": "^11.0.0",
"highcharts-react-official": "^3.0.0",

BarChart.js

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const BarChart = ({ data = [], config = {} }) => {
    const defaultConfig = {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Bar Chart'
        },
        xAxis: {
            categories: data.map((item) => item.category),
            title: {
                text: 'Categories'
            }
        },
        yAxis: {
            title: {
                text: 'Values'
            }
        },
        series: [
            {
                name: 'Data',
                data: data.map((item) => item.value)
            }
        ],
        exporting: {
            enabled: true // Enable the export menu
        }
    };

    const mergedConfig = { ...defaultConfig, ...config };

    if (data.length === 0) {
        mergedConfig.xAxis.categories = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'];
        mergedConfig.series[0].data = [10, 20, 30, 40, 50];
    }

    return <HighchartsReact highcharts={Highcharts} options={mergedConfig} />;
};

export default BarChart;

Error:

However, the same component works fine when type is changed to 'line'.

[Paweł Potaczek]

Hi @kapiladiyecha,

Thank you for contacting us!

Your config looks correct, I've tried to reproduce the issue by using your code, but also everything works fine. Please update the below live example to show the problem.

Live demo: https://codesandbox.io/s/highcharts-react-demo-v5np3h?file=/demo.jsx

[Kapil Adiyecha]

Hi @ppotaczek

Thank you for your response!
I tried replicating it on the codesandbox, but I couldn't.

Not sure what is causing the failure with the bar charts only. All the rest of the charts (line, pie, gauge, etc) are working fine.
I'm sure there must be one of the conflicting library or something else (not related to the chart config).

I will have to debug the highchart component it seems to figure out the root cause.