Series Types PieSeries

An object defining a series of the pie type.

Type: Object

PieSeriesType ChartJS

For details on the pie series type, refer to the Pie topic.

View Demo

argumentField

Specifies the data source field that provides arguments for series points.

Type: String
Default Value: 'arg'

When defining a series, set the argumentField property to the corresponding field from the data source.

Show Example:
jQuery

In this example, the continent field of the data source is set as the argument field for the chart series using the argumentField option.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: 'Soft Pastel'
    });
});

argumentType

Specifies the required type for series arguments.

Type: String
Default Value: undefined
Accepted Values: 'numeric' | 'datetime' | 'string'

By default, the series arguments have the same type as the values of a corresponding data source field. If the data source field values are numeric, the series arguments will also be numeric, etc. However, you can convert the data source values to another type. In this instance, specify the required type using the argumentType option.

Show Example:
jQuery

Here, the 'year' field of the 'dataSource' array is intentionally set in the 'numeric' format. To convert the values of this field into the proper format, the argumentType option is used.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { year: -631166400000, population: 546 },
    { year: 2524593600000, population: 650 },
    { year: 2208974400000, population: 680 },
    { year: 1893441600000, population: 704 },
    { year: 1577822400000, population: 721 },
    { year: 1262289600000, population: 728 },
    { year: 946670400000, population: 730 },
    { year: 631137600000, population: 721 },
    { year: 315518400000, population: 694 },
    { year: -14400000, population: 656 },
    { year: -315633600000, population: 605 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'year',
            valueField: 'population',
            argumentType: 'datetime'
        },
        tooltip: {
            enabled: true,
            argumentFormat: 'year',
            customizeTooltip: function (point) {
                return {
                    text: point.valueText + ' mln in ' + point.argumentText
                };
            }
        },
        legend: { visible: false },
        title: 'Population in Europe'
    });
});

border

An object defining the series border configuration options.

Type: Object

To set custom border settings for the series, use the border object within the series configuration object.

Show Example:
jQuery

In the following example, the segment border is colored in lightblue and has a 2-pixel width.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            },
            border: {
                visible: true,
                color: 'lightblue',
                width: 2
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: 'Soft Pastel'
    });
});

color

Specifies a series color.

Type: String
Default Value: undefined

Use this option to paint all pie slices in one color.

Show Example:
jQuery

In this example, the chart series is drawn in the 'steelblue' color.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            color: 'steelblue',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent'
    });
});

hoverMode

Specifies the chart elements to highlight when a series is hovered over.

Type: String
Default Value: 'onlyPoint'
Accepted Values: 'onlyPoint' | 'none'

The following values are available.

  • onlyPoint
    Changes the appearance of the hovered point only.
  • none
    The appearance of the hovered series is not changed.

To set custom options for the 'hover' style (which is applied when a series is hovered over), use the hoverStyle configuration object.

Show Example:
jQuery

Use the drop-down list below to change the hoverMode option. To see the effect, hover over a point on the chart.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    hoverMode:
    <select id="dropdownListSelector">
        <option value="onlyPoint">onlyPoint</option>
        <option value="none">none</option>
    </select>
</div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            },
            hoverMode: 'onlyPoint'
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: 'Soft Pastel'
    });

    $("#dropdownListSelector").change(function () {
        var pieChart = $('#pieChartContainer').dxPieChart('instance');
        pieChart.option({
            series: { hoverMode: this.value }
        })
    });
});

hoverStyle

An object defining configuration options for a hovered series.

Type: Object

To set a custom 'hover' style for the series, use the hoverStyle object within the series configuration object.

Show Example:
jQuery

In this example, the style of a hovered point is changed.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            },
            hoverStyle: {
                color: 'yellowgreen',
                hatching: {
                    direction: 'left',
                    step: 9,
                    opacity: 0.1
                },
                border: {
                    visible: true,
                    color: 'aliceblue',
                    width: 1
                }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});

label

An object defining the label configuration options.

Type: Object

Each series point can be accompanied by a text label that represents data related to the point. These are called series point labels. Use the label object's properties to set label options for the series.

Show Example:
jQuery

Here, the point labels and their connectors are displayed. The label's format option is also changed.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});

maxLabelCount

Specifies how many points are acceptable to be in a series to display all labels for these points. Otherwise, the labels will not be displayed.

Type: Number
Default Value: undefined

When there is a series with a large number of points, the point labels may overlap each other and make a chart difficult to read. In this instance, it is better to display the point labels depending on their quantity. To specify the maximum amount of the labels to be displayed, set the required number to the maxLabelCount field. If the number of the points on a series exceeded the number assigned to the maxLabelCount field, the point labels for this series will not be displayed.

Show Example:
jQuery

