DevExtreme jQuery - 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 option.
jQuery
$(function() {
$("#pieChartContainer").dxPieChart({
type: "doughnut" // or "donut"
});
});Angular
<dx-pie-chart
type="doughnut"> <!-- or "donut" -->
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})Use the series option to configure a series. Pass an object to this option 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
$(function() {
$("#pieChartContainer").dxPieChart({
commonSeriesSettings: {
argumentField: "year"
},
series: [{
valueField: "men"
}, {
valueField: "women"
}]
});
});Angular
<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
],
// ...
})Settings specified for a series apply to all its points. If you need to customize an individual point, assign a function to the customizePoint option. This function must return an object with options for the point that you want to customize.
jQuery
$(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
<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
],
// ...
})Refer to other topics in this section for details on main series features.