Segment : borderColor behaviour is not correct

[ArkeshGKalathiya]

Expected behavior

It should mark each line segment with alternate color

Current behavior

Colors are not applied properly to line segment

Reproducible sample

https://codepen.io/arkesh486855/pen/qBYYjJa

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

latest

Browser name and version

No response

Link to your project

No response

[raji2004]

Can I be assigned this issue?

[pakprogramer786]

Hi, If you are looking for change the line segment color base on the label. so you can use.

...
segment: {
        borderColor: (ctx) => (ctx.chart.data.labels[ctx.p0DataIndex])
      }
...

[ArkeshGKalathiya]

@pakprogramer786

Thanks for the response, Let me change name of the labels, as it's confusing. I don't want to change color based on the label, but based on the return of borderColor function.

[etimberg]

I see the line segments changing colour when I open the reproduce above

[ArkeshGKalathiya]

@etimberg

But it does not include repeating color second time, which is "red", let me refactor the codepen to simplify it further

EDIT : CodePen is updated now,

[etimberg]

I see red twice in the pen

[ArkeshGKalathiya]

@etimberg

Mine shows differently, but I am testing this in "Safari", that might be the issue too. Because in "Brave" and "Chrome" it works just fine.

[LeeLenaleee]

Which version of safari and macos are you using, tested this on safari on a iphone 11 and it works fine

[ArkeshGKalathiya]

[kurkle]

Just to confirm (that Safari is the new IE):

And Chrome on same Mac:

[ArkeshGKalathiya]

Yes

[LeeLenaleee]

Can't test this since I dont have a mac, but just out of curiosity, does normal patern is A - B - C, linked picture it only shows A - B - C - C - B. If you add more entries on the x axis does it keep mirroring so it will give this pattern: A - B - C - C - B - A - A - B - C - C - B - A?

[ArkeshGKalathiya]

[kurkle]

Interestingly, changing the "red" to "maroon" makes the change work:

So I think this is a safari optimization bug, where it thinks blue === red and does not bother updating the context.

[ArkeshGKalathiya]

Yes, providing different color works, but one thing is if we provide second red color as a rgb value, it still has issue, but if we provide it with some opacity it works.

…

On Tue, 4 Oct 2022 at 12:29 AM, Jukka Kurkela ***@***.***> wrote: Interestingly, changing the "red" to "maroon" makes the change work: [image: image] <https://user-images.githubusercontent.com/27971921/193734287-6032f298-4692-49f5-81c3-60ad15444604.png> So I think this is a safari optimization bug, where it thinks blue === red and does not bother updating the context. — Reply to this email directly, view it on GitHub <#10736 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG3NEEX3ME4EIEMSEIXWKEDWBOXB7ANCNFSM6AAAAAAQ2VMW2Y> . You are receiving this because you authored the thread.Message ID: ***@***.***>