This tutorial shows how to add a PieChart to the page and configure the component's core settings. As a result, you will create the following UI component:

Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-pie-chart.

Create a PieChart

jQuery

Add DevExtreme to your jQuery application and use the following code to create a PieChart:

index.js

index.html

$(function() {
    $("#pie-chart").dxPieChart({
        // Configuration goes here
    });
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.15/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.2.15/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="pie-chart"></div>
    </body>
</html>

Angular

Add DevExtreme to your Angular application and use the following code to create a PieChart:

app.component.html

app.component.ts

app.module.ts

<dx-pie-chart
    // Configuration goes here
>
</dx-pie-chart>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPieChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPieChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

Add DevExtreme to your Vue application and use the following code to create a PieChart:

App.vue

<template>
    <DxPieChart
        // Configuration goes here
    >
    </DxPieChart>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxPieChart } from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    }
}
</script>

React

Add DevExtreme to your React application and use the following code to create a PieChart:

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { PieChart } from 'devextreme-react/pie-chart';

function App() {
    return (
        <PieChart
            // Configuration goes here
        >
        </PieChart>
    );
}

export default App;

Bind PieChart to Data and Configure Series

The PieChart can visualize data from different sources. Refer to the following demos for details on how to bind the PieChart to your data source:

This tutorial uses an array as a PieChart data source. To bind the PieChart to data, pass the array to the PieChart's dataSource property.

Once you assign the data source, specify the series type. The PieChart has two series types: the Pie (default) and Doughnut. The only difference between them is the Doughnut has a blank center.

To display data, specify the series nested options: argumentField and valueField. This allows the component to determine the corresponding object fields (arguments and values) in the array.

jQuery

index.js

index.html

data.js

$(function() {
    $("#pie-chart").dxPieChart({
        dataSource: billionaires
        series: {
            argumentField: "country",
            valueField: "amount",
        },
        type: "doughnut"
    });
});

<head>
     <!-- ... -->
    <script type="text/javascript" src="data.js"></script>
</head>

const billionaires = [
{
    country: "China",
    amount: 1002
},
{
    country: "United States",
    amount: 716
},
{
    country: "India",
    amount: 215
},
{
    country: "United Kingdom",
    amount: 150
},
{
    country: "Germany",
    amount: 145
}
];

Angular

app.component.html

app.component.ts

app.service.ts

<dx-pie-chart
    [dataSource]="billionaires"
    type="doughnut"
>
    <dxi-series 
        argumentField="country" 
        valueField="amount"
    >
    </dxi-series>
</dx-pie-chart>

import { Component } from '@angular/core';
import { Billionaires, Service } from './app.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [Service],
})

export class AppComponent {
    billionaires: Billionaires[];
    constructor(private service: Service) {
        this.billionaires = service.getBillionaires();
    }
}

import { Injectable } from '@angular/core';

export class Billionaires {
    country: string;
    amount: number;
}

const billionaires: Billionaires[] = [
{
    country: "China",
    amount: 1002
},
{
    country: "United States",
    amount: 716
},
{
    country: "India",
    amount: 215
},
{
    country: "United Kingdom",
    amount: 150
},
{
    country: "Germany",
    amount: 145
}
];

@Injectable()
export class Service {
    getBillionaires(): Billionaires[] {
        return billionaires;
    }
}

Vue

App.vue

data.js

<template>
    <DxPieChart
        :data-source="billionaires"
        type="doughnut"
    >
        <DxSeries
            argument-field="country"
            value-field="amount"
        >
        </DxSeries>
    </DxPieChart> 
</template>

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

export default {
    components: {
        DxPieChart,
        DxSeries
    },
    data() {
        return {
            billionaires
        }
    }
}
</script>

export const billionaires = [
{
    country: "China",
    amount: 1002
},
{
    country: "United States",
    amount: 716
},
{
    country: "India",
    amount: 215
},
{
    country: "United Kingdom",
    amount: 150
},
{
    country: "Germany",
    amount: 145
}
];

React

App.js

data.js

// ...
import { PieChart, Series } from 'devextreme-react/pie-chart';
import { billionaires } from './data';

function App() {
    return (
        <PieChart
            dataSource={billionaires}
            type="doughnut"
        >
            <Series 
                argumentField="country" 
                valueField="amount"
            >
            </Series>
        </PieChart>
    ); 
}

export default App;

export const billionaires = [
{
    country: "China",
    amount: 1002
},
{
    country: "United States",
    amount: 716
},
{
    country: "India",
    amount: 215
},
{
    country: "United Kingdom",
    amount: 150
},
{
    country: "Germany",
    amount: 145
}
];

Set PieChart Title

Use the title property to specify and configure the chart's title.

jQuery

index.js

$(function() {
    $("#pie-chart").dxPieChart({
        // ...
        title: "Top-5 Countries by Number of Billionaires"
    });
});

Angular

app.component.html

<dx-pie-chart ...
    title="Top-5 Countries by Number of Billionaires"
>
    <!-- ... -->
</dx-pie-chart>

Vue

App.vue

<template>
    <DxPieChart ...
        title="Top-5 Countries by Number of Billionaires"
    >
        <!-- ... -->
    </DxPieChart> 
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    return (
        <PieChart ...
            title="Top-5 Countries by Number of Billionaires"
        >
            <!-- ... -->
        </PieChart>
    ); 
}

export default App;

Configure Point Labels

You can accompany each series point with a label that displays the point's value or custom data.

To make point labels visible, assign true to the series.label.visible property. With this configuration, the component displays point labels detached from their respective series points. To make the connection between labels and points visible, set the label.connector.visible property to true.

The component displays labels next to points. Change the label.position property to rearrange labels in columns or place them inside series points.

If you need to change the point's label text, declare the label.customizeText function. It must return a string value.

