Telerik UI for Windows 8 HTML

Pie series visualize data as arc segments on a radial coordinate system. The sum of all data points in a pie series is considered a full pie (a 360-degree arc). Each single data point is represented as a portion of the full pie. Thus, the Pie series visualizes data points as a ratio of the total sum of all points.

chart-pie-series

Defining a Pie Series Declaratively

To define a Pie series in HTML, add an object with type property set to "pie" to the series array.

HTML Copy imageCopy
<div id="declarativePieSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'pie', 
        data: [
            { value: 16.7, category: 'Europe', explode: true },
            { value: 20, category: 'North America' },
            { value: 15.7, category: 'South America' },
            { value: 26.6, category: 'Asia' },
            { value: 23.5, category: 'Australia' }
        ], 
        labels: { 
            visible: true 
        }
    }]        
}">
</div>

Defining a Pie Series Programmatically

To programmatically add a Pie series to the chart, create a new Telerik.UI.Chart.PieSeries object and add it to the Telerik.UI.RadChart.series array. Finally, call refresh() to have the changes take effect.

JavaScript Copy imageCopy
var pieSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("pieSeriesChart"));
var pieSeries = new Telerik.UI.Chart.PieSeries();
pieSeries.data = [16.7, 20, 15.7, 26.6, 23.5];
pieSeriesChartCtrl.series.push(pieSeries);
pieSeriesChartCtrl.refresh();

Configuring a Pie Series

Apart from the common configuration settings listed in this article, there a few more specific ones that you can use to customize the look and behavior of the Pie series.

Setting the Pie Series Fields

There are three available field settings for the Pie series. Here is a brief description of their usage:

  • colorField: The data field containing the slice color. The field should contain valid CSS colors.

  • explodeField: The data field containing the boolean value that indicates if the segment is exploded (separated out from the pie).

  • categoryField: The data field containing the pie category name. This field will be used to populate the Pie series tooltips, unless they are templated.

A simple example of the usage of these fields follows below. Of course, it is not required to have them always set; this would mostly depend on the type of data you pass to the chart series.

Setting the fields Copy imageCopy
<div id="pieSeriesFieldsChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'pie',
        field: 'Value',
        categoryField: 'Continent',
        explodeField: 'Highlighted',
        colorField: 'Color',
        labels: {
          visible: true
        }
    }],
    dataSource: {
        data: [
            { Value: 26.6, Continent: 'Asia', Highlighted: true, Color: '#014E82' },
            { Value: 23.5, Continent: 'Australia', Highlighted: false, Color: '#0065A7' },
            { Value: 16.7, Continent: 'Europe', Highlighted: false, Color: '#00A99E' },
            { Value: 20, Continent: 'North America', Highlighted: false, Color: '#926CA9' },
            { Value: 15.7, Continent: 'South America', Highlighted: false, Color: '#B089CC' }
        ]                
    }
}">
</div>

The resulting chart looks like this:

Setting fields

Setting the Start Angle for Drawing the Series

By default, the first series segment is drawn at 90 degrees. You can change this if you set the startAngle property. Note that the segments are ordered clockwise, where a start angle of 0 degrees is equal to 180 degrees in the polar coordinate system. For a better understanding, see the example below:

Setting Start Angle Example Copy imageCopy
<div id="startAngleChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
      type: 'pie', 
      field: 'Value',
      categoryField: 'Continent',
      explodeField: 'Highlighted',
      colorField: 'Color',
      labels: { 
          visible: true 
      },
      startAngle: 45
    }],
    dataSource: {
        data: [
            { Value: 26.6, Continent: 'Asia', Highlighted: true, Color: '#014E82' },
            { Value: 23.5, Continent: 'Australia', Highlighted: false, Color: '#0065A7' },
            { Value: 16.7, Continent: 'Europe', Highlighted: false, Color: '#00A99E' },
            { Value: 20, Continent: 'North America', Highlighted: false, Color: '#926CA9' },
            { Value: 15.7, Continent: 'South America', Highlighted: false, Color: '#B089CC' }
        ]                
    }
}">
</div>

Now, the segment, corresponding to Asia will be rendered at a start angle of 45 degrees (which would be 135 degrees in the polar coordinate system):

Changing the start angle

Gradient Options

You can easily show a gradient in the Pie series by changing the default value of the overlayGradient property. By default it is "roundedBevel", but you could also set it to "roundedBevel" or "sharpBevel" (a solid color will fill the series).

Example:

Changing Gradient Options Example Copy imageCopy
<div id="noGradientChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'pie', 
        field: 'Value',
        categoryField: 'Continent',
        explodeField: 'Highlighted',
        colorField: 'Color',
        labels: { 
            visible: true 
        },
    overlayGradient: 'sharpBevel'
    }],
    dataSource: {
        data: [
            { Value: 26.6, Continent: 'Asia', Highlighted: true, Color: '#014E82' },
            { Value: 23.5, Continent: 'Australia', Highlighted: false, Color: '#0065A7' },
            { Value: 16.7, Continent: 'Europe', Highlighted: false, Color: '#00A99E' },
            { Value: 20, Continent: 'North America', Highlighted: false, Color: '#926CA9' },
            { Value: 15.7, Continent: 'South America', Highlighted: false, Color: '#B089CC' }
        ]                
    },
    theme: 'light'
}">
</div>
Modifying the gradient

See Also