I need help to draw chart

[rupesh811]

Hello friends ,
I need to draw chart . Is it possible to draw this chart using highcharts ?
I attached image of chart .
Please suggest something .

[jakub.j]

Thanks for contacting us with your question!

You can achieve this by drawing column series, and yAxis.plotBands.

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

Let me know if that was what you were looking for!
Best regards
Jakub

[rupesh811]

Thank you very much for your valuable response

This code is very helpful for me .
Its amazing !

Thank you .

[rupesh811]

Hello ,
I have one query about grid line . I want to show grid line outside like image . Can you tell me how I achieve this ?


Thank you .

[jakub.j]

Hey!

I've drawn custom gridLines using Highcharts.SVGRenderer. To set the gridLines color, change gridLinesColor variable value.

Demo: https://jsfiddle.net/BlackLabel/3vfqk2gu/

Feel free to ask any further questions!
Best regards
Jakub

[rupesh811]

Thank you for your quick response ,
I found one thing here in full screen mode grid lines are showing outside of chart not showing inside chart .
Please tell me how I solve this?

Thank you

[jakub.j]

Hey!

I modified the grid lines for the fullscreen mode, see:
Demo: https://jsfiddle.net/BlackLabel/7q2o8za3/

Let me know if you have any other questions!
Kind regards
Jakub

[rupesh811]

Thank you for your cooperation ,

I checked but sometimes in full screen mode grid line show accurate but some times in full screen mode grid lines show very big . Means length of grid line is big and grid line crosses values like 0 % to 100% .
Grid lines crosses values .
If I check in full screen mode again and again then this thing I found .
Can you tell me how can I fix length of grid lines .So grid lines not cross values on y axis .

Thank you.

[jakub.j]

Hey!

I added different yAxis configurations for full screen and default, you can try to play with them and also with the offset in line 55 so that the chart behaves as desired on full screen.

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

I hope you will find it useful
Best regards
Jakub

[rupesh811]

Hello ,
Thank you for your response .
Same thing happen like in full screen mode some time it is working and some time it is not working .
Means length of grid lines are big and grid line crosses values like 0 % to 100% .
I tried on mozila firefox and google chrome browser . I thought browser issue but same thing happen on both browser.
I don't know why grid lines crosses values and some times show big .
I attached two screen shot . So you can understand what is problem.
I also don't know while full screen mode 2 results show .


Thank you.

[jakub.j]

Hey!

I've added fullScreenGridLineWidth variable in the 2nd line so that you can control the width by yourself. Currently it is set to 0.02, if it's still too much for your screen, please reduce this value and check out how does it look for you.

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

I hope you find it useful.
Regards!
Jakub

[rupesh811]

Thank you very much for your help .
Highcharts forum is very helpful .

Thank you.