In the course of this tutorial, we'll explain how, and build an actual working Pie chart. Show
Creating a Pie chartBefore we can do anything, we need to create a Pie chart object, which in this case an instance of a PieChart class. A Pie chart, at the very least needs the following things:
This tutorial will walk through all of these. Importing modules/scriptsNeedless to say, before you can do anything, you need to make sure all required modules (in TypeScript), or files (in JavaScript) are imported. Please refer to our Getting started articles for more details:
For a Pie chart, we'll need to import import * as am4core from "@amcharts/amcharts4/core"; import * as am4charts from "@amcharts/amcharts4/charts"; <script src="//cdn.amcharts.com/lib/4/core.js"></script> <script src="//cdn.amcharts.com/lib/4/charts.js"></script> We'll be importing and referring these as Creating chart instanceFor that we're going to be using let chart = am4core.create("chartdiv", am4charts.PieChart); var chart = am4core.create("chartdiv", am4charts.PieChart); var chart = am4core.createFromConfig({ // ... chart config }, "chartdiv", am4charts.PieChart); NOTE There's a special comment on JSON-based setup down this article. Read on. DataJust like for most chart types, the data for a Pie chart is an array of objects. Each of those objects will represent a Slice and must at least contain one numeric value (Slice value) and a category (Slice title). In-line dataWe assign the data to the data to chart's chart.data = [{ "country": "Lithuania", "litres": 501.9 }, { "country": "Czech Republic", "litres": 301.9 }, { "country": "Ireland", "litres": 201.1 }, { "country": "Germany", "litres": 165.8 }, { "country": "Australia", "litres": 139.9 }, { "country": "Austria", "litres": 128.3 }, { "country": "UK", "litres": 99 }, { "country": "Belgium", "litres": 60 }, { "country": "The Netherlands", "litres": 50 }]; chart.data = [{ "country": "Lithuania", "litres": 501.9 }, { "country": "Czech Republic", "litres": 301.9 }, { "country": "Ireland", "litres": 201.1 }, { "country": "Germany", "litres": 165.8 }, { "country": "Australia", "litres": 139.9 }, { "country": "Austria", "litres": 128.3 }, { "country": "UK", "litres": 99 }, { "country": "Belgium", "litres": 60 }, { "country": "The Netherlands", "litres": 50 }]; { // ... "data": [{ "country": "Lithuania", "litres": 501.9 }, { "country": "Czech Republic", "litres": 301.9 }, { "country": "Ireland", "litres": 201.1 }, { "country": "Germany", "litres": 165.8 }, { "country": "Australia", "litres": 139.9 }, { "country": "Austria", "litres": 128.3 }, { "country": "UK", "litres": 99 }, { "country": "Belgium", "litres": 60 }, { "country": "The Netherlands", "litres": 50 }] } External dataWe can also make the chart load external data using chart.dataSource.url = "pie_chart_data.json"; chart.dataSource.url = "pie_chart_data.json"; { // ... "dataSource": { "url": "pie_chart_data.json" } } Please refer to our "External data" article, for more details. Slice seriesIn amCharts 4 universe, Pie chart is a serial chart. Creating a seriesA series of Slices is represented by an instance of PieSeries class. In most serial charts, Pie chart included, all Series are included in a List accessible via chart's To create a new Series, we just going to create a new instance of let pieSeries = chart.series.push(new am4charts.PieSeries()); var pieSeries = chart.series.push(new am4charts.PieSeries()); { // ... "series": [{ "type": "PieSeries", // Series settings }] } Setting up seriesNow that we have a Series, we need to set it up. At the very least, we need to specify the fields in data, this Series will get its values from. (remember a PieSeries needs a numeric value and a string title/category for each Slice) That's where Series property pieSeries.dataFields.value = "litres"; pieSeries.dataFields.category = "country"; pieSeries.dataFields.value = "litres"; pieSeries.dataFields.category = "country"; { // ... "series": [{ "type": "PieSeries", "dataFields": { "value": "litres", "category": "country" } }] } As you can see, Slice's numeric value is represented by a data field "value", while string title with a "category". NOTE Check out dedicated "Series" article has more information about concepts of Series. Putting it all togetherNow that we have all the required elements, let's put it all together: // Import modules import * as am4core from "@amcharts/amcharts4/core"; import * as am4charts from "@amcharts/amcharts4/charts"; // Create chart instance let chart = am4core.create("chartdiv", am4charts.PieChart); // Add data chart.data = [{ "country": "Lithuania", "litres": 501.9 }, { "country": "Czech Republic", "litres": 301.9 }, { "country": "Ireland", "litres": 201.1 }, { "country": "Germany", "litres": 165.8 }, { "country": "Australia", "litres": 139.9 }, { "country": "Austria", "litres": 128.3 }, { "country": "UK", "litres": 99 }, { "country": "Belgium", "litres": 60 }, { "country": "The Netherlands", "litres": 50 }]; // Add and configure Series let pieSeries = chart.series.push(new am4charts.PieSeries()); pieSeries.dataFields.value = "litres"; pieSeries.dataFields.category = "country"; <script src="//cdn.amcharts.com/lib/4/core.js"></script> <script src="//cdn.amcharts.com/lib/4/charts.js"></script> <div id="chartdiv" style="width: 100%; height: 400px;"></div> <script> // Create chart instance var chart = am4core.create("chartdiv", am4charts.PieChart); // Add data chart.data = [{ "country": "Lithuania", "litres": 501.9 }, { "country": "Czech Republic", "litres": 301.9 }, { "country": "Ireland", "litres": 201.1 }, { "country": "Germany", "litres": 165.8 }, { "country": "Australia", "litres": 139.9 }, { "country": "Austria", "litres": 128.3 }, { "country": "UK", "litres": 99 }, { "country": "Belgium", "litres": 60 }, { "country": "The Netherlands", "litres": 50 }]; // Add and configure Series var pieSeries = chart.series.push(new am4charts.PieSeries()); pieSeries.dataFields.value = "litres"; pieSeries.dataFields.category = "country"; </script> <script src="//cdn.amcharts.com/lib/4/core.js"></script> <script src="//cdn.amcharts.com/lib/4/charts.js"></script> <div id="chartdiv" style="width: 100%; height: 400px;"></div> <script> // Create chart instance var chart = am4core.createFromConfig({ // Add data "data": [{ "country": "Lithuania", "litres": 501.9 }, { "country": "Czech Republic", "litres": 301.9 }, { "country": "Ireland", "litres": 201.1 }, { "country": "Germany", "litres": 165.8 }, { "country": "Australia", "litres": 139.9 }, { "country": "Austria", "litres": 128.3 }, { "country": "UK", "litres": 99 }, { "country": "Belgium", "litres": 60 }, { "country": "The Netherlands", "litres": 50 }], // Create and configure Series "series": [{ "type": "PieSeries", "dataFields": { "value": "litres", "category": "country" } }] }, "chartdiv", am4charts.PieChart); </script> Here's a live version of the chart we've just created: (implemented in JavaScript) See the Pen amCharts V4: Simple Pie chart by amCharts (@amcharts) on CodePen.0 Taking it furtherConfiguring appearanceThere are so much more settings we can apply to chart, Series and the slices. For example, we can make Pie chart into a Donut chart by setting chart's chart.innerRadius = am4core.percent(40); chart.innerRadius = am4core.percent(40); { // ... "innerRadius": "40%" } While we're at it, let's make each slice have white outline borders. To do that, we'll need to access PieSeries' PieSerie's OK, so let's add a dark border around each slice to make them more prominent: pieSeries.slices.template.stroke = am4core.color("#4a2abb"); pieSeries.slices.template.strokeWidth = 2; pieSeries.slices.template.strokeOpacity = 1; pieSeries.slices.template.stroke = am4core.color("#4a2abb"); pieSeries.slices.template.strokeWidth = 2; pieSeries.slices.template.strokeOpacity = 1; { // ... "series": [{ "type": "PieSeries", "dataFields": { "value": "litres", "category": "country" }, "slices": { "stroke": "#4a2abb", "strokeWidth": 2, "strokeOpacity": 1 } }] } And voilà! See the Pen amCharts V4: Simple Pie chart with Legend by amCharts (@amcharts) on CodePen.dark Biding slice appearance to dataYou can also bind virtually any property of the slice to a field in data using what we call "property fields". Read more about property fields, or if you're short on time, property fields is basically an object defining which property (key) should draw its value in data. Suppose we have a "color" key in our data: [{ "country": "Lithuania", "litres": 501, "color": am4core.color("#ED1C24") }, { "country": "Czechia", "litres": 301, "color": am4core.color("#235789") }, { "country": "Ireland", "litres": 201, "color": am4core.color("#F1D302") }, { "country": "Germany", "litres": 165, "color": am4core.color("#020100") }] Now we can use pieSeries.slices.template.propertyFields.fill = "color"; pieSeries.slices.template.propertyFields.fill = "color"; { // ... "series": [{ "type": "PieSeries", // ... "slices": { "propertyFields": { "fill": "color" } } }] } Let's see how this looks on a live chart: See the Pen amCharts 4: Binding slice colors to data by amCharts team (@amcharts) on CodePen.24419 Disabling various elementsIt's possible to disable various elements like ticks, labels and rollover tooltips. To disable the former, use templates of the respectively named
pieSeries.labels.template.disabled = true; pieSeries.ticks.template.disabled = true; pieSeries.labels.template.disabled = true; pieSeries.ticks.template.disabled = true; { // ... "series": { // ... "ticks": { "disabled": true }, "labels": { "disabled": true } } } NOTE You can use those same templates to also configure labels and ticks, like for example set To disable the tooltip which appears on slice hover, simply reset pieSeries.slices.template.tooltipText = ""; pieSeries.slices.template.tooltipText = ""; { // ... "series": { // ... "slices": { "tooltipText": "" } } } Here's a working example with all of the above: See the Pen amCharts V4: Disabling Pie chart elements by amCharts (@amcharts) on CodePen.24419 Controlling appearance via statesIn short, states is a powerful amCharts 4 concept allowing application of property values to elements when certain actions happen. Like, for example, an element is hovered. Pie series' slices has already three states pre-created for us:
Each of those states, apply values to certain slice properties to modify its appearance. For example, When you click a slice and To modify how slices behave in each of those scenarios, you need to modify the respective states' For example, if we don't want the slice to grow on hover, we'd do this: let hs = pieSeries.slices.template.states.getKey("hover"); hs.properties.scale = 1; var hs = pieSeries.slices.template.states.getKey("hover"); hs.properties.scale = 1; { // ... "series": { // ... "slices": { "states": { "hover": { "properties": { "scale": 1 } } } } } } Similarly, if we don't want slice to pull out on click, we'd need to modify let as = pieSeries.slices.template.states.getKey("active"); as.properties.shiftRadius = 0; var as = pieSeries.slices.template.states.getKey("active"); as.properties.shiftRadius = 0; { // ... "series": { // ... "slices": { "states": { "active": { "properties": { "shiftRadius": 1 } } } } } } We can also, modify any of the slices' properties that way just as well. For example, if we want to disable growing on hover, but would rather modify fill opacity of the slice, we can do this: pieSeries.slices.template.fillOpacity = 1; let hs = pieSeries.slices.template.states.getKey("hover"); hs.properties.scale = 1; hs.properties.fillOpacity = 0.5; pieSeries.slices.template.fillOpacity = 1; var hs = pieSeries.slices.template.states.getKey("hover"); hs.properties.scale = 1; hs.properties.fillOpacity = 0.5; { // ... "series": { // ... "slices": { "fillOpacity": 1, "states": { "hover": { "properties": { "scale": 1, "fillOpacity": 0.5 } } } } } } IMPORTANT Notice, how we set See the Pen amCharts V4: Pie chart states by amCharts (@amcharts) on CodePen.24419 MORE INFO For more information about states read our dedicated "States" article. One more thing before you go. There's also a specially-named theme: Adding a legendEven if it's not required, adding a legend might improve user experience. It can provide visual reference for the user, as well as allow toggling certain Slices. To add a legend, we simply create an instance of Legend class and assign it to chart's chart.legend = new am4charts.Legend(); chart.legend = new am4charts.Legend(); { // ... "legend": { "type": "Legend" } } NOTE Refer to the "Legend" article for more details. Setting themesamCharts 4 makes it easy to apply themes to am4charts. Let's make our chart more lively by enabling "Animated" theme. To do so, we'll need to remember to import the theme itself as well as set the // Import modules import * as am4core from "@amcharts/amcharts4/core"; import * as am4charts from "@amcharts/amcharts4/charts"; import am4themes_animated from "@amcharts/amcharts4/themes/animated"; // Set theme am4core.useTheme(am4themes_animated); // Create chart instance let chart = am4core.create("chartdiv", am4charts.PieChart); // ... <script src="//cdn.amcharts.com/lib/4/core.js"></script> <script src="//cdn.amcharts.com/lib/4/charts.js"></script> <script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv" style="width: 100%; height: 400px;"></div> <script> // Set theme am4core.useTheme(am4themes_animated); // Create chart instance var chart = am4core.create("chartdiv", am4charts.PieChart); // ... </script> <script src="//cdn.amcharts.com/lib/4/core.js"></script> <script src="//cdn.amcharts.com/lib/4/charts.js"></script> <script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv" style="width: 100%; height: 400px;"></div> <script> // Set theme am4core.useTheme(am4themes_animated); // Create chart instance var chart = am4core.createFromConfig({ // ... }, "chartdiv", am4charts.PieChart); </script> See the Pen amCharts V4: Simple Pie chart (animated) by amCharts (@amcharts) on CodePen.dark (click RERUN or legend items to see how much more nicer interactions feel like now) NOTE Refer to the "Using themes" article for more details. Nested donut chartsA Pie chart can have more than one PieSeries. To create nested Pie/Donut charts, we simply add multiple PieSeries. (making sure they have their We're not going to bloat this article with a code example. We're just going to slam you with a live demo: See the Pen amCharts V4: Nested Pie chart with Legend by amCharts (@amcharts) on CodePen.dark Modifying labels, legend, tooltipBy default Pie chart displays all values - in slice labels, rollover tooltips, legend - as percent. If you'd rather like to display them as absolute values, or otherwise modify default information, you will need to adjust various settings across your chart. REQUIRED READING The further info in this chapter relies heavily on the concept of binding text placeholder to data. Make sure you read about Text placeholders before proceeding. Changing slice label contentSlice label
content is regulated by a sample template object of the Pie series, accessible by So, if we'd like to change what is displayed in it we will need to modify pieSeries.labels.template.text = "{category}: {value.value}"; pieSeries.labels.template.text = "{category}: {value.value}"; { // ... "series": [{ // ... "labels": { "text": "{category}: {value.value}" } }] } Changing tooltip contentWhat goes into tooltip when you hover a Pie slice is regulated by slice template's If you'd like to change it, that's the property you set: pieSeries.slices.template.tooltipText = "{category}: {value.value}"; pieSeries.slices.template.tooltipText = "{category}: {value.value}"; { // ... "series": [{ // ... "slices": { "tooltipText": "{category}: {value.value}" } }] } Changing legend valueFinally, if you'd like to set what value is displayed in the legend, you'll need to set text for its value labels template: chart.legend.valueLabels.template.text = "{value.value}"; chart.legend.valueLabels.template.text = "{value.value}"; { // ... "legend": { "valueLabels": { "text": "{value.value}" } } } Chart radiusNormally, a Pie chart will take up 80% of the chart container's width or height - whichever is smaller. The extra 20% are for accommodating possible labels and slice pull outs. Like anything else it is changeable. For that we have chart's It can be either fixed pixel value, or relative value in percents (relative to the space available to the chart). Say, we have labels disabled and would want our chart reclaim the available space instead. We'd just need to set chart.radius = am4core.percent(100); chart.radius = am4core.percent(100); { // ... "radius": "100%" }
3D Pie chartA 3D Pie in amCharts 4 is a separate chart type represented by a class PieChart3D. It is almost identical to PieChart, save for a few extra properties that deal with the 3D appearance. To oversimplify, to convert any regular Pie chart to a 3D Pie chart, slap a "3D" to any class and/or module:
See the Pen amCharts V4: 3D Pie chart by amCharts (@amcharts) on CodePen.dark Grouping small slicesWith the help if SliceGrouper plugin, you can make Pie Chart automatically group small slices into "Other" group. Follow the link above for more information. Related contentYou might also benefit from looking at the following Pie chart related tutorials:
Which data would be suitable for a pie chart?Pie charts are used for nominal or categorical data. When there are many levels to your variable, a bar chart or packed bar chart may provide a better visualization of your data.
What must you select on a worksheet to create a pie chart?Creating a Bar of Pie Chart in Excel. Select the entire data set.. Click the Insert tab.. In the Charts group, click on the 'Insert Pie or Doughnut Chart' icon.. Click on the 'Bar of Pie' chart icon (within 2-D Pie icons). Which is true about a pie chart?Which of the following is TRUE about a pie chart? IT SHOWS THE RELATIONSHIP OF EACH PART TO A WHOLE. Which of the following is the first order of operations?
What kind of data might be displayed on a pie chart quizlet?a type of graph in which a circle is divided into sectors that each represent a proportion of the whole. What are Pie Charts used for? Pie charts are generally used to show percentage or proportional data and usually the percentage represented by each category is provided next to the corresponding slice of pie.
|