Customized kendo chart bar value axis

[Benjamin]

I would like to customise the value axis for Kendo chart to something similar to the image

dojo link

[Nikolay]

Hello Benjamin,

You can achieve the desired by manually defining the value axis majorUnit, min, and max. Then force the Chart to generate ticks that include 25, 50, and 75 by explicitly setting the axis scale in the labels.visual function and change the label text:

valueAxis: {
  min: 0,                    // Minimum value on the value axis
  max: 100,                  // Maximum value on the value axis
  majorUnit: 25,             // Axis ticks will appear at every 25 units: 0, 25, 50, 75, 100
  labels: {
    visual: function (e) {
      var targets = [25, 50, 75, 100]; // Values at which we want to show custom labels
      var tolerance = 0.01;            // Tolerance to account for floating-point precision

      // Loop through each target value
      for (var i = 0; i < targets.length; i++) {
        // Check if current label value is close to any of the target values
        if (Math.abs(e.value - targets[i]) < tolerance) {
          
          // Customize label for value 25
          if (e.text == 25) {
            return new kendo.drawing.Text("Limited", e.rect.origin, {
              fill: { color: "black" },
              font: "12px Arial"
            });
          }

          // Customize label for value 50
          if (e.text == 50) {
            return new kendo.drawing.Text("Fair", e.rect.origin, {
              fill: { color: "black" },
              font: "12px Arial"
            });
          }

          // Customize label for value 75
          if (e.text == 75) {
            return new kendo.drawing.Text("Good", e.rect.origin, {
              fill: { color: "black" },
              font: "12px Arial"
            });
          }

          // Customize label for value 100
          if (e.text == 100) {
            return new kendo.drawing.Text("Excelent", e.rect.origin, {
              fill: { color: "black" },
              font: "12px Arial"
            });
          }
        }
      }

      return null; // Skip rendering labels for all other values
    }
  }
}

Dojo demo: https://dojo.telerik.com/CMMrkNJU

Regards,

Nikolay
Progress Telerik