Telerik UI for Windows 8 HTML

Similar to axes notes, from Q2 2013, RadChart features series notes. They allow you to display notes for the data points rendered by the series. The notes can be customized using the numerous properties exposed by the RadChart control.

Configuring Notes

A note can be displayed for each data point in a series. Note text is taken from the chart datasource. To enable notes, you need to set the noteTextField property of the series to field from the assigned datasource that contains the notes. If for a given data point, there is no value in the corresponding data record, a note is not displayed. The properties exposed for customizing series notes, through the series.notes and seriesDefaults.notes properties, are listed below.

  • position: Specifies the position of the series note. Accepted values are: "top", "bottom", "left", and "right".

  • icon: Settings icon which appears around the note label. These settings include:

    • background: Background color for the note. Any valid CSS color is accepted.

    • border: Border settings for the note. Settings include color, width and dashType. dashType accepts the following values: "solid", "dot", "dash", "longDash", "dashDot", "longDashDot", "longDashDotDot".

    • size: A numeric value specifying the size of the icon.

    • type: Specifies the shape of the icon rendered for the current note. Accepted values are: "circle", "square", and "triangle".

    • visible: A Boolean value that determines the visibility of the note icon. If set to false, only the note label and the line connecting the label to the series will be visible.

  • line: The series note line settings. They include color, length, and width.

  • label: The note label settings. They include:

    • background: The label background color. any valid CSS color is accepted.

    • border: The label border settings. They include color, width and dashType. dashType accepts the following values: "solid", "dot", "dash", "longDash", "dashDot", "longDashDot", "longDashDotDot".

    • color: The label text color. Any valid CSS color is accepted.

    • font: Allows you to specify the font for the label. Since this will be used as a CSS style, to be able to apply it, you need to specify both font size and type, e.g. "12pt Segoe UI".

    • template: The template which renders the labels. The field that can be used in the template is value which is the current data point value.

    • visible: A Boolean property that controls the label visibility.

  • visible: A Boolean property that controls the visibility of the entire note.

Note

All properties listed above can be defined:

  • For all notes belonging to the current series—inside the series.notes object.

  • For all notes belonging to all chart series—inside the seriesDefaults.notes object.

The example below shows a RadChart with notes field defined and some custom setting applied.

Notes Example Copy imageCopy
<div id="chartWithNotes" data-win-control="Telerik.UI.RadChart" data-win-options="{
    dataSource: {
        data: 
            [
                { Year: '2008', Value: 8.7 },
                { Year: '2009', Value: 5.5, Note: 'Financial crisis' },
                { Year: '2010', Value: 4.5 },
                { Year: '2011', Value: 4.8 },
                { Year: '2012', Value: 10, Note: 'Best sales to date' },
                { Year: '2013', Value: 9.3 }
            ]
    },
    series: [{
        type: 'line',
        name: 'Product Sales',
        field: 'Value',
        noteTextField: 'Note',
        notes: {
            icon: {
                type: 'square',
                border: {
                    color: 'pink'
                },
                background: 'pink'
            },
            line: {
                color: 'pink',
                length: 30
            },
            label: {
                color: 'gray'
            },
            position: 'top'
        }
    }
    ],
    categoryAxis: {
        field: 'Year'
    },
    width: 600,
    height: 350,
    theme: 'light'
}">
</div>

The result from the above code snippet is shown in the following image.

chart-series-notes

See Also

Other Resources