Change color of specific circle in the packed circle chart (amcharts)

Question

How can we change the color used in amcharts for packed circle chart? we can set the theme but what I'm trying to do is to override the color for specific circles I can define in the JSON. any idea how can we do this?

They use example here https://codepen.io/team/amcharts/pen/mgEXeq , Let's say I want to change the color of the circle with title "Fourth" to green. I added color attribute but it didn't work

{
        name: "Fourth",
        color: "green",
        children: [
          { name: "D1", value: 415 },
          { name: "D2", value: 148 },
          { name: "D3", value: 89 }
        ]
      }

score 0 · Accepted Answer · answered May 21 '20 at 04:39

You can use a property field to map the stroke and fill properties to your data's color field. In a force directed node chart, you need to define these properties on the node's circle and outerCircle objects:

series.nodes.template.outerCircle.propertyFields.stroke = "color";
series.nodes.template.circle.propertyFields.stroke = "color";
series.nodes.template.circle.propertyFields.fill = "color";

Note that your sample will only set the parent node to green. You will need to set the color on each child node if you also want them set to green.

Demo below:

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())

chart.data = [
  {
    name: "Core",
    children: [
      {
        name: "First",
        children: [
          { name: "A1", value: 100 },
          { name: "A2", value: 60 }
        ]
      },
      {
        name: "Second",
        children: [
          { name: "B1", value: 135 },
          { name: "B2", value: 98 }
        ]
      },
      {
        name: "Third",
        children: [
          {
            name: "C1",
            children: [
              { name: "EE1", value: 130 },
              { name: "EE2", value: 87 },
              { name: "EE3", value: 55 }
            ]
          },
          { name: "C2", value: 148 },
          {
            name: "C3", children: [
              { name: "CC1", value: 53 },
              { name: "CC2", value: 30 }
            ]
          },
          { name: "C4", value: 26 }
        ]
      },
      {
        name: "Fourth",
        color: "green",
        children: [
          { name: "D1", value: 415 },
          { name: "D2", value: 148 },
          { name: "D3", value: 89 }
        ]
      },
      {
        name: "Fifth",
        children: [
          {
            name: "E1",
            children: [
              { name: "EE1", value: 33 },
              { name: "EE2", value: 40 },
              { name: "EE3", value: 89 }
            ]
          },
          {
            name: "E2",
            value: 148
          }
        ]
      }

    ]
  }
];

series.dataFields.value = "value";
series.dataFields.name = "name";
series.dataFields.children = "children";
series.nodes.template.tooltipText = "{name}:{value}";
series.nodes.template.fillOpacity = 1;
series.nodes.template.outerCircle.propertyFields.stroke = "color";
series.nodes.template.circle.propertyFields.stroke = "color";
series.nodes.template.circle.propertyFields.fill = "color";

series.nodes.template.label.text = "{name}"
series.fontSize = 10;
series.minRadius = 15;

#chartdiv {
  width: 100%;
  height: 600px;
}

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv"></div>

Change color of specific circle in the packed circle chart (amcharts)

1 Answers1