PieChart Series Types

Topics in this section describe the series types that come with the PieChart widget. Each topic gives an overview of a series type purpose, and details ways to enable and tune it to your needs.

Pie

Use the pie series type when you need to compare the percentage values of different point arguments in the same series, and illustrate these values as easy-to-understand pie slices.

PieSeriesType ChartJS

The pie series type is used by the dxPieChart widget by default. There may be scenarios, however, when it is appropriate to set this series type explicitly. To do this, assign 'pie' to the type option of the series configuration object.

JavaScript
var pieChartOptions = {
    // ...
    series: {
        type: 'pie'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the default appearance of the series, set the options of the series configuration object. For example, you can change the following options.

  • Slice Color
    Colors from the dxPieChart's palette are used by default. To set custom colors for pie slices, introduce a new palette and use it in your dxPieChart. To learn how to do this, refer to the Palettes topic.

  • Hover Style
    The color of a pie slice changes when it is hovered. To paint the hovered slice in another color, or apply 'left' or 'right' hatching, define the series' hoverStyle configuration object.

  • Selection Style
    The color of a pie slice changes when it is selected. To paint the selected slice in another color, or apply 'left' or 'right' hatching, define the series' hoverStyle configuration object.

  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For information on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the pie type are listed in the PieSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="pieChartController" style="height:400px; max-width:700px; margin: 0 auto" dx-pie-chart="pieChartConfiguration"></div>
var dataSource = [
    { continent: 'Africa', area: 30370000 },
    { continent: 'Antarctica', area: 13720000 },
    { continent: 'Asia', area: 43820000 },
    { continent: 'Australia', area: 9008500 },
    { continent: 'Europe', area: 10180000 },
    { continent: 'North America', area: 24490000 },
    { continent: 'South America', area: 17840000 }
];

angular
    .module('myApp', ['dx'])
    .controller('pieChartController', function ($scope) {
        $scope.pieChartConfiguration = {
            dataSource: dataSource,
            series: {
                argumentField: 'continent',
                valueField: 'area'
            },
            title: 'Area of Continents',
            palette: 'Soft',
            tooltip: {
                enabled: true,
                format: 'largeNumber',
                precision: 1,
                customizeTooltip: function (e) {
                    return { html: e.valueText + ' km<sup>2</sup>' }
                }
            }
        }
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});
<div style="height:400px; max-width:700px; margin: 0 auto" data-bind="dxPieChart: pieChartConfiguration"></div>
var dataSource = [
    { continent: 'Africa', area: 30370000 },
    { continent: 'Antarctica', area: 13720000 },
    { continent: 'Asia', area: 43820000 },
    { continent: 'Australia', area: 9008500 },
    { continent: 'Europe', area: 10180000 },
    { continent: 'North America', area: 24490000 },
    { continent: 'South America', area: 17840000 }
];

var viewModel = {
    pieChartConfiguration: {
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'area'
        },
        title: 'Area of Continents',
        palette: 'Soft',
        tooltip: {
            enabled: true,
            format: 'largeNumber',
            precision: 1,
            customizeTooltip: function (e) {
                return { html: e.valueText + ' km<sup>2</sup>' }
            }
        }
    }
};

ko.applyBindings(viewModel);
<div id="pieChartContainer" style="height:400px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', area: 30370000 },
    { continent: 'Antarctica', area: 13720000 },
    { continent: 'Asia', area: 43820000 },
    { continent: 'Australia', area: 9008500 },
    { continent: 'Europe', area: 10180000 },
    { continent: 'North America', area: 24490000 },
    { continent: 'South America', area: 17840000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'area'
        },
        title: 'Area of Continents',
        palette: 'Soft',
        tooltip: {
            enabled: true,
            format: 'largeNumber',
            precision: 1,
            customizeTooltip: function (e) {
                return { html: e.valueText + ' km<sup>2</sup>' }
            }
        }
    });
});

Doughnut

