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

Flame chart - different heights on xAxis

Hi all,

I want to make a flame chart with different heights of the bars on the x-axis. Please see the following images. Is this possible? It is not an option to duplicate the data elements (e.g. the "root" element in the example) since the dataset for the graph will be huge, and the amounts of duplicates will explode.

Current situation:
current-situation.png
current-situation.png (4.15 KiB) Viewed 248 times
Desired situation:
desired-situation.png
desired-situation.png (4.34 KiB) Viewed 248 times
jsfiddle
See the following jsfiddle for a basic example of the current situation:
https://jsfiddle.net/h4yot13L/

Best regards,
Jeroen
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Flame chart - different heights on xAxis

Hi jeroen,

Thanks for contacting us with your question.

Unfortunately it is not possible. Column range data format allows you to specify x, low, high values and it is not possible to set x range. There are two workarounds that you might want to try:
- create another flame series and adjust column width with pointRange and pointPlacemen options:
Demo: https://jsfiddle.net/BlackLabel/npbjex84/

- use polygon series to draw a rect:
Demo: https://jsfiddle.net/BlackLabel/sydbw2m4/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
jeroen
Posts: 8
Joined: Tue Feb 16, 2021 8:00 am

Re: Flame chart - different heights on xAxis

Thanks for the quick reply!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Flame chart - different heights on xAxis

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

Return to “Highcharts Usage”