In this example, the chart has 7 points. Initially, the point labels are displayed as the label's visible option is set to true and the series' maxLabelCount value equals 7. If you check the "6" radio button below the chart, the maxLabelCount option will be equal 6, which is less than the number of points in the chart series. As a result, the point labels will not be displayed.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
<div style="height:50px;max-width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    maxLabelCount: 
    <input type="radio" name="maxLabelCount" value="6" /> 6
    <input type="radio" name="maxLabelCount" value="7" checked /> 7
</div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            },
            maxLabelCount: 7
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });

    $("input[name='maxLabelCount']").change(function () {
        var pieChart = $('#pieChartContainer').dxPieChart('instance');
        pieChart.option({
            series: { maxLabelCount: +$(this).val() }
        })
    });
});

minSegmentSize

Specifies a minimal size of a displayed pie segment.

Type: Number
Default Value: undefined

When you visualize data with small and large numbers, the small numbers are represented by very small pie slices. It makes them difficult to click, select or hover over. In this case, use the minSegmentSize option to set the minimal size of a displayed pie segment.

Show Example:
jQuery

In this example, the minSegmentSize option is set to 5. Therefore, the points that represent the smallest values (here it is the values of the 'Antarctica' and 'Australia' points) are displayed as 5-degree slices.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            },
            minSegmentSize: 5
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});

segmentsDirection

Deprecated

Use the segmentsDirection option instead.

Specifies the direction in which the PieChart series points are located.

Type: String
Default Value: 'clockwise'
Accepted Values: 'clockwise' | 'anticlockwise'

selectionMode

Specifies the chart elements to highlight when the series is selected.

Type: String
Default Value: 'onlyPoint'
Accepted Values: 'onlyPoint' | 'none'

The **PieChart** widget comes with an API that allows you to select a series or a particular point in code. Use the selectionMode property to specify which series elements to select when the series is selected.

  • onlyPoint
    Changes the appearance of the selected point only.
  • none
    The appearance of the selected series is not changed.

To set custom options for the 'selected' style (which is applied when a series is selected), use the selectionStyle configuration object.

Show Example:
jQuery

Change the value of the series' selectionMode option using the drop-down menu below. Then, click one of the points to see the effect.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    selectionMode:
    <select id="dropdownListSelector">
        <option value="onlyPoint">onlyPoint</option>
        <option value="none">none</option>
    </select>
</div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            },
            selectionMode: 'onlyPoint'
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });

    $("#dropdownListSelector").change(function () {
        var pieChart = $('#pieChartContainer').dxPieChart('instance');
        pieChart.option({
            series: { selectionMode: this.value }
        })
    });
});

selectionStyle

An object defining configuration options for the series when it is selected.

Type: Object

The PieChart widget comes with API members that allow you to select the series in code. To set a custom 'selected' style for the series, use the selectionStyle object within the series configuration object.

Show Example:
jQuery

In this example, the style of a selected point is changed using the selectionStyle option.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            },
            selectionStyle: {
                color: 'red',
                hatching: {
                    direction: 'left',
                    step: 9,
                    opacity: 0.1
                }
            }
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});

smallValuesGrouping

Specifies chart segment grouping options.

Type: Object

If you need to group specific chart segments into one, use the options of the smallValuesGrouping configuration object.

You can group segments in two different modes. Use a 'topN' mode to group all segments that have an index that is equal to or greater than the value of the topCount option. To group all segments with the value less than the value of the threshold option, use a 'smallValueThreshold' mode.

By default, the resulting segment is called "others". To change this name, specify the groupName option.

View Demo

startAngle

Deprecated

Use the startAngle option instead.

Specifies a start angle for a pie chart in arc degrees.

Type: Number
Default Value: 0

tagField

Specifies the name of the data source field that provides data about a point.

Type: String
Default Value: 'tag'

When setting a data source, you can pass extra information about a point. For this purpose, add a separate field to the data source in addition to the argument and value fields. To set specified data to the point instance, set the series' tagField property to the name of the field with the information. In this instance, when clicking/hovering/selecting a point in the chart, you can access the data associated with this point using the point's instance.

Show Example:
jQuery

