New to Kendo UI for jQueryStart a free 30-day trial

The items of the notes.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    notes: {
      data: [{
        value: 2,
        text: "First note"
      }, {
        value: 4,
        text: "Second note"
      }]
    }
  }],
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

The icon of the note.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    notes: {
      data: [{
        value: 3,
        text: "Custom icon",
        icon: {
          background: "blue",
          size: 25,
          type: "square"
        }
      }]
    }
  }],
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

The label of the note.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    notes: {
      data: [{
        value: 3,
        text: "Styled label",
        label: {
          background: "lightgreen",
          color: "darkgreen",
          font: "bold 12px Arial"
        }
      }]
    }
  }],
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

The line of the note.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    notes: {
      data: [{
        value: 3,
        text: "Custom line",
        line: {
          color: "red",
          width: 4,
          dashType: "dot"
        }
      }]
    }
  }],
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

The position of the value axis note.

  • "top" - The note is positioned on the top.
  • "bottom" - The note is positioned on the bottom.
  • "left" - The note is positioned on the left.
  • "right" - The note is positioned on the right.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    notes: {
      data: [{
        value: 3,
        text: "Right positioned",
        position: "right"
      }]
    }
  }],
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

The value of the note.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    notes: {
      data: [{
        value: 3.5,
        text: "Value at 3.5"
      }]
    }
  }],
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>