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

Notes

Updated on Mar 24, 2026

The Chart notes display metadata for series points or specific positions on an axis. Use notes to highlight data points, mark thresholds, or annotate values with contextual labels.

The following example demonstrates notes on series points, scatter data, and axis positions.

Change Theme

Theme

Loading ...

Setting Up Series Notes

To show notes on series points, set the noteTextField property of the series item to the name of a data field that contains the note text. The Chart renders a note marker and label for each point that has a value in that field.

html

<kendo-chart-series>
    <kendo-chart-series-item
        type="line"
        [data]="data"
        field="value"
        noteTextField="note"
    >
    </kendo-chart-series-item>
</kendo-chart-series>

The data array must include the note text for the relevant points:

typescript

public data = [
    { value: 2 },
    { value: 4, note: 'Max' },
    { value: 3 },
    { value: 1, note: 'Min' },
];

The following example demonstrates a line Chart with series notes.

Change Theme

Theme

Loading ...

For scatter and bubble series, use object data with named properties and set xField and yField on the series item. The array format ([x, y]) does not support noteTextField because the data points have no named fields.

html
<kendo-chart-series-item
    type="scatter"
    [data]="scatterData"
    xField="x"
    yField="y"
    noteTextField="note"
>
</kendo-chart-series-item>
ts
public scatterData = [
    { x: 1, y: 2 },
    { x: 2, y: 4, note: 'Max' },
    { x: 3, y: 3 },
    { x: 4, y: 1, note: 'Min' },
];

Setting Up Axis Notes

To display notes on a specific axis position, use the notes configuration of the axis item. The data array defines the axis values at which each note renders. For category axes, the value corresponds to the category index (zero-based). For value axes, it matches the numeric axis value.

For category axis notes, set the label text directly through the data.label.text property:

html

<kendo-chart-category-axis>
    <kendo-chart-category-axis-item [notes]="categoryNotes">
    </kendo-chart-category-axis-item>
</kendo-chart-category-axis>

typescript

public categoryNotes = {
    data: [
        { value: 1, label: { text: 'Max' } },
        { value: 3, label: { text: 'Min' } },
    ],
};

The following example demonstrates notes on both category and value axes.

Change Theme

Theme

Loading ...

For value axis notes, use the label.content callback to return custom label text:

html
<kendo-chart-value-axis>
    <kendo-chart-value-axis-item [notes]="valueNotes">
    </kendo-chart-value-axis-item>
</kendo-chart-value-axis>
typescript
public valueNotes = {
    data: [
        { value: 4, text: 'Max' },
        { value: 1, text: 'Min' },
    ],
    label: {
        content: (args) => args.dataItem.text,
    },
};

Customizing the Appearance

The notes appearance is controlled through the notes configuration object. The main customization areas are:

position—Controls the note placement relative to the data point. The supported values are top, bottom, left, and right.
icon—Configures the marker shape (type), size, and background color.
label—Sets the label position (inside or outside) and color.
line—Adjusts the connector line length, width, and color.

The following example demonstrates how to customize the notes appearance.

Change Theme

Theme

Loading ...

Rendering Custom Note Visuals

To replace the default note rendering with a custom shape, set the visual callback. The function receives a SeriesNoteVisualArgs object that provides the note rect, text, dataItem, and a createVisual method for the default rendering. Return a drawing.Element from the Kendo Drawing library.

The following example draws a custom badge shape with an arrow pointer for each note.

Change Theme

Theme

Loading ...

Notes

Setting Up Series Notes

Setting Up Axis Notes

Customizing the Appearance

Rendering Custom Note Visuals

Support and Learning Resources

Additional Resources