The classic way to show parts of a whole: one circle, cut into slices sized by their share. Here, seven countries.
A pie chart shows how one total splits into parts. People read it at a glance when there are only a few slices and one or two clearly lead. It struggles when slices are close in size, because angles are hard to compare.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(
am5percent.PieChart.new(root, {
endAngle: 270 // a full circle, from the top (-90, the default start) back to the top
})
);
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(
am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category",
endAngle: 270 // the slices fill the full circle too
})
);
// hidden, the pie closes up to its start angle, so appear() sweeps it open
series.states.create("hidden", {
endAngle: -90
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([{
category: "Lithuania",
value: 501.9
}, {
category: "Czechia",
value: 301.9
}, {
category: "Ireland",
value: 201.1
}, {
category: "Germany",
value: 165.8
}, {
category: "Australia",
value: 139.9
}, {
category: "Austria",
value: 128.3
}, {
category: "UK",
value: 99
}]);
series.appear(1000, 100);{
"type": "PieChart",
"settings": {
"endAngle": 270
},
"properties": {
"series": [
"#series-0"
]
},
"refs": [
{
"data-0": [
{
"category": "Lithuania",
"value": 501.9
},
{
"category": "Czechia",
"value": 301.9
},
{
"category": "Ireland",
"value": 201.1
},
{
"category": "Germany",
"value": 165.8
},
{
"category": "Australia",
"value": 139.9
},
{
"category": "Austria",
"value": 128.3
},
{
"category": "UK",
"value": 99
}
]
},
{
"series-0": {
"type": "PieSeries",
"settings": {
"valueField": "value",
"categoryField": "category",
"endAngle": 270
},
"states": [
{
"key": "hidden",
"settings": {
"endAngle": -90
}
}
],
"properties": {
"data": "#data-0"
}
}
}
]
}