jQuery

index.js

$(function() {
    $("#pie-chart").dxPieChart({
        // ...
        series: {
            // ...
            label: {
                visible: true,
                connector: {
                    visible: true
                },
                position: "columns",
                customizeText: function (pointInfo) {
                    return pointInfo.value + " billionaires";
                }
            }
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-pie-chart ...
>
    <dxi-series ...
    >
        <dxo-label 
            [visible]="true"
            position="columns"
            [customizeText]="customizeText"
        >
            <dxo-connector [visible]="true"></dxo-connector>
        </dxo-label>
    </dxi-series>
</dx-pie-chart>

// ...

export class AppComponent {
    // ...
    customizeText (pointInfo: any) {
        return pointInfo.value + " billionaires";
    }
}

Vue

App.vue

<template>
    <DxPieChart ...
    >
        <DxSeries ...
        >
            <DxLabel
                :visible="true"
                position="columns"
                :customize-text="customizeText"
            >
                <DxConnector :visible="true"></DxConnector>
            </DxLabel>
        </DxSeries>
    </DxPieChart> 
</template>

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

export default {
    components: {
        DxPieChart,
        DxSeries,
        DxLabel
    },
    data() {
        return {
            // ...
        }
    },
    methods: {    
        customizeText (pointInfo) {
            return pointInfo.value + " billionaires";
        }
    }
}
</script>

React

App.js

// ...
import { PieChart, Series, Label } from 'devextreme-react/pie-chart';

const customizeText = (pointInfo) => {
    return pointInfo.value + " billionaires";
}

function App() {
    return (
        <PieChart ...
        >
            <Series ... 
            >
                <Label 
                    visible={true}
                    position="columns"
                    customizeText={customizeText}
                >
                    <Connector visible={true}></Connector>
                </Label>
            </Series>
        </PieChart>
    ); 
}

export default App;

Enable Tooltips

To enable tooltips, assign true to the enabled property of the tooltip object. A PieChart tooltip displays information about the point value, but you can display custom content in a tooltip.

In this tutorial, the tooltip displays information about the point argument. Use the tooltip.contentTemplate function to assign a custom template for all PieChart tooltips.

jQuery

index.js

$(function() {
    $("#pie-chart").dxPieChart({
        // ...
        tooltip: {
            enabled: true,
            contentTemplate: function (data) {
                return data.argumentText;
            }
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-pie-chart ...
>
    <!-- ... -->
    <dxo-tooltip
        [enabled]="true"
        [contentTemplate]="contentTemplate"
    >
    </dxo-tooltip>
</dx-pie-chart>

// ...

export class AppComponent {
    // ...
    contentTemplate (data: any) {
        return data.argumentText;
    }
}

Vue

App.vue

<template>
    <DxPieChart ...
    >
        <!-- ... -->
        <DxTooltip
            :enabled="true"
            :content-template="contentTemplate"
        >
        </DxTooltip>
    </DxPieChart> 
</template>

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

export default {
    components: {
        DxPieChart,
        DxTooltip
    },
    data() {
        return {
            // ...
        }
    },
    methods: {    
        // ...
        contentTemplate (data) {
            return data.argumentText;
        }
    }
}
</script>

React

App.js

// ...
import { PieChart, Tooltip } from 'devextreme-react/pie-chart';

const contentTemplate = (data) => {
    return data.argumentText;
}

function App() {
    return (
        <PieChart ...
        >
            <!-- ... -->
            <Tooltip
                enabled={true}
                contentTemplate={contentTemplate}
            >
            </Tooltip>
        </PieChart>
    ); 
}

export default App;

Handle Selection

Use the onPointClick function to implement the selection functionality. Call a point's isSelected() method to check whether a user selected it.

In this tutorial, when a user clicks on a point, the point is selected. When the user clicks on the point again, the component clears the selection.

jQuery

index.js

$(function() {
    $("#pie-chart").dxPieChart({
        // ...
        onPointClick: function (e) {
            const point = e.target;
            if (point.isSelected()) {
                point.clearSelection();
            } else {
                point.select();
            }
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-pie-chart ...
    (onPointClick)="onPointClick($event)"
>
    <!-- ... -->
</dx-pie-chart>

// ...

export class AppComponent {
    // ...
    onPointClick (e: any) {
        const point = e.target;
        if (point.isSelected()) {
            point.clearSelection();
        } else {
            point.select();
        }
    }
}

Vue

App.vue

<template>
    <DxPieChart ...
        @point-click="onPointClick"
    >
        <!-- ... -->
    </DxPieChart> 
</template>

<script>
// ...

export default {
    components: {
        // ...
    },
    data() {
        return {
            // ...
        }
    },
    methods: {    
        // ...
        onPointClick (e) {
            const point = e.target;
            if (point.isSelected()) {
                point.clearSelection();
            } else {
                point.select();
            }
        }
    }
}
</script>

React

App.js

// ...

const onPointClick = (e) => {
    const point = e.target;
    if (point.isSelected()) {
        point.clearSelection();
    } else {
        point.select();
    }
}

function App() {
    return (
        <PieChart ...
            onPointClick={onPointClick}
        >
            <!-- ... -->
            <Tooltip
                enabled={true}
                contentTemplate={contentTemplate}
            >
            </Tooltip>
        </PieChart>
    ); 
}

export default App;

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery PieChart - Getting Started

jQuery

Angular

Vue

React

Create a PieChart

jQuery

Angular

Vue

React

Bind PieChart to Data and Configure Series

jQuery

Angular

Vue

React

Set PieChart Title

jQuery

Angular

Vue

React

See Also

Configure Point Labels

jQuery

Angular

Vue

React

Enable Tooltips

jQuery

Angular

Vue

React

Handle Selection

jQuery

Angular

Vue

React