Search code examples
amchartsamcharts5

How to change the colour of the outer circle element of a bullet in the force-directed network diagram

I have a simple force-directed network diagram with four bullet elements and I managed to change the colour of each of the bullet via the data and the code below:

var data = {
  name: "Root",
  value: 0,
  children: [
    {
      name: "1",
      value: 40,
      nodeSettings: {
      fill: am5.color(0xFF69B4),
    },  
...

However, the outer circle element of each of the bullets still remains the same. Is it possible to change the outer circle colour for each of the bullets via the date too? Or a way to make the outer circle colour be the same as the bullet fill.

Codepen example

Thanks for your help.

Greg

I tried to target the outer circle element and change it's fill and stroke but no luck so far

Solution

  • I compared with this other example and it looks like you'll want to replace nodeSettings.fill with a simple color property and add fillField: "color" to the graph settings. Colors will be inherited by the leaf nodes as well.

    Here's an updated version of the Codepen you've linked: https://codepen.io/DustInComp/pen/NWVdzRK