kendo-uikendo-chart

Kendo UI Charts - Diplay text instead of value in yAxis labels

Is there any way to display a label other than the value in the Value Axis in Kendo Chart?

What I want is the right image's labels instead of the left one's (the original).

enter image description here

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="chart"></div>
<script>

// these are the labels I want to replace for the number values.
const yAxisLabels = ["A", "B", "C", "D", "E"];

$("#chart").kendoChart({
  series: [
    {
      type: "line",
      data: [2, 3, 4]
    }
  ],
  valueAxis: {
    min: 1,
    max: 5,
    majorUnit: 1
  }
});
</script>
</body>
</html>

Solution

  • There is - templates are what you are looking for. However, from your question there is no way to help with exactly how to accomplish what you want since there is no code/or explanation of where your alternate values come from. That said, the following is one way to customize those labels.

    Dojo example: https://dojo.telerik.com/OsuWirih

    <div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "scatter",
      data: [ [1, 2] ]
    }
  ],
  yAxis: {
    labels: {
      template: "X: #: value #"
    }
  }
});
</script>

    More info here: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/yaxis.labels#yaxislabelstemplate

    EDIT:

    From your comment, I'm still not sure what is driving the A,B,C to replace values. Here is one way to accomplish it if the underlying values line up with the A, B, C... labels you want:

    <script>
let dict = {0:'A',0.5:'B',1:'C',1.5:'D',2:'E',2.5:'F'};
$("#chart").kendoChart({
  series: [
    {
      type: "scatter",
      data: [ [1, 2] ]
    }
  ],
  yAxis: {
    labels: {
      template: "#: dict[value] #"
    }
  }
});
</script>

    and in a dojo: https://dojo.telerik.com/EpElOFAy/2