Make bar chart out of multiples in array

[yjay]

Hello,

I am getting data from a database that I would like to use to make a bar chart.
The data looks like a single array of numbers:

Code: Select all

[1, 1, 2, 3, 2, 1]

.

I've tried making a bar chart but it is displaying each value as a separate bar but I would like the chart to have a bar for each number, for ex. a bar chart for all the 1, all the 2 and the 3. So the 1 bar would be the longest. Instead of bar for 1, a bar for 1, a bar for 2 etc.

Here is a codepen example of how the data is currently being displayed: https://codepen.io/yjacobs/pen/ExWoyeV

Thanks so muc!

[dominik.c]

Hello yjay!

We appreciate you reaching out to us!

I suggest splitting your data into several series in the load event. You also need to enable stacking and then the series will be displayed as you wanted.

API references:
https://api.highcharts.com/class-refere ... #addSeries
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/p ... r.stacking
https://api.highcharts.com/highcharts/series.bar.data.x
https://api.highcharts.com/highcharts/series.bar.data.y

Demo:
https://jsfiddle.net/BlackLabel/t5r698vf/

Best regards!

[yjay]

Thanks so much, this is very helpful!

I'm wondering how I can adapt it to use in vue?

I was able to set stacking but how can/where do I add multiple series? I've tried adding multiple data arrays but it is not stacking properly.

Here is codesandbox ex:https://codesandbox.io/s/thirsty-cache- ... rc/App.vue

Thanks again!

[dominik.c]

Hi again!

I'm afraid that you didn't fork the demo in the vue properly. I've entered this link but I cannot see any highcharts over there. Please reproduce this issue and I'll give it a look.

Best regards!

[yjay]

Thanks so much for your help!! After a bit of exploring and with the help of the info you sent, I was able to get it working.

Thanks again!

[yjay]

However I'm wondering if there is a way to make the bar size according to amount? Meaning, right now if I have one 6 in the array and two 1, the 6 bar is still longer than the two 1. But I would like the bar to grow according to how many of each number there are. So having two 1 would be longer than one 6.

[dominik.c]

Hi again!

Sorry for late reply!

I'm afraid that it's not easy to achieve without changing your data. The 6 is a bigger number than two times 1 so this point will be longer. You can change the six value to one after assigning it to a proper category of axis like that: https://jsfiddle.net/BlackLabel/uv0jceq2/

Best regards!

[yjay]

This worked, thanks so much for your help!!

[dominik.c]

You're welcome!

In case of any further questions, feel free to contact us again.