Use the doughnut series type when it is necessary to compare the percentage values of different point arguments in the same series, and illustrate these values as easy-to-understand doughnut slices.

DoughnutSeriesType DonutSeriesType ChartJS

To use this series type, assign 'doughnut' or 'donut' the type option of the series configuration object.

JavaScript
var pieChartOptions = {
    // ...
    series: {
        type: 'doughnut' // or 'donut'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the default appearance of the series, set the options of the series configuration object. For example, you can change the following options.

  • Slice Color
    Colors from the dxPieChart's palette are used by default. To set custom colors for the doughnut slices, introduce a new palette and use it in your dxPieChart. To learn how to do this, refer to the Palettes topic.

  • Inner Radius
    To set the required inner radius of a doughnut, set the series' innerRadius property.

  • Hover Style
    The color of a doughnut slice changes when it is hovered. To paint the hovered slice in another color, or apply 'left' or 'right' hatching, define the series' hoverStyle configuration object.

  • Selection Style
    The color of a doughnut slice changes when it is selected. To paint the selected slice in another color, or apply 'left' or 'right' hatching, define the series' hoverStyle configuration object.

  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For information on other label options, refer to the Series Point Labels topic.

These and other options that can be set for the series of the doughnut type are listed in the DoughnutSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="pieChartController" style="height:400px; max-width:700px; margin: 0 auto" dx-pie-chart="pieChartConfiguration"></div>
var dataSource = [
    { continent: 'Africa', area: 30370000 },
    { continent: 'Antarctica', area: 13720000 },
    { continent: 'Asia', area: 43820000 },
    { continent: 'Australia', area: 9008500 },
    { continent: 'Europe', area: 10180000 },
    { continent: 'North America', area: 24490000 },
    { continent: 'South America', area: 17840000 }
];

angular
    .module('myApp', ['dx'])
    .controller('pieChartController', function ($scope) {
        $scope.pieChartConfiguration = {
            dataSource: dataSource,
            series: {
                argumentField: 'continent',
                valueField: 'area',
                type: 'doughnut'
            },
            title: 'Area of Continents',
            palette: 'Soft Pastel',
            tooltip: {
                enabled: true,
                format: 'largeNumber',
                precision: 1,
                customizeTooltip: function (e) {
                    return { html: e.valueText + ' km<sup>2</sup>' }
                }
            }
        }
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});
<div style="height:400px; max-width:700px; margin: 0 auto" data-bind="dxPieChart: pieChartConfiguration"></div>
var dataSource = [
    { continent: 'Africa', area: 30370000 },
    { continent: 'Antarctica', area: 13720000 },
    { continent: 'Asia', area: 43820000 },
    { continent: 'Australia', area: 9008500 },
    { continent: 'Europe', area: 10180000 },
    { continent: 'North America', area: 24490000 },
    { continent: 'South America', area: 17840000 }
];

var viewModel = {
    pieChartConfiguration: {
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'area',
            type: 'doughnut'
        },
        title: 'Area of Continents',
        palette: 'Soft Pastel',
        tooltip: {
            enabled: true,
            format: 'largeNumber',
            precision: 1,
            customizeTooltip: function (e) {
                return { html: e.valueText + ' km<sup>2</sup>' }
            }
        }
    }
};

ko.applyBindings(viewModel);
<div id="pieChartContainer" style="height:400px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', area: 30370000 },
    { continent: 'Antarctica', area: 13720000 },
    { continent: 'Asia', area: 43820000 },
    { continent: 'Australia', area: 9008500 },
    { continent: 'Europe', area: 10180000 },
    { continent: 'North America', area: 24490000 },
    { continent: 'South America', area: 17840000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'area',
            type: 'doughnut'
        },
        title: 'Area of Continents',
        palette: 'Soft Pastel',
        tooltip: {
            enabled: true,
            format: 'largeNumber',
            precision: 1,
            customizeTooltip: function (e) {
                return { html: e.valueText + ' km<sup>2</sup>' }
            }
        }
    });
});