In this example, the 'info' field of the data source is set as the tag field using the series' tagField option. Click a point to display the information stored in the tag field.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
<div style="height:110px;max-width:900px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:12px">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { continent: 'Africa', population: 1022234000, info: "Africa is the second largest of the continents, covers around 22% of the world’s land area. The Equator intersects it and the expansive landmass covers the Sahara, which is the world’s largest desert, and the Nile, the longest river on earth, as well as 53 nations. Most of Africa is a desert region. This continent is basically divided into three regions, which are the Northern Plateau, the Central and Southern Plateau, and the Eastern Highlands. This includes plains, swampy coastal regions, lush tropical forests with Savannah's and hilly plateaus inland. It is the home for many exotic large mammals, which include the zebras, giraffes, gazelles, elephants, hippopotamuses, and rhinoceroses, antelopes and carnivores such as lions, leopards, hyenas, and panthers." },
    { continent: 'Europe', population: 738199000, info: "Europe is the fifth largest of the continents. It is also conventionally known as «Europa». Europa was the daughter of Phoenix in Greek mythology. Some say it is possibly from «Ereb», a Phoenician word for sunset. The Ural Mountains, the Ural River, part of the Caspian Sea, and the Caucasus Mountains forms the main boundary between Europe and Asia. Lots of geographers also see the two continents as one and call it Eurasia. Europe has a more or less a radial pattern of drainage. Most streams flow outward from the core of the continent. A wide variety of mineral resources are found in Europe, including coal, petroleum and natural gas, copper, lead, and tin." },
    { continent: 'Australia', population: 29127000, info: "Australia is the smallest of the seven continents. The interiors of the continent are predominantly plains. The Southeast and the Southwest plains are the most densely settled areas of Australia. The climate of Australia is variable, but weather extremes are rare. The Northern part of Australia has a monsoon sort of climate while in the south it is temperate. Australia is known for it’s vast wildlife with rare species and it’s known as the land of the kangaroos. Aborigines are the original inhabitants of Australia. Australians are known to have an ethnic sort of origin. One of the interesting features of Australia is the «Great Barrier Reef», which is the world’s largest coral reef. Learn more about the continents and the nations within them online. You can research any country and all the flags of the world. Wherever you are from a flag is a major source of national pride from the US flag to the Jamaican flag, these icons inspire patriotism." },
    { continent: 'North America', population: 542056000, info: "North America is around twice the size of Europe. It stretches from the vast wintry environment of the Arctic regions to the Yucatan Peninsula. America is sort of wedge shaped featuring an exceedingly irregular coastline with many prominent offshore islands, including Greenland, which is the largest island in the world. It is basically divided into five geographical regions. The North American wildlife was once abundant but after people started inhabiting this land, the numbers have decreased. The large mammals include several kinds of bear, bighorn sheep, caribou, deer, elk, and antelope. Bison, which had a population of about 60 million once, are now found only in protected herds. The Gila monster and the beaded lizard of the southwestern United States and Mexico are the only poisonous lizards in the world. We also get to see a great variety of coastal regions as well as the freshwater rivers and lakes of North America. More than 1,700 species of birds live and breed on this continent." },
    { continent: 'Asia', population: 4164252000, info: "Asia being the largest of the continents covers around one-third of the world’s total land area. Asia is known for its vast size and incomparable character. It stretches all the way east from Japan to the Southeast Arabian Peninsula, which is more than 8500 kilometers away. It is interesting to see the geographical composition of Asia. It encompasses the entire climate and expanse, be it the equatorial rain forest or the arctic tundra. We also get to see the highest and the lowest points of the Earth’s surface in Asia. The highest being, Mount Everest (8,848 meters) and the lowest is the shore of the Dead Sea (397 meters below sea level)." },
    { continent: 'Antarctica', population: 4490, info: "Antarctica the sixth largest of the continents, is ice bound through out the year. Penguins and seals, accompanied by a few invertebrates such as mites and ticks—the only land animals that can tolerate the low temperatures, primarily inhabit it. The marine life is rich and it includes krill, a shrimp like organism that is a food source for large numbers of whales in the surrounding waters. Antarctica has no trees, flowering plants, or grasses. The sparse vegetation is limited to about 350 species, which mostly encompass lichens, mosses and algae. Antarctica is a true desert due to its extreme cold climate making it the coldest, windiest, and driest continent. It’s average temperature is around -50°C (-58°F), and the land is swept by hurricanes and the annual rainfall is only around 50 millimeters a year. This continent has no native civilization but the United Kingdom, Norway, France, Australia, New Zealand, Chile, and Argentina have made territorial claims. Due to the climate it makes it impossible for people to settle down here." },
    { continent: 'South America', population: 392555000, info: "South America is the fourth largest continent of the world although it contains less than 12% of the world’s population. The Andes, world’s second largest mountain range is seen in South America. The second largest river- Amazon also runs through South America. The lowland consists mainly of the Amazon Basin, which is covered in the equatorial region. These areas are of the wet tropical climate and have a dense cover of rain forest. The largest forest area in the world is seen in South America. South America has diverse mineral resources, like gold, silver, iron, bauxite, tin, lead and zinc many of which have not been thoroughly exploited." }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            tagField: 'info',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            },
            minSegmentSize: 5
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD'],
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        pointSelected: function (selectedPoint) {
            $('#selectionSpan').html(selectedPoint.tag);
        }
    });
});

valueField

Specifies the data source field that provides values for series points.

Type: String
Default Value: 'val'

When defining a series, set the valueField property to the corresponding field from the data source.

Show Example:
jQuery

In this example, the population field of the data source is set as the value field for the chart series using the valueField option.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: {
                    type: 'largeNumber',
                    precision: 2
                },
                connector: { visible: true }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: 'Soft Pastel'
    });
});