PieChart Configuration

An object that defines configuration options for the dxPieChart widget.

dataSource

Specifies a data source for the chart.

Type: Array

To provide data for a chart, introduce an array of objects. These objects must contain a property representing an argument value and property(ies) representing the value(s) that corresponds to that argument in each series. Assign this array to the dataSource property. In addition, specify which data source field must be used as a source for arguments and which one(s) as a source for values. To do this, use the argumentField and valueField properties of the series object. For details, refer to the Use Common Data Source topic.

Show Example:
jQuery

In this example, the data source is declared as an array of objects, each of which contain the 'continent' and 'population' fields. The 'continent' field is used as an argument field for the pie series. The 'population' field is used as a value field for the pie series.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent'
    });
});

done

A callback function that is called when chart rendering is complete.

Type: function
Default Value: Empty function ($.noop)

Show Example:
jQuery

In this example, when chart rendering is complete, a message with the corresponding content appears.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        done: function () {
            $('#selectionSpan').html('The chart rendering is complete');
        }
    });
});

incidentOccured

Specifies a callback function that is called when an error or warning occurs.

Type: function
Default Value: Empty function ($.noop)

When an error or warning occurs, nothing passes to the browser console, but the function specified for the incidentOccured option is called. Information about the incident is available via the parameter of the function. For example, you will be notified when data is input in the wrong format, or when the chart container is too small.

Show Example:
jQuery

Use the check box below to change the size of the chart container. When checking the check box, the chart container becomes too small to display the chart. As a result, an error occurs. The function assigned to the incidentOccured field is used to receive the message about the error. Uncheck the check box to restore the previous size of the chart container.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
<div style="height:30px;max-width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <span id="selectionSpan" /><br />
    <input type="checkbox" id="hideContainerCheckbox"> Reduce the size of the chart container
</div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        done: function () {
            $('#selectionSpan').html('');
        },
        incidentOccured: function (message) {
            $('#selectionSpan').html(message);
        }
    });

    $('#hideContainerCheckbox').change(function () {
        $('#selectionSpan').html('');
        var pieChart = $('#pieChartContainer').dxPieChart('instance');
        if ($('#pieChartContainer').height() > 10 || $('#pieChartContainer').width() > 10) {
            $('#pieChartContainer').height(10);
            $('#pieChartContainer').width(10);
        } else {
            $('#pieChartContainer').height(400);
            $('#pieChartContainer').width(600);
        }
        pieChart.render();
    });
});

legend

Specifies dxPieChart legend options.

Type: Object

The dxPieChart widget can include a legend. It helps you distinguish and identify the points of the displayed series. Each point is presented by an item on the legend. An item marker identifies the point's (slice's) color. An item label displays a value corresponding to the point. Use the legend property to set up dxPieChart legend options to the required values. To learn more about the legend and its options, refer to the Legend topic.

Show Example:
jQuery

In this example, the legend's horizontalAlignment and verticalAlignment options are changed.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        }
    });
});

margin

Specifies the blank space between the chart's extreme elements and the boundaries of the area provided for the widget (see size) in pixels.

Type: Object

Set the required values for the left, right, top and bottom margins using the corresponding properties of the margin object.

PieChartMargin ChartJS

palette

Sets the name of the palette to be used in the chart. Alternatively, an array of colors can be set as a custom palette to be used within this chart.

Type: Array|String
Default Value: 'default'

Use this property to set a predefined or custom palette. The colors listed in the specified palette will be used to draw series points (chart slices), their labels and tooltips. If the number of points is greater than the number of colors in a palette, the palette colors are repeated, but slightly modified.
You can define a custom palette and use it in your charts. To learn how to do this, refer to the Palettes topic.

Show Example:
jQuery

This example shows how to create a custom palette and apply it to a chart.

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

var myPalette = ['rgb(199, 21, 133)', 'rgb(100, 149, 237)', 'rgb(34, 139, 34)', 'rgb(250, 128, 114)', 'rgb(255, 69, 0)', 'rgb(176, 224, 230)'];
DevExpress.viz.core.registerPalette('mySuperPalette', myPalette);

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        palette: 'mySuperPalette'
    });
});

pointClick

Specifies a function that is called when a series data point is clicked.

