highchartsreact-highcharts

In React js unable to get waterfall chart using Highcharts library


I need to build a waterfall chart in my React js web application using Highcharts, I have installed highcharts and 'highcharts-react-official' but while doing below import:

import HighchartsWaterfall from 'highcharts/modules/waterfall';

I am getting error

Module not found: Can't resolve 'highcharts/modules/waterfall.

When I checked my node_modules folder under highcharts/modules I do not see any waterfall related library. I tried installing latest highcharts version still no luck.

How to fix this issue for React JS application?

I am expecting waterfall related files/libraries to be present under highcharts/modules folder post installing highcharts library.


Solution

  • Sadly the waterfall module does not exist. To solve the issue, you only need to import highcharts-more.

    import React from "react";
    import { render } from "react-dom";
    import Highcharts from "highcharts";
    import HighchartsReact from "highcharts-react-official";
    
    import HC_More from "highcharts/highcharts-more";
    
    HC_More(Highcharts);
    

    Demo: https://codesandbox.io/p/sandbox/highcharts-react-simple-chart-forked-xwslcy