Page 1 of 1

Flame chart in React

Posted: Thu Mar 18, 2021 5:04 pm
by belomor123
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

Re: Flame chart in React

Posted: Fri Mar 19, 2021 3:24 pm
by sebastian.h
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.

Re: Flame chart in React

Posted: Fri Mar 19, 2021 4:27 pm
by belomor123
Thank you for clarification!

I got it working now!

Re: Flame chart in React

Posted: Mon Mar 22, 2021 1:49 pm
by sebastian.h
You're welcome!
In case of any further questions, feel free to contact us again.

Re: Flame chart in React

Posted: Wed Jan 19, 2022 3:33 pm
by jeroen
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

Re: Flame chart in React

Posted: Wed Jan 19, 2022 3:58 pm
by mateusz.b
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!

Re: Flame chart in React

Posted: Thu Jan 20, 2022 8:44 am
by jeroen
Thanks for the quick reply Mateusz, that was it and it's working now for me!

Re: Flame chart in React

Posted: Thu Jan 20, 2022 10:58 am
by mateusz.b
You're welcome! In case of any further questions, feel free to contact us again.