Type: function

When implementing a callback function for this property, use the object that represents the currently clicked point. To access this object, use the function's parameter or the this object.

For information on which point members you can use, refer to the Point class description. For instance, you can access the series to which the point belongs. To learn about which series members you can use, refer to the description of any series type in the chart Series Types section.

To learn more about handling click operations, and to see an example, refer to the Click Handling topic.

Show Example:
jQuery

Click one of the points on the chart, and information on this point will appear below.

<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: '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: '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: '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: '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: '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: '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'
        },
        title: 'Population by Continent',
        pointClick: function (clickedPoint) {
            $('#selectionSpan').html(clickedPoint.tag);
        }
    });
});

pointHover

Specifies the function that is called when a data point is hovered over.

Type: function

When implementing a callback function for this property, use the object that represents the currently hovered point. To access this object, use the function's parameter or the this object.

To learn about which point members you can use, refer to the Point class description. For instance, you can access the series to which the point belongs. To learn about which series members you can use, refer to the description of any series type in the chart Series Types section.

To learn more about handling hover operations and to see an example, refer to the Hover Handling topic.

Show Example:
jQuery

Hover over one of the points on the chart, and information on this point will appear below.

<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: '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: '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: '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: '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: '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: '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'
        },
        title: 'Population by Continent',
        pointHover: function (hoveredPoint) {
            $('#selectionSpan').html(hoveredPoint.tag);
        }
    });
});

pointSelected

Specifies the function that is called after a series data point has been selected.

Type: function

When implementing a callback function for this property, use the object that represents the currently selected point. To access this object, use the function's parameter or the this object.

To learn about which point members you can use, refer to the Point class description. For instance, you can access the series to which the point belongs. To learn about which series members you can use, refer to the description of any series type in the chart Series Types section.

To learn how to select a point, refer to the Selection Handling topic.

Show Example:
jQuery

In this example, a click on a point makes this point selected. This selection is handled by the function specified in the pointSelected option. Here, this function displays information about the selected point.

<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: '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: '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: '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: '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: '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: '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'
        },
        title: 'Population by Continent',
        pointClick: function (clickedPoint) {
            clickedPoint.fullState & 2 ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        pointSelected: function (selectedPoint) {
            $('#selectionSpan').html(selectedPoint.tag);
        }
    });
});

pointSelectionMode

Specifies whether a single point or multiple points can be selected in the chart.

Type: String
Default Value: 'single'
Accepted Values: 'single' | 'multiple'

To set the points to highlight along with the selected point, set the series | selectionMode option.

To learn how to select a point, refer to the Selection Handling topic.

Show Example:
jQuery

In this example, click a point to select/deselect this point. The pointSelectionMode option is set to multiple so that you can select multiple points.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            tagField: 'info'
        },
        title: 'Population by Continent',
        pointSelectionMode: 'multiple',
        pointClick: function (clickedPoint) {
            clickedPoint.fullState & 2 ? clickedPoint.clearSelection() : clickedPoint.select();
        }
    });
});

redrawOnResize

Indicates whether to redraw the chart when the size of the parent browser window changes or a mobile device is rotated.

Type: Boolean
Default Value: true
Accepted Values: true|false

The size of the chart is never changed when its container has a fixed size. Alternatively, its size changes proportionally when the parent window size changes and the redrawOnResize is set to true.

series

Specifies options for the series of the dxPieChart widget.

Type: {object|Array
Default Value: undefined

A series represents a grouping of related data points. The most important characteristic of a series is its type, which determines a particular visual representation of data. You can find more details on each series type in the corresponding topics in the Series help section.
To define a series, assign an object defining the series to the series configuration object. In the series' object, specify the series type, data source fields and other options.

size

Specifies the size of the widget in pixels.

Type: Object

The widget occupies the entire area of the parent container (division). If the container size (width or height) is set to zero, the widget is not displayed.

If you need to set a particular size for the widget, different from the container's size, use the size configuration object. Assign a height and width in pixels to height and width properties.

Show Example:
jQuery

In this example, the size of the chart is set smaller than the size of the chart container using the size option.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        size: {
            height: 300,
            width: 500
        }
    });
});

theme

