Bob_pretender
Posts: 3
Joined: Wed Sep 21, 2022 12:26 pm

Discrete states with bar chart

Will try to explain what I need to build, perhaps someone will advise me on the type of chart I should use for this purpose.
There is an array of elements that hold timestamp and value (one of the possible predefined states)
DiscreteMeasurement[] {
value: DiscreteState;
timeStamp: number;
}
This data should be displayed as a single bar chart, attached to this post. Have tried experimenting with stacked bar charts, but it is more about cumulative data, rather than the state in a specific moment of time. Have also tried the timeline chart, but it's more about placing some different events on the timeline. not type of data I have:
[{value: red, timeStamp: 100}, {value: red, timeStamp: 200}, {value: blue, timeStamp: 300}, {value: red, timeStamp: 400}, {value: green, timeStamp: 500}, {value: red, timeStamp: 600}, {value: red, timeStamp: 700}, {value: red, timeStamp: 800}, {value: blue, timeStamp: 900}]
Have even considered X-range series, but there should be 2 time values, and it's not what I need.
Image 3.png
Image 3.png (12.37 KiB) Viewed 261 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Discrete states with bar chart

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

To achieve the chart, which is similar to the one from the image, you attached I suggest doing it with an x-range chart type. As you mentioned, the point structure needs two dates, but I think it can be easily calculated with some extra JS code, before the chart initialization. Please, check the demo below to see an example using similar data to the one you have pasted in your post.

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

Let me know if that fits your requirement.
Regards!
Hubert Kozik
Highcharts Developer
Bob_pretender
Posts: 3
Joined: Wed Sep 21, 2022 12:26 pm

Re: Discrete states with bar chart

Hi Hubert , thank you so much for your assistance, will try to play with the x-range chart. At the moment have one question - is it possible not to have those white vertical lines between states?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Discrete states with bar chart

Bob_pretender,
All you need to set is series.borderWidth to 0.

Demo: https://jsfiddle.net/BlackLabel/8o4bsvr5/

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
Bob_pretender
Posts: 3
Joined: Wed Sep 21, 2022 12:26 pm

Re: Discrete states with bar chart

Have noticed that depending on the window width there are some random vertical lines, their position and amount change on window resize. Any idea why they appear and if it is possible to remove them?
Attachments
7.gif
7.gif (191.17 KiB) Viewed 213 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Discrete states with bar chart

Bob_pretender,

I was trying to reproduce your problem, but in my case, everything is working correctly. I have tested it on Mac and on Windows and there is no issue, like the one from your GIF. Could you reproduce the issue in an online editor that I could work on?

I am waiting for your response.
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”