React Highcharts Scroll Stacked Bar with Categories

[down]

Hi,
I'm trying to use the react highcharts library to create a chart with

• scrolling

• stacked bar

• categories

Because we want scrolling, we are using stockChart instead of chart as constructorType. This is erasing the categories that we are required to show on the lefthand side. Please find an example application here: https://stackblitz.com/edit/react-highc ... e=index.js

Thank you,
down_quark

[jakub.j]

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

Highcharts Stock does not support categories natively, but there is one workaround to it. You can have a categories array and simply use xAxis.labels.formatter to format the labels with the provided categories.

Please check out the demo I have prepared for you:
Demo: https://stackblitz.com/edit/react-highc ... e=index.js

Let me know if you have any further questions!
Best regards
Jakub

[down]

Hi Jakub,
Thank you so much! That worked for me. Thank you for the quick response.

I have a small follow up question regarding click events. I was configuring via chart.events but I'm not seeing the console.log statements: https://stackblitz.com/edit/react-highc ... e=index.js

[jakub.j]

Hey!
You're welcome.

When using chart.events.click as stated in the API, it will be fired only when clicking on the plot background, so you wouldn't see the console log when you click on e.g. the point, because it's above the plot background.

If you want to have a click event on the whole chart simply add your own onClick event:
Demo: https://stackblitz.com/edit/react-highc ... e=index.js

I hope you find it useful.
Best regards
Jakub

[down]

Hi Jakob,
We're having trouble with the categories in combination with a multi select that shows or hides different categories. Can you help?
I have recreated the behavior here:
https://stackblitz.com/edit/react-highs ... strap-grid
You can unselect some of the categories and the xAxis gets misaligned with the bars in the chart.

[jakub.j]

Hey!

The problem was that when you provide x data to every point and than you remove one point e.g. x=1, the second category will still be displayed so the misalignment is normal in this case. I removed all the x values from the points, also removed your xAxis.labels.formatter, if we are using categories, we don't need it, we can just display this.key in tooltip.formatter.

The crucial thing is that on the bottom of the recalc function I set xAxis categories with the filtered array of categories. Now when you remove one item from the multi select, the category is hidden and all the points are aligned.

Demo: https://stackblitz.com/edit/react-highs ... ntainer.js

For the future, please simplify the demo as much as possible before sending it to us, it took me some time to understand what was happening there and also the compilation was very slow.

Feel free to ask any further questions!
Best regards
Jakub