SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


Hi, I want to color the axis label by its value,

value < 0 -> show red color
value = 0 -> show gray color
value > 0 -> show green color

similar to this question, but in javascript platform, it seems the LabelProvider has function related to the value(string) formatting only. Is there any ways to styling the label? Thanks!

  • Andrew Burnett-Thompson
    Very good question. Let me ask the team and revert back to you. May I ask *why* ? what is the use-case
  • chinghung lai
    hi andrew, for example, the X axis is the date. When I enter a new month or a new year, we hope that the label can change color, so that users can more easily notice that it is a new month or a new year.
  • You must to post comments

Hi there,

I’ve spoken to the Javascript team and they tell me you can override LabelProvider.getLabelTexture() to achieve a custom style per label.

Try this:

 // Override in LabelProvider
 public getLabelTexture(labelText: string, textureManager: TextureManager, labelStyle: TTextStyle) {
    const num = parseFloat(labelText);
    const customStyle: TTextStyle = num < 0 ? { color: "red", ...labelStyle } : { color: "green", ...labelStyle };
    return textureManager.createTextTexture([labelText], customStyle, this.rotationProperty);

We have some documentation on Custom Label Providers including images for axis labels here. This may be helpful

Let me know if that helps!

Best regards,

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.