jhonatangalves
Posts: 2
Joined: Wed Dec 07, 2022 3:43 pm

How can I set a background color from a timespan?

I have a dashboard where each series relates to a modal and the space that each series occupies in the graph is according to the timespan defined when creating the modal, that is, the modal event started 2022-12-02 22:10:00 and its start, in timespan, is 1670029800, and the end of this event was 2022-12-06 15:23:00 and its end, in timespan, is 1670350980. That is, through these values start: 1670029800 and end: 1670350980, the width of the series on the chart is defined.

Each series carries an isRealtime property, I want to put a bar over the series that has this value as false, the bar would only take the width of that series.

Is there any way to do this with some highcharts property?

Sample image: https://ibb.co/mF1H9HN
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: How can I set a background color from a timespan?

Hi!

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

I'm not sure If I understood you well.
In your dashboard, are you trying to add multiple separate charts where one of them will be a bar chart that occupies 100% width of a time frame?

Let's take this simple xrange series as a base (one bar between start and end date): https://jsfiddle.net/BlackLabel/d0Lzmsgw/
Is this what you're trying to achieve? Or you want to keep the bar only and get rid of all other chart's elements? Like this: https://jsfiddle.net/BlackLabel/kayzL0ub/

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
jhonatangalves
Posts: 2
Joined: Wed Dec 07, 2022 3:43 pm

Re: How can I set a background color from a timespan?

Thanks for the answer!

That would be right, in my dashboard I have a timeline that occupies the entire space of the dashboard according to the defined timespan, and there is another chart (it would be the bars in blue in the image, each bar is a series). I wanted my timeline to gain a background color for each series on the chart below, that is, my timeline occupies the entire space and I wanted a part of it to have a background color according to the width of the series below.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: How can I set a background color from a timespan?

Hi,

Highcharts doesn't provide it by default from API, but you can achieve this by adding additional xAxis and yAxis, manipulating their height and top position and assigning an xrange series to it.

To add multiple bars, you can add multiple axes/series. To split your bar into 2 colors, you can use partialFill, or, if you need more colors, you can use multiple separate xrange series assigned to the same axes with the same y (and control their width by setting x and x2 range in data).

Demo: https://jsfiddle.net/BlackLabel/6n7ukt82/

Let me know if yo have any questions about used properties.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”