Vue PieChart - Overview

A series is a collection of related data points. The most important characteristic of a series is its type. The PieChart provides Pie and Doughnut series types; the only difference between them is the Doughnut has a blank center.

The Pie series type is used by default, but you can change it to Doughnut using the type property.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        type: "doughnut" // or "donut"
    });
});
Angular
HTML
TypeScript
<dx-pie-chart
    type="doughnut"> <!-- or "donut" -->
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ...
        type="doughnut"> <!-- or "donut" -->
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

const App = () => {
    return (
        <PieChart ...
            type="doughnut"> {/* or "donut" */}
        </PieChart>
    );
};

export default App;

Use the series property to configure a series. Pass an object to this property if you have only one series, or an array of objects when you have multiple series. In the latter case, you can also specify settings common for all series in the commonSeriesSettings object, for example:

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        commonSeriesSettings: {
            argumentField: "year"
        },
        series: [{
            valueField: "men"
        }, {
            valueField: "women"
        }]
    });
});
Angular
HTML
TypeScript
<dx-pie-chart>
    <dxo-common-series-settings
        argumentField="year">
    </dxo-common-series-settings>
    <dxi-series valueField="men"></dxi-series>
    <dxi-series valueField="women"></dxi-series>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ... >
        <DxCommonSeriesSettings
            argument-field="year"
        />
        <DxSeries value-field="men" />
        <DxSeries value-field="women" />
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxCommonSeriesSettings,
    DxSeries
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxCommonSeriesSettings,
        DxSeries
    }
}
</script>
React
App.js
import React from 'react';
import PieChart, {
    CommonSeriesSettings,
    Series
} from 'devextreme-react/pie-chart';

const App = () => {
    return (
        <PieChart ... >
            <CommonSeriesSettings
                argumentField="year"
            />
            <Series valueField="men" />
            <Series valueField="women" />
        </PieChart>
    );
};

export default App;

Settings specified for a series apply to all its points. If you need to customize an individual point, assign a function to the customizePoint property. This function must return an object with properties for the point that you want to customize.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        series: {
            color: "blue"
        },
        // All series points with the value more than 100 turn red
        // Other series points remain blue
        customizePoint: function (pointInfo) {
            return pointInfo.value > 100 ? { color: "red" } : { }
        }
    });
});
Angular
HTML
TypeScript
<dx-pie-chart
    [customizePoint]="customizePoint">
    <dxi-series color="blue"></dxi-series>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // All series points with the value more than 100 turn red
    // Other series points remain blue
    customizePoint (pointInfo: any) {
        return pointInfo.value > 100 ? { color: 'red' } : { }
    };
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ...
        :customize-point="customizePoint">
        <DxSeries color="blue" />
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxSeries
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxSeries
    },

    methods: {
        // All series points with the value more than 100 turn red
        // Other series points remain blue
        customizePoint(pointInfo) {
            return pointInfo.value > 100 ? { color: 'red' } : { };
        }
    }
}
</script>
React
App.js
import React from 'react';
import PieChart, {
    Series
} from 'devextreme-react/pie-chart';

// All series points with the value more than 100 turn red
// Other series points remain blue
const customizePoint = (pointInfo) => {
    return pointInfo.value > 100 ? { color: 'red' } : { };
};

const App = () => {
    return (
        <PieChart ...
            customizePoint={customizePoint}>
            <Series color="blue" />
        </PieChart>
    );
};

export default App;

Refer to other topics in this section for details on main series features.

See Also