Notes

The Chart notes provide a way to display metadata for series points or for a specific part of an axis.

Series Notes

To display additional information for series points, set the noteTextField of the series to a field from the data which contains the information.

Setup

The following example demonstrates how to display notes for specific points.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
        <kendo-chart-series>
            <kendo-chart-series-item type="line" [data]="data" field="value" noteTextField="extremum">
            </kendo-chart-series-item>
        </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
    public data: any =  [{ value: 2 }, { value: 4, extremum: "Max" }, { value: 3 }, { value: 1, extremum: "Min" }];
}

Appearance

To change the way the notes are displayed, use the series.notes options.

The following example demonstrates how to customize the appearance of the notes.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
        <kendo-chart-series>
            <kendo-chart-series-item type="line" [data]="data" field="value" noteTextField="extremum" [notes]="notes">
            </kendo-chart-series-item>
        </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
    public data: any =  [{ value: 2 }, { value: 4, extremum: "Max" }, { value: 3 }, { value: 1, extremum: "Min" }];
    public notes: any = {
        label: {
            position: 'outside'
        },
        line: {
            length: 20
        },
        icon: {
            type: 'square'
        },
        position: 'bottom'
    };
}

Axis Notes

To display additional information for a point of an axis, use the notes configuration of the axis. To specify the positions at which the notes will be displayed, use the data.value configuration. The value has to be a value on the axis or the index for category axis. To set the textual content of the notes, use the data.label.text option. Alternatively, set the notes.labels.content option to a function that returns the content of each note.

The following example demonstrates how to display notes for the axes.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [notes]="categoryNotes">
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>
        <kendo-chart-value-axis>
            <kendo-chart-value-axis-item [notes]="valueNotes">
            </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>
        <kendo-chart-series>
            <kendo-chart-series-item type="line" [data]="data" field="value">
            </kendo-chart-series-item>
        </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
    public data: any =  [{ value: 2 }, { value: 4 }, { value: 3 }, { value: 1 }];
    public categoryNotes: any = {
        data: [{
            value: 1,
            label: {
                text: "Max"
            }
        }, {
            value: 3,
            label: {
                text: "Min"
            }
        }]
    };

    public valueNotes: any = {
        data: [{
            value: 4,
            text: "Max"
        }, {
            value: 1,
            text: "Min"
        }],
        label: {
            content: (args: any) => args.dataItem.text
        }
    };
}

In this article