Series Configuration
This help article lists all the inner tags and properties of the RadHtmlChart Series collections and illustrates how to configure them.
RadHtmlChart provides a rich set of properties which can help you configure the look and behavior of the defined RadHtmlChart Series. In this article you will find a list with the available Series inner tags and public properties.
You can add the series to the Main tag > PlotArea > Series tag. The series have many common properties and some specific properties according to the series type. To create Series Items programmatically, you must use the respective class for each series type.
AreaSeries, BarSeries, ColumnSeries, LineSeries, RadarAreaSeries, RadarColumnSeries and RadarLineSeries use the CategorySeriesItem class.
BoxPlotSeries use the BoxPlotSeriesItem class.
BubbleSeries use the BubbleSeriesItem class.
BulletSeries and VerticalBulletSeries use the BulletSeriesItem class.
CandlestickSeries use the CandlestickSeriesItem class.
DonutSeries and PieSeries use the PieSeriesItem class.
FunnelSeries use the FunnelSeriesItem class.
PolarAreaSeries, PolarLineSeries and PolarScatterSeries use the PolarSeriesItem class.
RangeBarSeries and RangeColumnSeries use the RangeSeriesItem class.
ScatterSeries and ScatterLineSeries use the ScatterSeriesItem class.
WaterfallSeries and HorizontalWaterfallSeries use the WaterfallSeriesItem class.
In order to access the properties of the series in the code-behind, you must cast the series to the respective series type (e.g., (RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems[0].Y = 10;).
More information on the series properties is available below.
Attribute Properties of the Series
| Name | Description |
|---|---|
| AxisName | Specifies the Name of the y-axis that will be used by the series. Applicable when multiple y-axes are used. Uses the default YAxis if left blank. |
| ColorField | The field of the data source that will be used for the Color of the items in the series. |
| DataAngleField | The field of the data source that will be used for the Angle value for PolarAreaSeries , PolarLineSeries and PolarScatterSeries. |
| DataCurrentField | The field of the data source that will be used for the actual value of an item from a BulletSeries and VerticalBulletSeries. |
| DataDownColorField | The field of the data source that will be used for the Down color—the Background color of the filled items (Open > Close) in the CandlestickSeries . |
| DataFieldSize | The field of the data source that will be used for the Size value for BubbleSeries . |
| DataFieldTooltip | The field of the data source that will be used for the default tooltip of the BubbleSeries items by default. |
| DataFieldX | The field of the data source that will be used for the X value for ScatterSeries , ScatterLineSeries and BubbleSeries. |
| DataFieldY | The field of the data source that will be used for the Y value. |
| DataFromField | The field of the data source that will be used for the From value of RangeBarSeries and RangeColumnSeries . |
| DataCloseField | The field of the data source that will be used for the Close price of the CandlestickSeries . |
| DataHighField | The field of the data source that will be used for the High price of the CandlestickSeries . |
| DataLowField | The field of the data source that will be used for the Low price of the CandlestickSeries. |
| DataLowerField | The field of the data source that will be used for the lower value of BoxPlotSeries . |
| DataMeanField | The field of the data source that will be used for the value of the mean of BoxPlotSeries . |
| DataMedianField | The field of the data source that will be used for the value of the median (i.e., the second quartile) of BoxPlotSeries. |
| DataNameField | The field of the data source that will be used for the Name of the FunnelSeries items which will be shown in the legend. |
| DataSummaryField | The field of the data source that will be used for the Summary value of WaterfallSeries and HorizontalWaterfallSeries. |
| DataTargetField | The field of the data source that will be used for the target value of an item from a BulletSeries and VerticalBulletSeries. |
| DataToField | The field of the data source that will be used for the To value of RangeBarSeries and RangeColumnSeries. |
| DataOpenField | The field of the data source that will be used for the Open price of the CandlestickSeries . |
| DataOutliersField | The field of the data source that will be used for the outliers values of BoxPlotSeries . It is important to note that the DataOutliersField property must refer a data source field that contains an array of decimal numbers. |
| DataQ1Field | The field of the data source that will be used for the value of the first quartile of BoxPlotSeries. |
| DataQ3Field | The field of the data source that will be used for the value of the third quartile of BoxPlotSeries. |
| DataRadiusField | The field of the data source that will be used for the Radius value for PolarAreaSeries , PolarLineSeries and PolarScatterSeries . |
| DataUpperField | The field of the data source that will be used for the upper value of BoxPlotSeries . |
| DataVisibleInLegendField | The field of the data source that will be used for the visibility of the FunnelSeries, PieSeries and DonutSeries items name in the legend. |
| DownColor | The background color of the filled items from the CandlestickSeries having their Close price lower than the Open one. Can take a common color name or a hex value. If it is not set explicitly, the control will pick one according to the skin it has set. |
| DynamicHeightEnabled | A boolean property that indicates whether all the segments from FunnelSeries will share the same size (when DynamicHeightEnabled =" false ") or the height of each segment is determined according to its value (when DynamicHeightEnabled =" true "). Default value is True . |
| DynamicSlopeEnabled | A boolean property that indicates whether the form of each segment from FunnelSeries will be based on the ratio between the value from the current and the next segment. Default value is False . |
| ExplodeField | The field of the data source that indicates whether the PieSeries or DonutSeries item will be exploded (separated from the rest). Boolean value; expects true or false . |
| Gap | Gets or Sets the distance between the category clusters as proportion of the series width. For versions prior to R1 2019, the value of the property cannot be negative. |
| GroupName | A string value indicating that the BarSeries or ColumnSeries should be stacked in a group with the specified name. If the property is left blank, all series will be placed in one default stack. Setting the GroupName property of any series automatically sets the Stacked property of the first series to true, so it is not required to be explicitly set. |
| HoleSize | An integer property that controls the diameter of the hole in DonutSeries. |
| MissingValues | Defines how missing ( null / Nothing ) values are treated by the LineSeries and ScatterLineSeries . It is an enumeration (Telerik.Web.UI.HtmlChart.MissingValuesBehavior) with one of the following values: Gap , Interpolate , Zero . Gap leaves a blank space (the series interrupts there); Interpolate adds a point interpolated from the adjacent values; Zero adds a point with value set to zero. |
| Name | The name of the series that will be shown in the legend. For PieSeries and DonutSeries , the Name of each item is shown in the legend instead of the name of the series |
| NameField | The field of the data source that will be used for the Name of the PieSeries and DonutSeries items that will be shown in the legend. |
| NeckRatio | Specifies the ratio between the top and the bottom bases of the whole Funnel series. The property is neglected if DynamicSlopeEnabled property is set to true . |
| SegmentSpacing | Specifies the space between the different segments of the Funnel chart in pixels. |
| Spacing | Gets or Sets the space between the chart series as proportion of the series width. For versions prior to R1 2019, the value of the property cannot be negative. |
| Stacked | Determines whether the BarSeries or ColumnSeries in the chart will be stacked next to/above each other. You must set this property for the first series of the chart to have effect.Setting this property is not required if the Series are stacked and grouped through the GroupName property.You may also need to adjust the maximum value of the y-axis to acoomodate the addition of all the series one row if Min / Max are hardcoded for it. |
| StartAngle | The starting angle for the first PieSeries / DonutSeries item. The zero point is horizontal to the left and the positive direction is clockwise. |
| Visible | A boolean property that indicates whether the series will be visible in the PlotArea . For Donut , Pie and Funnel series the property must be set on the items. |
| VisibleInLegend | A boolean property that indicates whether the series name will be visible in the Legend . For Donut , Pie and Funnel series the property must be set on the items. |
| ZIndex | A numeric property that indicates the order of the series. |
Attribute Properties in [SeriesType] > Appearance > FillStyle
| Name | Description |
|---|---|
| BackgroundColor | The background color of the items from this series. This property can take a common color name or a hex value. If it you have not set ths property explicitly, the control will pick one according to the skin it has set. |
Attribute Properties in [SeriesType] > Appearance > Overlay
| Name | Description |
|---|---|
| Gradient | The series overlay gradient that takes the following values listed in List 1 |
List 1: Values for the Gradient property.
- None
- Glass - Bar , Column , RangeBar , RangeColumn , Candlestick and BoxPlot series specific.
- RoundedBevel - Pie and donut series specific.
- SharpBevel - Pie and donut series specific.
Attribute Properties in [SeriesType] > HighlightAppearance
| Name | Description |
|---|---|
| Toggle | A function that can be used to handle toggling the points highlight. The available argument fields can be seen here. |
| Visible | If set to true the chart will highlight the series when the user hovers it with the mouse. By default chart series highlighting is enabled. . |
| Visual | A function that can be used to set custom visual for the point highlight. |
Attribute Properties in [SeriesType] > LabelsAppearance
| Name | Description |
|---|---|
| Color | The text color of the labels for the items from this series. Can take a common color name or a hex value. If it is not set explicitly the control will pick one according to the Skin it has set. |
| BackgroundColor | The background color of the labels for the items from this series. Can take a common color name or a hex value. |
| ClientTemplate | A string for the client template that will be applied to the labels when they render. It can use any column from the data source given to the chart through the following syntax: #=dataItem.ColumnName# where the string delimited inside #=.....# is the expression to be evaluated. See here for more information. |
| DataField | The field of the data source that will be used for the value of the labels for the items. Defaults to the numerical value for the Y value. Consider using a ClientTemplate to get formatting and ordering as desired, especially for non-numerical fields. |
| DataFormatString | The format string that will form the label text. Supported for numerical DataFields only. You can use a ClientTemplate to get formatting and ordering as desired. For AreaSeries , BarSeries , ColumnSeries , DonutSeries , FunnelSeries , LineSeries , PieSeries , RadarAreaSeries , RadarColumnSeries , RadarLineSeries , WaterfallSeries and HorizontalWaterfallSeries use the {0} placeholder that denote the Y value of the item; for ScatterSeries and ScatterLineSeries use the {0} and {1} placeholders that denote the X and Y values of the item; for PolarAreaSeries , PolarLineSeries and PolarScatterSeries use the {0} and {1} placeholders that denote accordingly the Angle and Radius values of the item; for BubbleSeries use the {0} , {1} , {2} and {3} placeholders that denote accordingly the X , Y , Size and Tooltip values of the item. The Series labels in BoxPlotSeries and CandlestickSeries are not supported. |
| Position | Defines the position of the labels relative to their items. More details about the values used to define it are listed in List 2. |
| RotationAngle | The angle at which the labels are rotated. |
| Visible | Defines whether the labels will be shown. Values are True or False . |
List 2: Available values for the Position property.
-
For BarSeries , ColumnSeries , WaterfallSeries and HorizontalWaterfallSeries - The Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition enumeration:
- Center - The label is positioned at the bar center.
- InsideEnd - The label is positioned inside, near the end of the bar.
- InsideBase - The label is positioned inside, near the base of the bar.
- OutsideEnd - The label is positioned outside, near the end of the bar.Not applicable for stacked series
-
For PieSeries and DonutSeries - The Telerik.Web.UI.HtmlChart.PieAndDonutLabelsPosition enumeration:
- Center - The labels are positioned at the center of the pie/donut.
- InsideEnd - The labels are positioned inside, near the end of the pie/donut.
- OutsideEnd - The labels are positioned outside, near the end of the pie/donut.
-
For LineSeries , ScatterSeries and ScatterLineSeries - The Telerik.Web.UI.HtmlChart.LineAndScatterLabelsPosition enumeration:
- Above - The label is positioned at the top.
- Right - The label is positioned at the right.
- Below - The label is positioned at the bottom.
- Left - The label is positioned at the left.
Attribute Properties in [RangeColumnSeries/RangeBarSeries] > LabelsAppearance > FromLabelsAppearance / ToLabelsAppearance
Inherits the LabelsAppearance class.
Attribute Properties in [SeriesType] > LabelsAppearance > TextStyle
See this article for more information on the text styles.
| Name | Description |
|---|---|
| Bold | Specifies whether the font of the labels' text is bold. Values are True or False . |
| Color | Specifies the color of the labels' text. Uses values of type System.Drawing.Color . |
| FontFamily | Specifies the font family of the labels' text. Takes a string with the font family name. |
| FontSize | Specifies the font size of the labels' text. Takes the size in pixels. |
| Italic | Specifies whether the font of the labels' text is italic. Values are True or False . |
| Margin | Specifies the margin of the labels' text. Takes the margin value in pixels. The Position property in [SeriesType] > Appearance > LabelsAppearance should not be set to Center in order for this setting to take effect. |
| Padding | Specifies the padding of the labels' text. Takes the padding value in pixels. The Position property in [SeriesType] > Appearance > LabelsAppearance should not be set to Center in order for this setting to take effect. |
Attribute Properties in [SeriesType] > LabelsAppearance > Border
| Name | Description |
|---|---|
| Color | The color of the label borders for the series' items. Can take a common color name or a hex value. |
| DashType | Sets the dash type of the label's border. An enumeration (Telerik.Web.UI.HtmlChart.Enums.DashType) with the following values: Dash , DashDot , Dot , LongDash, LongDashDot, LongDashDotDot, Solid . |
| Width | The width of the border for the series' labels. Takes the width in pixels. |
Attribute Properties in [SeriesType] > TooltipsAppearance
| Name | Description |
|---|---|
| BackgroundColor | The background color of the tooltips for the items from this series. Can take a common color name or a hex value. If it is not set explicitly, the control will pick one according to the skin it has set. |
| Color | The text color of the tooltips for the items from this series. Can take a common color name or a hex value. If it is not set explicitly the control will pick one according to the Skin it has set. |
| ClientTemplate | A string for the client template that will be applied to the tooltips when they render. It can use any column from the data source given to the chart through the following syntax: #=dataItem.ColumnName# where the string delimited inside #=.....# is the expression to be evaluated. The tooltips are HTML so HTML can be used outside of the expression tags. See here for more information. |
| DataFormatString | The format string that will form the tooltip's text. You can find more details about defining the value in List 3. |
| Visible | Defines whether the tooltips will be shown. Values are True or False . |
List 3: Values for the DataFormatString property.
AreaSeries , BarSeries , ColumnSeries , DonutSeries , FunnelSeries , LineSeries , PieSeries , RadarAreaSeries , RadarColumnSeries , RadarLineSeries , WaterfallSeries and HorizontalWaterfallSeries use the {0} placeholder that denote the Y value of the item.
BulletSeries and VerticalBulletSeries use the {0} and {1} placeholders that denote the Current and Target values of the item.
ScatterSeries and ScatterLineSeries use the {0} and {1} placeholders that denote the X and Y values of the item.
PolarAreaSeries , PolarLineSeries and PolarScatterSeries use the {0} and {1} placeholders that denote accordingly the Angle and Radius values of the item.
BubbleSeries use the {0} , {1} , {2} and {3} placeholders that denote accordingly the X , Y , Size and tooltip values of the item.
CandlestickSeries tooltips have a predefined pattern by design, they can be modified through {0} , {1} , {2} , {3} and {4} placeholders that denote accordingly the Open , High , Low , Close and the corresponding x-axis item's value.
BoxPlotSeries tooltips have already predefined pattern by design, however, it can be modified through {0} , {1} , {2} , {3} , {4} , {5} and {6} placeholders that denote accordingly the Lower , Q1 , Median , Q3 , Upper , Mean and the corresponding x-axis item's value.|
Attribute Properties in [AreaSeries, LineSeries, PolarAreaSeries, PolarLineSeries, RadarAreaSeries, RadarLineSeries and ScatterLineSeries] > LineAppearance
Attribute Properties in [BubbleSeries, BarSeries, ColumnSeries, DonutSeries, PieSeries, CandlestickSeries, BoxPlotSeries, VerticalBoxPlotSeries, WaterfallSeries, HorizontalWaterfallSeries, RangeBarSeries, RangeColumnSeries and RadarColumnSeries] > BorderAppearance
| Name | Description |
|---|---|
| Color | The color of the outliers' borders for the items from this series. Can take a common color name or a hex value. If this property is not set explicitly, the control will inherit the color of Series itself. |
| DashType | Sets the dash type of the border. An enumeration (Telerik.Web.UI.HtmlChart.Enums.DashType) with the following values: Dash , DashDot , Dot , LongDash, LongDashDot, LongDashDotDot, Solid . |
| Opacity | The opacity of the border. By default the border is opaque. |
| Width | The width of the border for the series. Takes the width in pixels. |
Attribute Properties in [AreaSeries, LineSeries, PolarAreaSeries, PolarLineSeries, RadarAreaSeries, RadarLineSeries and ScatterLineSeries] > LineAppearance
| Name | Description |
|---|---|
| Width | The width of the line for the series. Takes the width in pixels. |
| LineStyle | A string property that takes the following values: Normal—data points from series will be connected with straight lines; Smooth—Data points from series will be connected with fitted curves; Step—Data points from series will be connected with lines that have right angle. Note that the Step property is available only for AreaSeries and LineSeries. |
| DashType | Sets the dash type of the line. An enumeration (Telerik.Web.UI.HtmlChart.Enums.DashType) with the following values: Dash , DashDot , Dot , LongDash, LongDashDot, LongDashDotDot, Solid . |
Attribute Properties in [AreaSeries, LineSeries, ScatterSeries and ScatterLineSeries] > MarkersAppearance
| Name | Description |
|---|---|
| BackgroundColor | The background color of the markers for the items from this series. Can take a common color name or a hex value. If this property is not set explicitly, the control will pick one according to the skin it has set. |
| BorderColor | The color of the markers' borders for the items from this series. Can take a common color name or a hex value. If it this property is not set explicitly, the control will inherit the color of series itself. |
| BorderWidth | The width of the markers' borders for the items from this series. Takes the width in pixels. |
| MarkersType | Sets the type of markers the series uses. An enumeration (Telerik.Web.UI.HtmlChart.MarkersType) with the following values: Circle , Cross , Square , Triangle . |
| Size | Specifies the size of the markers the series uses. Takes the size in pixels. |
| Visible | Defines whether the markers will be shown. Values are True or False . |
Attribute Properties in [BoxPlotSeries] > [OutliersAppearance, ExtremesAppearance]
| Name | Description |
|---|---|
| BackgroundColor | The background color of the outliers for the items from this series. Can take a common color name or a hex value. If this property is not set explicitly, the control will pick one according to the skin it has set. |
| MarkersType | Chooses the shape of the outliers the series uses. An enumeration (Telerik.Web.UI.HtmlChart.OutliersMarkersType) with the following values: Circle , Cross , Square and Triangle . |
| RotationAngle | The angle at which the outliers are rotated. |
| Size | Specifies the size of the outliers the series uses. Takes the size in pixels. |
| Visible | Defines whether the outliers will be shown. True or false. |
Attribute Properties in [BoxPlotSeries] > [OutliersAppearance, ExtremesAppearance] > [BorderAppearance]
| Name | Description |
|---|---|
| Color | The color of the outliers' borders for the items from this series. Can take a common color name or a hex value. If this property is not set explicitly, the control will inherit the color of Series itself. |
| Width | The width of the outliers' borders for the items from this series. Takes the width in pixels. |