StockChart hover and navigator marker colors do not match custom visual marker styles

1 Answer 8 Views
Charts General Discussions
Ling
Top achievements
Rank 1
Iron
Ling asked on 29 May 2025, 01:47 AM

Hello Kendo UI Team,

I'm using the Kendo React StockChart component and I have two related questions regarding hover behavior and color consistency between the main chart and the navigator (mini chart):

  1. Hover color mismatch:
    When I hover over a data point, the marker uses a custom stroke color. However, the hover effect (like the highlight) does not match this stroke color.
       Is there a way to make the hover color consistent with the marker’s stroke color?

  2. Navigator highlight inconsistency:
    When I click on a data point in the main chart, the corresponding point in the navigator becomes highlighted, but its color doesn't match the marker’s color either (it uses the default series color).
      Can we customize the highlight color in the navigator to match the main chart marker color as well?

For reference, I use a visual function to customize the markers with stroke colors dynamically based on the data item. The chart works fine visually, but the hover/highlight styles are inconsistent.

Let me know if this behavior is expected or if there's a recommended way to fully align the hover and highlight colors with custom marker styles.

Thanks!

Frsqz1ns (duplicated) - StackBlitz

1 Answer, 1 is accepted

Sort by
0
Filip
Telerik team
answered on 30 May 2025, 03:18 PM

Hello, Ling,

Thank you for the provided runnable example. 

I was able to resolve the color issue by changing the missing check to only treat null/undefined as missing (so zeros on the yellow series aren’t flagged red) and then applying that single isMissing test across the marker, you can review the updated example here:

https://stackblitz.com/edit/react-pl2aaoes-qmaptbfm?file=app%2Fapp.tsx

As for the highlight issue I was not able to observe it in the example. Can you please verify if you encounter the same issue in the modified example above? Let me know and I will gladly assist further.

Regards,
Filip
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Charts General Discussions
Asked by
Ling
Top achievements
Rank 1
Iron
Answers by
Filip
Telerik team
Share this question
or