highchartsreact-highcharts

Import Pictorial chart

I am trying to add a pictorial chart to my react project. However, I am receiving an error message saying that I am unable to resolve the path to the highcharts/modules/pictorial module.

to import pictorial chart in my project react

Solution

  • You should import the Highcharts package and underneath it, import the pictorial module. After importing the module, you should initialize it like shown below:

    import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import Pictorial from 'highcharts/modules/pictorial';

Pictorial(Highcharts);

    Then, you can set the chart type as pictorial and it should work correctly. Keep in mind that the pictorial series is available from Highcharts v11.0.0, so make sure that you target proper version.

    Demo: https://stackblitz.com/edit/react-pvnk4k?file=index.js

    References:
    https://www.highcharts.com/blog/changelog/#highcharts-v11.0.0
    https://github.com/highcharts/highcharts-react#how-to-add-a-module