Series Notes
The Series Notes functionality of RadHtmlChart can be used as of R2 2022.
The Series Notes enables you to display the metadata of series points.
The Series Notes functionality is not supported in Donut, Pie, Funnel, Polar, Radar and BoxPlot series.
Test the Series Notes feature in our SeriesNotes live demo. You can try various NotesAppearance customizations via the Demo Configuration Panel.
Getting Started
To display additional information for series points, set the DataNoteTextField property of the series to a field from the data which contains the information.
You can customize the look of the Notes element through the series NotesAppearance inner tag. Each Series Note consist of a Label, Icon and a Line. The appearance of all three parts can be customized via the corresponding nested tag.
Sample declaration of LineSeries with customized NotesAppearance:
<telerik:LineSeries Name="Wins" DataFieldY="Win" DataNoteTextField="Extremum">
<NotesAppearance Position="Bottom">
<Icon Type="Circle" Size="8">
<Border Width="1" />
</Icon>
<Label Position="Outside"></Label>
<Line DashType="Solid" Length="10" Width="1" />
</NotesAppearance>
</telerik:LineSeries>
A complete list of the properties exposed by the NoteAppearance object and its embedded objects (Icon, Label, Line) you can find in the following server-side API resources:
NotesAppearance - Telerik.Web.UI.HtmlChart.PlotArea.NotesAppearance
Icon - Telerik.Web.UI.HtmlChart.PlotArea.Appearance.NoteIconAppearance
Line - Telerik.Web.UI.HtmlChart.PlotArea.Appearance.NoteLineAppearance
Label - Telerik.Web.UI.HtmlChart.PlotArea.Appearance.NoteLabelAppearance
Sample declaration of customized NotesAppearance:
<NotesAppearance Position="Left">
<Line Width="2" Color="#7d7d7d" Length="10" DashType="Solid" />
<Icon BackgroundColor="#7d7d7d" Type="Circle" Size="20" Visible="true">
<Border Color="#3f3f3f" Width="3px" />
</Icon>
<Label Color="Red" Position="Outside" DataFormatString="{0} USD" RotationAngle="15" Visible="true" BackgroundColor="Green">
<Border Color="Yellow" Width="3" DashType="Dash" />
<TextStyle Bold="true" Italic="true" FontFamily="SansSerif" FontSize="18" />
</Label>
</NotesAppearance>