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.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const seriesData = [{ value: 2 }, { value: 4, extremum: "Max" }, { value: 3 }, { value: 1, extremum: "Min" }];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="line" data={seriesData} field="value" noteTextField="extremum" />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

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.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const seriesData = [{ value: 2 }, { value: 4, extremum: "Max" }, { value: 3 }, { value: 1, extremum: "Min" }];
const notes = {
    label: {
        position: 'outside'
    },
    line: {
        length: 20
    },
    icon: {
        type: 'square'
    },
    position: 'bottom'
};

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="line" data={seriesData} field="value" noteTextField="extremum" notes={notes} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

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.

import {
    Chart,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartValueAxis,
    ChartValueAxisItem,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const seriesData =  [{ value: 2 }, { value: 4 }, { value: 3 }, { value: 1 }];
const categoryNotes = {
    data: [{
        value: 1,
        label: {
            text: "Max"
        }
    }, {
        value: 3,
        label: {
            text: "Min"
        }
    }]
};
const valueNotes = {
    data: [{
        value: 4,
        text: "Max"
    }, {
        value: 1,
        text: "Min"
    }],
    label: {
        content: (args) => args.dataItem.text
    }
};

const ChartContainer = () => (
    <Chart>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem notes={categoryNotes} />
        </ChartCategoryAxis>
        <ChartValueAxis>
            <ChartValueAxisItem notes={valueNotes} />
        </ChartValueAxis>
        <ChartSeries>
            <ChartSeriesItem type="line" data={seriesData} field="value" />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);
 /