CODEWITHSUNDEEP
amcharts5
Europa
Europa

Reputation: 1292

Amcharts5 Pie Chart set background color of each pie

I have this pie chart:

enter image description here

I want to set the background color of each pie:

enter image description here

My code:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Distribution</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body>
    <!-- Amcharts -->
        <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
      <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
      <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <!-- //Amcharts -->

    <!-- Chart code :: Distribution -->
    <script>
        am5.ready(function() {
            
            // Create root and chart
            var root = am5.Root.new("chartdiv_distribution");
    
            root.setThemes([
              am5themes_Animated.new(root)
            ]);
            
            var chart = root.container.children.push(
              am5percent.PieChart.new(root, {})
            );
        
        
            
            // Define data
            var data = [{
              country: "Europa",
              sales: 42,
              pieBgColor: "#0d7300"
            }, {
              country: "USA",
              sales: 13,
              pieBgColor: "#004f73"
            }, {
              country: "Asia",
              sales: 2,
              pieBgColor: "#999937"
            }, {
              country: "Other",
              sales: 6,
              pieBgColor: "#99378c"
            }];
        
            // Create series
            var series = chart.series.push(
              am5percent.PieSeries.new(root, {
                name: "Series",
                valueField: "sales",
                categoryField: "country",
                alignLabels: false
              })
            );
        
            series.data.setAll(data);
            
          series.labels.template.setAll({
                fontSize: 12,
                text: "{category}",
                textType: "radial",
                radius: 0,
                centerX: am5.percent(100),
                fill: am5.color(0xffffff)
            })
        }); // end am5.ready()
    </script>

    <div id="chartdiv_distribution" style="width: 100%;min-height: 400px;"></div>

    <!-- //Chart code :: Distribution -->
</body>
</html>

How can I set the background color of each pie using Amchart5? I have added a variable into each data piece named pieBgColor. I dont know how to use this variable, but I guess it should go to series.labels.template.setAll ?

Upvotes: 1

Views: 668

Answers (1)

Jahill
Jahill

Reputation: 78

You can add the lines

series.get("colors").set("colors", [
  am5.color(0x095256),
  am5.color(0x087f8c),
  am5.color(0x5aaa95),
  am5.color(0x86a873),
  am5.color(0xbb9f06)
]);

with the colors you wish to use.

The solution is somewhat documented here: https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/pie-series/#slices It also covers some other methods to change color.

You are also able to add the color to the data using a template field which allows you to manually specify the color within the data.

Upvotes: 0

Related Questions