Telerik UI for Windows 8 HTML

This article will introduce you to the common options of RadChart series. They are all members of the Telerik.Chart.Series class.

Common Options for Chart Series

  • border: The border settings for the series, represented by the internal _BorderConfiguration class. You can see a list of its members if you go to _BorderConfiguration. They allow you to modify the color, width and dash type of the series border. The border option is supported when series.type is set to "bar", "column", "donut", "pie", "bubble", "boxPlot", "candlestick" or "ohlc".

    Customizing the Border Copy imageCopy
    <div id="borderSettingChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
        series: [{
                border: {
                    dashType: 'longDashDotDot',
                    width: 1,
                    color: '#33ccff'
                },
                opacity:0.8,
                name: 'Example Series',
                type: 'column',
                data:[{
                    value: 40,
                    category: 'Apples'
                }, 
                {
                    value: 60,
                    category: 'Oranges'
                }]
        }]
    }">
    </div>

    With the above declaration, you will get a chart like this one:

    Customizing border
  • color: You can use it to assign the base color of the series.

  • colorField: Applicable for all series having a separate representation of each data point (column, bar, bubble, funnel, etc.). Points to a field in the data source containing a valid CSS color. This color will be applied to the current data point. Note that in such a case a single series will have many colors, so they will not be in sync with the single color per series, displayed in the chart legend.

  • data: Through this property you can assign an array of data points for the series.

    Setting Data Points Copy imageCopy
    <div id="colorSettingChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
        series: [{
            name: 'Example Series',
            type: 'pie',
            data:[{
                value: 40,
                category: 'Apples'
            },
            {
                value: 60,
                category: 'Oranges',
                color: '#ff6103'
            }]
        }]
    }">
    </div>
  • field: Represents the data field containing the series value. It is meaningful when you are binding the chart to a data source and you want to assign a certain field as a source of data points for the series.

  • groupNameTemplate: This is a name template for auto-generated series when binding to grouped data. The template variables are:

    • series: The series options.

    • group: The data group.

    • group.field: The name of the field used for grouping.

    • group.value: The field value for this group.

    The following example shows how to use a groupNameTemplate.

    Group Name Template Copy imageCopy
    var groupedChart = new Telerik.UI.RadChart(document.getElementById("groupSeriesChart"), {
        series: [{
            type: 'area',
            name: 'close',
            field: 'close',
            groupNameTemplate: '#= group.value # (#= series.name #)'
    
        }],
        dataSource: {
            data: [
                { date: new Date(30, 11, 2011), close: 405, volume: 6414369, open: 403.51, high: 406.28, low: 403.49, symbol: '2. AAPL' },
                { date: new Date(30, 10, 2011), close: 382.2, volume: 14464710, open: 381.29, high: 382.276, low: 378.3, symbol: '2. AAPL' },
                { date: new Date(31, 4, 2011), close: 196.69, volume: 3405698, open: 195.94, high: 198.44, low: 195.03, symbol: '3. AMZN' },
                { date: new Date(28, 1, 2011), close: 173.29, volume: 6781774, open: 173.91, high: 175.89, low: 172.15, symbol: '3. AMZN' }
            ],
            group: {
                field: 'symbol'
            },
    
            sort: {
                field: 'date',
                dir: 'asc'
            }
        },
        legend: {
            position: 'bottom'
        },
        valueAxis: {
            labels: {
                format: '${0}',
                skip: 2,
                step: 2
            }
        },
        categoryAxis: {
            field: 'date',
            labels: {
                format: 'MMM'
            }
        }
    });
    
    Group name template
  • labels: The settings for the series labels. They are represented by the internal _LabelConfiguration class. You can see a list of its members if you go to _LabelConfiguration. They allow you to modify the styling or the entire look (through a template) of the labels.

    Setting Labels Copy imageCopy
    <div id="labelsChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
        series: [{
                name: 'Example Series',
                type: 'column',
                data:[{
                    value: 40,
                    category: 'Apples'
                }, 
                {
                    value: 60,
                    category: 'Oranges'
                }],
                labels: {
                    visible: true,
                    color: 'blue',
                    template: 'Count: #=value#'
            }
        }]
    }">
    </div>

    The image below shows the resulting chart.

    Showing labels
  • name: Represents the series name that will be displayed in the legend.

  • opacity: You can assign a value between 0 (transparent) and 1 to control the opacity of the series. The default value is 1.

  • stack: A value indicating if the series should be stacked. To stack two series, set their stack property to the same string value. You can combine series in more than one stack.

  • tooltip: If you allow it, a tooltip will show when you hover over the series. By default, a tooltip contains the series value, but you could modify its content through a template. This is achieved using the tooltip settings for the series. They are represented by the internal _TooltipConfiguration class. You can see a list of its members if you go to _TooltipConfiguration. They allow you to modify the styling or the entire look (through a template) of the tooltips.

    Setting a Tooltip Copy imageCopy
    <div id="tooltipChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
        series:[{
            name: 'Example Series',
            type: 'column',
            data:[{
                value: 40,
                category: 'Apples'
            }, 
            {
                value: 60,
                category: 'Oranges'
            }],
            tooltip: {
                visible: true,
                template: 'Name: #=dataItem.category# <br/> Count: #=value#'
            },
        }]
    }">
    </div>

    The image below shows the resulting tooltip.

    Customizing tooltips
  • type: Use this property to get or set the type of the series you are currently working with. The default value is 'column'.

  • visibleInLegend: A Boolean property that indicates whether or not the series will be shown in the legend.

Combining Series

There are series types that you can combine together to visualize related information. There are however some limitations related to the nature of the series, that you should have in mind:

  • You cannot combine one type of XY-series with another. You can only have multiple series from the same type in one chart.

  • You cannot combine radial series together or with another type of series.

  • You cannot combine bar and column series in one chart. To visualize multiple categorical fields, you can use bar or column series together with line or area series.