How to customize the dashStyles for series data

[SankeerthanaS]

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]

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!

[SankeerthanaS]

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]

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!