Pie Charts

Pie Charts display data as single-series sectors from a two-dimensional circle which is useful for rendering data as a part of the whole.

Getting Started

The Kendo UI Donut Chart is a Pie Chart variation with the same ability to display a single data series in a two-dimensional circle and is likewise useful for displaying data as a part of the whole.

To create a Pie series in the Chart HtmlHelper, use Pie in the Series configuration.

Creating the Pie Chart

The following example demonstrates how to define a single series of type "pie". Additional series are not supported and each data point is an object that specifies the point value, category label, and other properties.

$("#chart").kendoChart({
    title: {
        text: "Break-up of Spain Electricity Production for 2008"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        labels: {
            visible: true,
            format: "{0}%"
        }
    },
    series: [{
        type: "pie",
        data: [ {
            category: "Hydro",
            value: 22
        }, {
            category: "Solar",
            value: 2
        }, {
            category: "Nuclear",
            value: 49
        }, {
            category: "Wind",
            value: 27
        } ]
    }]
});

A sample Pie Chart

Configuring the Effects Overlay

Each segment has a transparent effect overlay that adds depth to the two-dimensional shape. The overlay transparent gradient is configurable.

$("#chart").kendoChart({
    series: [{
        type: "pie",
        overlay: {
            gradient: "none"
        }
    }]
});

The Pie Chart supports the following gradient options:

  • (Default) roundedBevel

    ![A Pie Chart with roundedBevel overlay](chart-pie-overlay-roundbevel.png)
    
  • sharpBevel

    ![A Pie Chart with sharpBevel overlay](chart-pie-overlay-sharpbevel.png)
    
  • none

    ![A Pie Chart with no overlay](chart-pie-overlay-none.png)
    

See Also

In this article
Not finding the help you need? Improve this article