# Notes

The Chart notes display metadata for [series points](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesnotescomponent) or specific positions on an [axis](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxisnotescomponent). 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/notes/overview/source.txt)

## Setting Up Series Notes

To show notes on series points, set the [`noteTextField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/notes/source.txt)

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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxisnotescomponent) configuration of the axis item. The [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxisnotescomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/notes/axis-notes/source.txt)

For value axis notes, use the [`label.content`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/valueaxisnoteslabelcomponent#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: {
        // Return the data item's text as the value-axis note label.
        content: (args) => args.dataItem.text,
    },
};
```

## Customizing the Appearance

The notes appearance is controlled through the [`notes`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesnotescomponent) configuration object. The main customization areas are:

* [`position`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesnotescomponent#position)—Controls the note placement relative to the data point. The supported values are `top`, `bottom`, `left`, and `right`.
* [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesnotescomponent#icon)—Configures the marker shape (`type`), `size`, and `background` color.
* [`label`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesnotescomponent#label)—Sets the label `position` (`inside` or `outside`) and `color`.
* [`line`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesnotescomponent#line)—Adjusts the connector line `length`, `width`, and `color`.

The following example demonstrates how to customize the notes appearance.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/notes/configurator/source.txt)

## Rendering Custom Note Visuals

To replace the default note rendering with a custom shape, set the [`visual`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesnotescomponent#visual) callback. The function receives a [`SeriesNoteVisualArgs`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/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](https://www.telerik.com/kendo-angular-ui-develop/components/drawing).

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/notes/custom-visual/source.txt)

## Support and Learning Resources

* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [SeriesNotesComponent API](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesnotescomponent)
* [CategoryAxisNotesComponent API](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxisnotescomponent)
* [ValueAxisNotesComponent API](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/valueaxisnotescomponent)
* [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes)
* [Chart Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/chart-area)
* [Crosshairs](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs)
* [Error Bars](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars)
* [Labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels)
* [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/legend)
* [Panes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/panes)
* [Plot Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-area)
* [Plot Bands](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-bands)
* [Selection](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/selection)
* [Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series)
* [Title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/title)
* [Tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/tooltips)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)