Sets the name of the theme to be used in the chart.

Type: String
Default Value: 'default'

Use this property to set a predefined or custom theme. The options defining chart appearance will be set to the values that are set in the specified theme. You can override some of these values within the chart's configuration object. To learn more about themes and their implementation and customization, refer to the Themes topic.

Show Example:
jQuery

In this example, a custom theme is defined on the base of the default theme and then applied.

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

var myTheme = {
    name: 'mySuperTheme',
    chart: {
        commonSeriesSettings: {
            pie: {
                label: {
                    visible: true,
                    connector: { visible: true },
                    format: 'largeNumber'
                }
            }
        },
        legend: {
            border: {
                visible: true,
                color: 'forestgreen',
                cornerRadius: 20
            }
        },
        tooltip: {
            enabled: true,
            format: 'largeNumber'
        }
    }
};

DevExpress.viz.core.registerTheme(myTheme, 'default');

$(function () {
    $("#pieChartContainer").dxPieChart({
        theme: 'mySuperTheme',
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent'
    });
});

title

Specifies a title for the chart.

Type: Object|String

Use this property to set the text to be displayed as a chart title. If you need to specify the title's position on the chart, assign an object to the title property with the required title options specified. In this instance, set the title's text using the text property. When a text is not specified for a title, the widget is displayed without a title.

Show Example:
jQuery

In the example below, the chart's title text is assigned directly to the title field.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent'
    });
});

tooltip

Specifies tooltip options.

Type: Object

A tooltip is a small pop-up rectangle that displays information about a hovered series point. You can enable or disable tooltips, format or customize the displayed text, and change the default appearance. Use the properties of the tooltip configuration object to do this. To learn more about tooltips and their options, refer to the Tooltips topic.

Show Example:
jQuery

In this example, tooltips are enabled. Hover over any point to see a tooltip.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        tooltip: {
            enabled: true
        }
    });
});

tooltipHidden

A callback function that is called when a point tooltip becomes hidden.

Type: function
Default Value: Empty function ($.noop)

The point tooltip becomes invisible when another point is hovered. In addition, you can hide a tooltip in code, using the hideTooltip() method of the chart or point.

When a tooltip is made hidden, you can perform specific actions. To do this, implement a callback function and assign it to the tooltipHidden option. When implementing this callback function, use the object that represents the point whose tooltip becomes hidden. To access this object, use the function's parameter or the this object.

Show Example:
jQuery

In this example, when a tooltip is made hidden, the function assigned to the tooltipHidden option is called. When a tooltip is shown, the function assigned to the tooltipShown option is called. These functions display messages with corresponding content.

<div id="pieChartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectionSpan" style="height:30px;width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
</div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        tooltip: {
            enabled: true
        },
        tooltipHidden: function (point) {
            $('#selectionSpan').html("'tooltipHidden' was called for the (" + point.argument + "; " + point.value + ") point");
        },
        tooltipShown: function (point) {
            $('#selectionSpan').html("'tooltipShown' was called for the (" + point.argument + "; " + point.value + ") point");
        }
    });
});

tooltipShown

A callback function that is called when a point tooltip becomes shown.

Type: function
Default Value: Empty function ($.noop)

The point tooltip becomes visible when the point is hovered. In addition, you can show a tooltip in code, using the showTooltip() method of the chart or point.

When a tooltip is made shown, you can perform specific actions. To do this, implement a callback function and assign it to the tooltipShown option. When implementing this callback function, use the object that represents the point whose tooltip becomes shown. To access this object, use the function's parameter or the this object.

Show Example:
jQuery

In this example, when a tooltip is made hidden, the function assigned to the tooltipHidden option is called. When a tooltip is shown, the function assigned to the tooltipShown option is called. These functions display messages with corresponding content.

<div id="pieChartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectionSpan" style="height:30px;width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
</div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        tooltip: {
            enabled: true
        },
        tooltipHidden: function (point) {
            $('#selectionSpan').html("'tooltipHidden' was called for the (" + point.argument + "; " + point.value + ") point");
        },
        tooltipShown: function (point) {
            $('#selectionSpan').html("'tooltipShown' was called for the (" + point.argument + "; " + point.value + ") point");
        }
    });
});