Error when adding Variable Radius Pie in Highcharts React

Question

I am trying to add a Variable Radius Pie Chart in a Next.js Project. I have downloaded the latest versions of Highcharts and the Highcharts React Wrapper and have imported them:

import styles from '../../src/styles/VariableRadiusPie.module.css'
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import variablePie from 'highcharts/modules/variable-pie';

variablePie(Highcharts);

Here is my component that I am trying to render:

const RadiusPie = ( { prop } ) => {

const options = {
    chart: {
      type: 'variablepie'
    },
    title: {
      text: 'Variable Radius Pie Chart'
    },
    series: [{
      name: 'Sales',
      data: [{
        name: 'Product A',
        y: 45,
        z: 10
      }, {
        name: 'Product B',
        y: 25,
        z: 5
      }, {
        name: 'Product C',
        y: 20,
        z: 15
      }, {
        name: 'Product D',
        y: 10,
        z: 20
      }]
    }]
  };

return (
    <>
        <div className={styles.RadiusPieParent}>
            <div className={styles.RadiusTitle}>
                <div className={styles}>
                    <p>Revenue By Geographical Location</p>
                </div>
            </div>
            <div className={styles.RadiusPie}>
                <HighchartsReact highcharts={Highcharts} options={options} constructorType={''} />
            </div>
        </div>
    </>
  )
 }

export default RadiusPie;

Unfortunately, I come across the error

TypeError: Cannot read properties of undefined (reading 'Core/Series/SeriesRegistry.js')

I believe the Error originates from this line of code:

variablePie(Highcharts);

But after Removing this line I am presented with the error:

Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=variablepie

I do not know how to get rid of this error and any help would be appreciated.

Error #17 occurs due to using the series type that comes from the module that you removed. This is not a correlated issue to the previous one. As @AztecCodes mentioned, you should define constructorType. If this doesn't help, try to confront your code with the following working demo: https://codesandbox.io/s/highcharts-react-demo-forked-nd8vrn — magdalena, Jun 19 '23 at 10:49

score 1 · Accepted Answer · answered Jun 16 '23 at 16:33

Reinstall highcharts:

npm install highcharts highcharts-react-official

Try to adjust your imports like this:

Imports:

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import variablePie from 'highcharts/modules/variable-pie';

variablePie(Highcharts);

Also is your constructorType empty because you want to have it empty? Otherwise I would do this:

<HighchartsReact highcharts={Highcharts} options={options} constructorType={'chart'} />

Error when adding Variable Radius Pie in Highcharts React

1 Answers1