Telerik UI for Windows 8 HTML

From Q3 2013, RadChart adds up the possibility to add notes to your category or value axes. The notes feature is highly customizable using the multiple configuration options available.

Configuring Notes

Notes can be displayed for any axis. To list the notes that you want to display for an axis, use the axis.notes.data property. The

  • value: The axis value for which the note should be displayed. If you want to display notes for the category axis, specify the index of the category (0-based) at which the note should appear.

  • position: Specifies the position of the axis 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 icon. If set to false, only the note label and the line connecting the label to the axis will be visible.

  • line: The axis 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 axis 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, except for value and label.text, can be defined:

  • Separately for each note—inside each object in the axis.notes.data array.

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

  • For all notes belonging to all chart axes—inside the axisDefaults.notes object.

The following example shows a RadChart with two value axes. Each axis has notes defined. Properties that are common for all notes are defined using the axisDefaults.notes property. The properties specific to each axis notes' are assigned to the axis.notes property.

Notes Example Copy imageCopy
<div id="chartWithNotes" data-win-control="Telerik.UI.RadChart" data-win-options="{
    legend: {
        position: 'bottom'
    },
    series: [{
        name: 'Temperature',
        data: [20, 27 , 32],
        axis: 'temperature',
        color: '#1E98E4'
    }, {
        name: 'Humidity',
        data: [65, 78, 60],
        axis: 'humidity',
        color: '#f99'
    }
    ],
    seriesDefaults: {
        type: 'area'
    },
    categoryAxis: {
        categories: ['May', 'Jun', 'Jul'],
        axisCrossingValue: [0, 3]
    },
    axisDefaults: {
        notes: {
            line: {
                color: 'lightgray',
                length: 30
            },
            icon: {
                visible: false
            },
            label: {
                font: '12pt Segoe UI',
                color: 'orange'
            }
        }
    },
    valueAxis: [{
        name: 'temperature',
        notes: {
            data: [
                {
                    value: 5, 
                    label: {
                        text: 'Cold'
                    }
                },{
                    value: 18, 
                    label: {
                        text: 'Warm'
                    }
                },{
                    value: 30, 
                    label: {
                        text: 'Hot'
                    }
                }
            ],
            position: 'left'
        }
        }, 
        {
        name:'humidity',
        notes: {
            data: [
                {
                    value: 45, 
                    label: {
                        text: 'Dry'
                    }
                },{
                    value: 70, 
                    label: {
                        text: 'Humid'
                    }
                }
            ],
            position: 'right'
        }
    }],
    width: 600,
    height: 350,
    theme: 'light'
}">
</div>

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

chart-axes-notes

See Also

Other Resources