CODEWITHSUNDEEP
angularkendo-ui
Zach Starnes
Zach Starnes

Reputation: 3198

KendoUI Charts custom formatting with visuals

I am trying to create a custom visual to display some formatted values. I am taking the text and formatting it, then creating and return a visual but the values are not changing or showing the new formatted values. Here is what I have:

valueAxis: {
  labels: {
    font: '12px Roboto',
    visual: (e: AxisLabelVisualArgs) => {
      const formattedValue = this.formatService.formatByMeasure(parseFloat(e.text), this.measure);
      e.text = formattedValue;
      return e.createVisual();
    }
  },
},

Am I doing something in the wrong order or missing a step?

Upvotes: 0

Views: 126

Answers (1)

Zach Starnes
Zach Starnes

Reputation: 3198

I was able to figure it out. So you need to use content instead of visual. That allows you to replace the label with a custom one so the below works:

valueAxis: {
  labels: {
    font: '12px Roboto',
    content: (e: AxisLabelVisualArgs) => {
      const formattedValue = this.formatService.formatByMeasure(e.value, this.measure);
      return formattedValue;
    }
  },
},

Upvotes: 2

Related Questions