A donut where every slice is softly shaded, darker at its edges than in the middle of the ring. The shade is made from the slice colors, so it follows any theme.
A radial gradient shades each slice a little towards its inner and outer edge, so the ring gets some depth without looking like plastic. Because it is made from each slice’s own color, a new theme keeps the effect, and the labels around the ring give each country and its share.
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, {
// room around the ring for the labels
radius: am5.percent(75),
innerRadius: am5.percent(50) // a hole half the radius turns the pie into a donut
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(am5percent.PieSeries.new(root, {
name: "Series",
valueField: "sales",
categoryField: "country"
}));
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([{
country: "Lithuania",
sales: 501.9
}, {
country: "Czechia",
sales: 301.9
}, {
country: "Ireland",
sales: 201.1
}, {
country: "Germany",
sales: 165.8
}, {
country: "Australia",
sales: 139.9
}, {
country: "Austria",
sales: 128.3
}, {
country: "UK",
sales: 99
}, {
country: "Belgium",
sales: 60
}, {
country: "The Netherlands",
sales: 50
}]);
// Adding gradients
series.slices.template.setAll({
// a thin line in the background color between the slices
stroke: root.interfaceColors.get("background"),
strokeWidth: 1,
strokeOpacity: 1,
cornerRadius: 10 // rounded slice corners
});
// A soft shade: each slice is a little darker at its inner and outer edge than in the middle of the ring
series.slices.template.set("fillGradient", am5.RadialGradient.new(root, {
stops: [{ // five stops spread evenly from the pie's center to its edge; below 0 darkens
brighten: -0.35
}, {
brighten: -0.35
}, {
brighten: -0.25
}, {
brighten: 0
}, {
brighten: -0.25
}]
}));
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);{
"type": "PieChart",
"settings": {
"radius": {
"type": "Percent",
"value": 75
},
"innerRadius": {
"type": "Percent",
"value": 50
}
},
"properties": {
"series": [
"#series-0"
]
},
"refs": [
{
"data-0": [
{
"country": "Lithuania",
"sales": 501.9
},
{
"country": "Czechia",
"sales": 301.9
},
{
"country": "Ireland",
"sales": 201.1
},
{
"country": "Germany",
"sales": 165.8
},
{
"country": "Australia",
"sales": 139.9
},
{
"country": "Austria",
"sales": 128.3
},
{
"country": "UK",
"sales": 99
},
{
"country": "Belgium",
"sales": 60
},
{
"country": "The Netherlands",
"sales": 50
}
]
},
{
"series-0": {
"type": "PieSeries",
"settings": {
"name": "Series",
"valueField": "sales",
"categoryField": "country"
},
"properties": {
"data": "#data-0",
"slices": {
"properties": {
"template": {
"settings": {
"stroke": "@root.interfaceColors.get('background')",
"strokeWidth": 1,
"strokeOpacity": 1,
"cornerRadius": 10,
"fillGradient": {
"type": "RadialGradient",
"settings": {
"stops": [
{
"brighten": -0.35,
"color": {
"type": "Color",
"value": "#dc6788"
},
"colorInherited": true,
"opacityInherited": true
},
{
"brighten": -0.35,
"color": {
"type": "Color",
"value": "#dc6788"
},
"colorInherited": true,
"opacityInherited": true
},
{
"brighten": -0.25,
"color": {
"type": "Color",
"value": "#dc6788"
},
"colorInherited": true,
"opacityInherited": true
},
{
"brighten": 0,
"color": {
"type": "Color",
"value": "#dc6788"
},
"colorInherited": true,
"opacityInherited": true
},
{
"brighten": -0.25,
"color": {
"type": "Color",
"value": "#dc6788"
},
"colorInherited": true,
"opacityInherited": true
}
]
}
}
}
}
}
}
}
}
}
]
}
