SankeerthanaS
Posts: 8
Joined: Mon Sep 11, 2023 8:00 am

How to customize the dashStyles for series data

Hi Team,

I need to use some dashStyles for series data which are not pre-defined styles. For eg. I need to have dot-rounded _dash-dot and dot-dot-rounded dash-dot-dot for series curve

Can you able to let us know whether this is possible in Highcharts?

Thanks,
jedrzej.r
Posts: 695
Joined: Tue Jan 24, 2023 11:21 am

Re: How to customize the dashStyles for series data

Hi!

Thanks for reaching out to us with your inquiry!

In order to do so, you can wrap the method responsible for setting dash-style and add new ones, customized for your needs. As for having rounded dash, you can always set stroke-linecap property to round.

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

References:
https://developer.mozilla.org/en-US/doc ... ke-linecap
https://www.highcharts.com/docs/extendi ... highcharts

Let me know if you have any further questions!
Best regards!
Jędrzej Ruta
Highcharts Developer
SankeerthanaS
Posts: 8
Joined: Mon Sep 11, 2023 8:00 am

Re: How to customize the dashStyles for series data

Hi,

Thanks for the reply!

For rounded dash it worked. But I tried to create my own custom style like ShortRoundedDashDot and ShortRoundedDashDot similar to "shortdashdotdot" "shortdashdot" but in rounded dash style.
Can you help me out in this ?
Thanks in advance.
jedrzej.r
Posts: 695
Joined: Tue Jan 24, 2023 11:21 am

Re: How to customize the dashStyles for series data

Of course!

As you can see, the dash-array values don't have to change as long as the "round" phrase is added into the name. What might be confusing is that the rounded linecaps happen to render slightly wider when compared to native Highcharts stroke-linecap used.

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

Take a look at this MDN example, where you'll see how different linecap setting affects the stroke display: https://developer.mozilla.org/en-US/doc ... ap#example

In case of any other questions, feel free to reach out to us anytime!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”