belomor123
Posts: 11
Joined: Fri Jul 03, 2020 12:11 am

Flame chart in React

Thu Mar 18, 2021 5:04 pm

Hi,
I am trying to set up a Flame chart in react but it is giving me #17 error.
I have tried importing a chart type like so:

Code: Select all

import HighchartsFlame from 'highcharts/modules/flame'
but there is no such module named 'flame', is it under a different name or is it even implemented?

Here is the current code I have for this:

Code: Select all

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

const chartOptions = {
        boost: {
            enabled: true,
            useGPUTranslations: true,
        },
        plotOptions: {
            turboThreshold: 1000,
        },
        xAxis: [{
            visible: false
        }, {
            visible: false,
            startOnTick: false,
            endOnTick: false,
            minPadding: 0,
            maxPadding: 0
        }],
        yAxis: [{
            visible: false
        }, {
            visible: false,
            min: 0,
            maxPadding: 0,
            startOnTick: false,
            endOnTick: false
        }],
        series: [{
            type: 'flame',
            data: cycles,
            yAxis: 1,
            xAxis: 1
        }]
        // }, projLine]
    }

   return (
  <div>
  	<HighchartsReact options={chartOptions} highcharts={Highcharts} />
  </div>
  )
Thank you in advance!!! You guys have developed a great product and I love using it

User avatar
sebastian.h
Posts: 1706
Joined: Fri Aug 07, 2020 7:08 am

Re: Flame chart in React

Fri Mar 19, 2021 3:24 pm

Hi,
Welcome to our forum and thanks for contacting us with your question!

There is no such module, the flame module is made of other modules, try to loads modules highcharts-more.js and sunburst.js.

Referencions:
https://code.highcharts.com/highcharts-more.js
https://code.highcharts.com/modules/sunburst.js
The Highcharts flame chart implementation is based on inverted chart with columnrange series (for the flame and icicle layouts) and a sunburst series (for the sunburst layout).

Let me know if that was what you were looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer

belomor123
Posts: 11
Joined: Fri Jul 03, 2020 12:11 am

Re: Flame chart in React

Fri Mar 19, 2021 4:27 pm

Thank you for clarification!

I got it working now!

User avatar
sebastian.h
Posts: 1706
Joined: Fri Aug 07, 2020 7:08 am

Re: Flame chart in React

Mon Mar 22, 2021 1:49 pm

You're welcome!
In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer

jeroen
Posts: 8
Joined: Tue Feb 16, 2021 8:00 am

Re: Flame chart in React

Wed Jan 19, 2022 3:33 pm

Hi all,

I have the same error:
Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=flame
- missingModuleFor: flame

However I'm already loading the modules with the code below, am I doing anything wrong?

Code: Select all

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsSunburst from "highcharts/modules/sunburst";
import HighchartsMore from 'highcharts/highcharts-more';

HighchartsSunburst(Highcharts);
HighchartsMore(Highcharts);

I only have this problem with the flame chart. I am already successfully using the sunburst chart (and others, such as gantt). On those pages, the loading of modules works fine. I'm using Highcharts version 9.3.2, and Highcharts React version 3.1.0.

Best regards,
Jeroen

mateusz.b
Posts: 1878
Joined: Tue Jul 13, 2021 11:34 am

Re: Flame chart in React

Wed Jan 19, 2022 3:58 pm

Hi jeroen,

Thanks for contacting us with your question.

I have just created a demo with a flame chart in React: https://stackblitz.com/edit/react-wnay3j?file=index.js
Everything seems to be working fine. I think you might have forgotten to add a plugin with new series type:

Code: Select all

(function (H) {
    H.seriesType('flame', 'columnrange', {
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '{point.name}',
            inside: true,
            align: 'center',
            crop: true,
            overflow: 'none',
            color: 'black',
            style: {
                textOutline: 'none',
                fontWeight: 'normal'
            }
        },
        point: {
            events: {
                click: function () {
                    var point = this,
                        chart = point.series.chart,
                        series = point.series,
                        xAxis = series.xAxis,
                        yAxis = series.yAxis;

                    xAxis.setExtremes(xAxis.min, point.x, false);
                    yAxis.setExtremes(point.low, point.high, false);

                    chart.showResetZoom();
                    chart.redraw();
                }
            }
        },
        pointPadding: 0,
        groupPadding: 0
    }, {
        drawDataLabels: H.seriesTypes.line.prototype.drawDataLabels
    });
}(Highcharts));
More about plugins you can read here:
https://www.highcharts.com/docs/extendi ... highcharts

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer

jeroen
Posts: 8
Joined: Tue Feb 16, 2021 8:00 am

Re: Flame chart in React

Thu Jan 20, 2022 8:44 am

Thanks for the quick reply Mateusz, that was it and it's working now for me!

mateusz.b
Posts: 1878
Joined: Tue Jul 13, 2021 11:34 am

Re: Flame chart in React

Thu Jan 20, 2022 10:58 am

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”