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

XAxis.notes.icon

configuration

The icon of the notes.

xAxis.notes.icon

Object

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

xAxis.notes.icon.background

String

The background color of the notes icon.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "scatter",
      data: [[1, 2], [2, 3]]
    }],
    xAxis: {
      notes: {
        icon: {
          background: "red"
        },
        data: [{ value: 1.3 }]
      }
    }
  });
</script>

xAxis.notes.icon.border

Object

The border of the icon.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "scatter",
      data: [[1, 2], [2, 3]]
    }],
    xAxis: {
      notes: {
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        },
        data: [{ value: 1.3 }]
      }
    }
  });
</script>

xAxis.notes.icon.size

Number

The size of the icon.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "scatter",
      data: [[1, 2], [2, 3]]
    }],
    xAxis: {
      notes: {
        icon: {
          size: 15
        },
        data: [{ value: 1.3 }]
      }
    }
  });
</script>

xAxis.notes.icon.type

String

The icon shape.

The supported values are:

"circle" - the marker shape is circle.
"square" - the marker shape is square.
"triangle" - the marker shape is triangle.
"cross" - the marker shape is cross.

Default: "circle"

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "scatter",
      data: [[1, 2], [2, 3]]
    }],
    xAxis: {
      notes: {
        icon: {
          type: "triangle"
        },
        data: [{ value: 1.3 }]
      }
    }
  });
</script>

xAxis.notes.icon.visible

Boolean

The icon visibility.

Default: "true"

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "scatter",
      data: [[1, 2], [2, 3]]
    }],
    xAxis: {
      notes: {
        icon: {
          visible: false
        },
        data: [{ value: 1.3 }]
      }
    }
  });
</script>