Telerik UI for Windows 8 HTML

This help article will introduce you to the properties exposed by the RadChart control and describe their usage. In the related help articles you will find more information about setting the different objects in the chart control.

Binding RadChart to Data

To bind RadChart to data, you can use its dataSource property for data that is accessible to all chart components. To see detailed information about the binding options of RadChart, check this article: Data Binding.

Axis Settings

To configure the axes in RadChart, you can access and modify the following properties of the control:

  • axisDefaults: This property lets you set common properties for all axes in the chart, instead of setting them for each axis individually. For a list of these properties, see the Axis API reference article.

  • The following list represents all axis types and their settings in RadChart. For detailed information and samples on chart axes, go to Chart Axes.

    • categoryAxis: the category axis settings object.

    • valueAxes: the array of all value axis defined for the chart.

    • valueAxis: the value axis settings object.

    • xAxes: the array of all X axes defined for the chart.

    • xAxis: tthe X-axis settings when a XY-chart type is used.

    • yAxes: the array of all Y axes defined for the chart.

    • yAxis: the Y-axis settings when a XY-chart type is used.

Series Settings

The settings for RadChart related to chart series are listed below. For more detailed information, see the Series section of the RadChart documentation.

  • series: Used to get or set the chart data series.

    For detailed information on the common series properties, check this article: Common Configuration.

    To get acquainted with the different types of series and their configuration options, check each type's dedicated topic, under the Series section of the documentation.

  • seriesColors: Use this property to provide an array of valid CSS color definitions which will be used to color the chart series. Note that a single color will be applied to all visual representations of data points (bar, columns, etc.) in a single series. If you have only one series defined, without grouping, only one of the listed colors will be applied. To provide a different color for each data point, use a data source specifying a valid color in each of its data records and use the colorField property of the series.

  • seriesDefaults: This property lets you set common properties for all series in the chart, instead of setting them for each one individually. For a list of these properties, see Common Configuration.

Chart Tooltip

The chart tooltip can be displayed when the user hovers a series in the RadChart control. Use a chart tooltip to display more information about the current data point. Configure it through the tooltip property. For configuration guidelines regarding the tooltip feature, go to: Tooltip.

Chart Legend

The legend is used to display what information the series represent in the chart. To configure the legend's appearance, you can access and modify the legend set of options in the chart instance. The legend and its configuration options are described here: Chart Legend.

Appearance Settings

The following properties control the way the chart appears to the user. Most of them are styling options exposed through properties of the control for ease of use.

  • title: Represents the title settings of the chart. There are numerous properties exposed here that allow you to customize the title. They are listed in the API reference under _TitleConfiguration.

  • background: Use it to change the background of the chart area. Any valid CSS color is accepted.

  • border: The border settings for the chart. They are represented by the internal _BorderConfiguration class. You can see a list of its members in the API reference under _BorderConfiguration. They allow you to modify the color, width and dash type of the series border.

  • height: Used to set the height of the chart area in pixels.

  • margin: Gives you access to the margin settings of the chart area. They include top, right, bottom and left properties.

  • plotArea: The plot area settings. These include background, border and margin. The border and margin settings are of the same type as those of the chart itself.

  • theme: Use it to explicitly specify whether the chart should use a 'light' or 'dark' theme.

  • width: Used to set the width of the chart area in pixels.

  • transitions: Enables or disables transitions. The default value of this property is true.