advancedTechRaj
Posts: 3
Joined: Wed Mar 22, 2023 7:12 am

Bar Chart: Stacked, fixed border length with dashed line

Hey there,

I have been working on Highcharts since long and have been trying to build the below chart.
It's a Bar chart with individual label (x-axis) for each of the bars. I am not able to configure it in a way such that I have a fixed Bar for each x-axis, that has a fixed height and dashed border, in addition to the solid coloured bar.
Can I get a help on understanding as to how can I configure the same?

Thanks for your time! :D
Attachments
Screenshot 2023-03-22 at 1.14.12 PM.png
Screenshot 2023-03-22 at 1.14.12 PM.png (48.34 KiB) Viewed 294 times
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Bar Chart: Stacked, fixed border length with dashed line

Thank you for contacting us with your issue.

I prepared two different solutions for you:

#1 To add a new series with complementing data to the one in a previous series
Demo: https://jsfiddle.net/BlackLabel/ow3e4sda/

#2 To render an rectangle below the point using chart.SVGRenderer
Demo: https://jsfiddle.net/BlackLabel/c6y10gbt/

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

Best regards
Jakub
advancedTechRaj
Posts: 3
Joined: Wed Mar 22, 2023 7:12 am

Re: Bar Chart: Stacked, fixed border length with dashed line

Firstly, Thanks for these out of the box solutions!! I didn't think of it this way.
I approached it in a different manner though: https://jsfiddle.net/mqLcd65w/59/ Please let me know if this looks like a right approach? (Though, it has its own loopholes.)

Secondly, my requirements have changed a bit now as shown in the image below. AFAIK, the slant lines in the bar can be achieved with pattern fill (example: https://api.highcharts.com/class-refere ... ternObject). But while trying it in the solutions provided, it isn't actually adding any pattern.
Can you please help me with this?

Thanks a lot for your time!!
Attachments
Screenshot 2023-03-23 at 7.59.41 PM.png
Screenshot 2023-03-23 at 7.59.41 PM.png (26.13 KiB) Viewed 275 times
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Bar Chart: Stacked, fixed border length with dashed line

Hello,

It looks good. I think you can additionally link the contour series to the data series.

Yes, it can be done with the pattern fill as in the demo below.

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

I hope you will find it useful
Best regards!
Dawid Draguła
Highcharts Developer
advancedTechRaj
Posts: 3
Joined: Wed Mar 22, 2023 7:12 am

Re: Bar Chart: Stacked, fixed border length with dashed line

Yes, it does solves it. Thanks a lot @dawid.d :D
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Bar Chart: Stacked, fixed border length with dashed line

You're welcome!
In case of any further questions, feel free to contact us again.
Regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”