Notes
The Telerik UI Chart enables you to display the metadata of a point or a specific part of the axis.
Getting Started
The following example demonstrates how to add a note for each series point.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Line(new object[] {
new {
value = 1,
noteText = "min"
},
new {
value = 2,
},
new {
value = 3,
noteText = "max"
}
})
.Field("value")
.NoteTextField("noteText")
)
)
<kendo-chart name="chart">
<series-defaults type="ChartSeriesType.Line" />
<series>
<series-item data='new object[] {
new {value = 1, noteText = "min"},
new {value = 2},
new {value = 3,noteText = "max"}
}'>
<notes position="ChartNotePosition.Bottom">
<chart-series-notes-label position="ChartNoteLabelPosition.Outside">
</chart-series-notes-label>
</notes>
</series-item>
</series>
</kendo-chart>
Using Templates
To provide better flexibility, define the content of the notes through a template.
The template provides access to all information that is associated with the point:
-
value—The point value. Value dimensions are available as properties, for example,value.xandvalue.y. -
category—The category name. -
series—The data series. - (When binding to a data source)
dataItem—The original data item.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Line(new object[] {
new {
value = 1,
noteText = "min"
},
new {
value = 2,
},
new {
value = 3,
noteText = "max"
}
})
.Field("value")
.NoteTextField("noteText")
.Notes(n => n
.Label(l => l
.Position(ChartNoteLabelPosition.Outside)
.Template("#= dataItem.noteText # of the series")
))
)
)
<kendo-chart name="chart">
<series-defaults type="ChartSeriesType.Line" />
<series>
<series-item data='new object[] {
new {value = 1, noteText = "min"},
new { value = 2},
new {value = 3,noteText = "max"}
}'>
<notes position="ChartNotePosition.Bottom">
<chart-series-notes-label position="ChartNoteLabelPosition.Outside"
template="#= dataItem.noteText # of the series">
</chart-series-notes-label>
</notes>
</series-item>
</series>
</kendo-chart>