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

Flame chart in React

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: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Flame chart in React

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

Thank you for clarification!

I got it working now!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Flame chart in React

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

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: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Flame chart in React

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

Thanks for the quick reply Mateusz, that was it and it's working now for me!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Flame chart in React

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

Return to “Highcharts Usage”