New to Kendo UI for jQuery? Start a free 30-day trial

CategoryAxis.notes.data

configuration

The items of the notes.

categoryAxis.notes.data

Array

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Q1", "Q2", "Q3", "Q4"],
    notes: {
      data: [
        { value: "Q1", text: "First Quarter" },
        { value: "Q3", text: "Third Quarter" }
      ]
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.notes.data.icon

Object

The icon of the note.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Q1", "Q2", "Q3", "Q4"],
    notes: {
      data: [
        { 
          value: "Q2",
          icon: {
            background: "orange",
            size: 18,
            type: "triangle",
            border: {
              color: "red",
              width: 2
            }
          }
        }
      ]
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.notes.data.label

Object

The label of the note.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          text: "Category Note",
          color: "red",
          font: "12px Arial"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.line

Object

The line of the note.

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

categoryAxis.notes.data.position

String

The position of the category 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.

Default: "inside"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Q1", "Q2", "Q3", "Q4"],
    notes: {
      data: [
        { 
          value: "Q2", 
          text: "Second Quarter",
          position: "top"
        }
      ]
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.notes.data.value

Object

The value of the note.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr"],
    notes: {
      data: [
        { value: "Feb", text: "Important month" }
      ]
    }
  },
  series: [
    { data: [10, 20, 30, 40] }
  ]
});
</script>

CategoryAxis.notes.data

categoryAxis.notes.data

categoryAxis.notes.data.icon

categoryAxis.notes.data.label

categoryAxis.notes.data.line

categoryAxis.notes.data.position

categoryAxis.notes.data.value

Related Members