Kendo UI chart control -- changing format of y-axis labels

Question

I am using Chart control in Kendo. I want to change the color and format of the negative values in my valueAxis. If it's a negative value, I want to: change the font color to RED and show the format as e.g. "(-1234)"

Below is my snippet but its not working

valueAxis: [{
    name: "value",
    labels: {
        //format: '{0:###,###,###,###}'
        template: "#= (Value < 0 ? '<span style=\\'color:red\\'>(':'') + kendo.toString(Math.abs(value),'\\#\\#\\#,\\#\\#\\#.00') + (value < 0 ? ')</span>':'')"
    }
}],

How can I achieve that? thank you for your help.

Answer 1

You are trying to use HTML spans within an SVG rendered chart. Instead use the visual property of the valueAxis to render SVG text:

valueAxis: {
    labels: {
        visual: function(e) {
          var center = e.rect.center();
          var fillCol = e.value < 0 ? "red" : e.options.color;
          var text = e.value < 0 ? "(" + e.text + ")" : e.text;
          return new kendo.drawing.Text(text, e.rect.origin, {
            fill: {
              color: fillCol
            }
          })
        }
    },
},

DEMO