A pie chart with a legend under it. The legend names every slice and works as a switch: click an item and the pie redraws without it.
Labels next to the slices are the quickest to read, but they crowd the chart when names are long or slices are thin. A legend moves the names out of the way, and lets people switch slices off to see how the rest share the total.
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, {
layout: root.verticalLayout // the pie and the legend stacked top to bottom
}));
// 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"
}));
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([
{ value: 10, category: "One" },
{ value: 9, category: "Two" },
{ value: 6, category: "Three" },
{ value: 5, category: "Four" },
{ value: 4, category: "Five" },
{ value: 3, category: "Six" },
{ value: 1, category: "Seven" },
]);
// Create legend
// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50), // the legend's middle...
x: am5.percent(50), // ...at the middle of the chart's width
marginTop: 15, // 15px above...
marginBottom: 15 // ...and below it
}));
legend.data.setAll(series.dataItems); // one legend item per slice
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);{
"type": "PieChart",
"settings": {
"layout": {
"type": "VerticalLayout"
}
},
"properties": {
"series": [
"#series-0"
]
},
"children": [
{
"type": "Legend",
"settings": {
"centerX": {
"type": "Percent",
"value": 50
},
"x": {
"type": "Percent",
"value": 50
},
"marginTop": 15,
"marginBottom": 15
},
"properties": {
"data": "#series-0.dataItems"
}
}
],
"refs": [
{
"data-0": [
{
"value": 10,
"category": "One"
},
{
"value": 9,
"category": "Two"
},
{
"value": 6,
"category": "Three"
},
{
"value": 5,
"category": "Four"
},
{
"value": 4,
"category": "Five"
},
{
"value": 3,
"category": "Six"
},
{
"value": 1,
"category": "Seven"
}
]
},
{
"series-0": {
"type": "PieSeries",
"settings": {
"valueField": "value",
"categoryField": "category"
},
"properties": {
"data": "#data-0"
}
}
}
]
}
