bipinmv
Posts: 7
Joined: Tue Jan 25, 2022 8:04 am

Histogram zone color and bin width issue

Hello,
My requirement is to show 3 zones with multiple bins in each zone.
Zone values are.
0 - 2.5 : Light
2.5 - 3.5: Medium
>3.5: Heavy

Here is the fiddle link for your reference https://jsfiddle.net/BipinMV/s5xvyL1k/42/

The issue is, Light and few Medium points are grouped together and plotted in a single bin.
And also Medium bin contains points which are greater than 3.5
How can I plot it in separate bins with corresponding colors for each bin
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Histogram zone color and bin width issue

Hi bipinmv,

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

In this case you should use either binsNumber or binWidth option.
Demo: https://jsfiddle.net/BlackLabel/ptd4rvyo/,
https://jsfiddle.net/BlackLabel/op5mkuxd/

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
bipinmv
Posts: 7
Joined: Tue Jan 25, 2022 8:04 am

Re: Histogram zone color and bin width issue

Thanks for the response Mateuzs,

Here the value "2.6" has been grouped to Light category. But actually I wanted to plot it in the Medium category as the zone limit is 2.5.
How can I achieve that
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Histogram zone color and bin width issue

Hi bipinmv,

You could increase binsNubmer to 30. Both options that I metioned before help in this case, you just need to adjust them to meet your requirements.
Demo: https://jsfiddle.net/BlackLabel/2ucy8rf9/

Feel free to ask any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
bipinmv
Posts: 7
Joined: Tue Jan 25, 2022 8:04 am

Re: Histogram zone color and bin width issue

Hi Mateuzs,

Our requirement is to plot the dynamic data into bins and color them based on the condition (if they belong to light, medium or heavy). In the example given, the 4th bin is actually in the range of 2.5-2.8 which basically overlaps between the light and medium zones (light = 0-2.5 and heavy = 2.6-3.5). This looks confusing as the colors of the bin doesn't actually respect the range which the color suggests

Is there a way to avoid this overlap so that the 4th bin will be in the range of 2.6-2.8
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Histogram zone color and bin width issue

Hi bipinmv,

The thing is that each point (in this case column) can have only one color and belong to only one zone. Because your zone values are float numbers, you need to either adjust number of bins so that it fits your scenario, or bin width. Default bins are calculated automatically based on selected zones and data granularity. In conclusion, there is no "silver bullet" that would cover all scenarios, and you need to use mentioned options to adjust bins, either by increasing number of them or their width. You can try using binWidth: 0.5 because your zones seem to start and finish every x.5 value.
Demo:https://jsfiddle.net/BlackLabel/m32c1qdv/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”