Issue with creating a highchart funnel chart in react

Question

I'm looking to render a highcharts funnel chart on my page using the highcharts-react-official library. However, i'm getting highcharts react error #17 when I try and do so. From the documentation it seems I have to import 'highcharts/modules/funnel.js' as well. I believe this is pretty straightforward, but i'm a bit lost on how to do this in my component. Below is the code I am currently playing with. The configuration seems to work fine in the codepen editor

import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import React, { Component } from 'react';

const funnelChartOptions = {
    chart: {
        type: 'funnel',
        spacing: [10, 10, 15, 10]
    },
    backgroundColor: 'transparent',
    title: {
        text: 'Sales funnel'
    },
      funnel: {
    showInLegend: true
  },
      tooltip: {

      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
      shadow: true,
      backgroundColor: 'rgba(22,50,92,1)',
      borderColor: 'rgba(22,50,92,1)',
      borderRadius: 2,
      style: {
        color: 'white'
      }
  },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: false
            },
            center: ['40%', '50%'],
            neckWidth: '30%',
            neckHeight: '0%',
            width: '50%'
        }
    },
      legend:{
   		 align: 'right',
    verticalAlign: 'top',
    floating: true,
    layout: 'vertical',
    x: 0,
    y: 100,
    margin: 1
  },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ],
        showInLegend: true
    }]
};

export default class FunnelChart extends Component {

render(){
    return(
    <div>
    <HighchartsReact
    highcharts={Highcharts}
    options={funnelChartOptions} />
    </div>);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

It's explained in Highmaps chart section of the documentation (github.com/highcharts/highcharts-react) by the example of the map module. As it says: // the same allpies to any other Highcharts module — Kamil Kulig

sathyanarayan sathyanarayan · Accepted Answer · 2019-11-12T06:52:40

import ReactHighcharts from 'react-highcharts';
import Funnel from 'highcharts/modules/funnel';
Funnel(ReactHighcharts.Highcharts);


let funnelData = {
    chart: {
        type: 'funnel'
    },
    title: {
        text: 'Sales funnel'
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b> ({point.y:,.0f})',
                softConnector: true
            },
            center: ['40%', '50%'],
            neckWidth: '30%',
            neckHeight: '25%',
            width: '80%'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                plotOptions: {
                    series: {
                        dataLabels: {
                            inside: true
                        },
                        center: ['50%', '50%'],
                        width: '100%'
                    }
                }
            }
        }]
    }}

render(){
     return(
      <ReactHighcharts config={funnelData} />
    )
}

Issue with creating a highchart funnel chart in react

1 Answers