CODEWITHSUNDEEP
javascriptgraphamcharts
Shelby Reister
Shelby Reister

Reputation: 11

add a stroke and change the text color of the text in the data circles

I am new to Javascript. I found this graph on amcharts. I want to change the text color and add a stroke (that can be different colors on each) to each circle. Any help would be greatly appreciated!

I have tried to google search but don't really know where to even start or what to search.

 {name: "Core",
    children: [
      {
        name: "First",
        children: [
          { name: "A1", value: 100 },
          { name: "A2", value: 60 }
        ]
      },
networkSeries.dataFields.value = "value";
networkSeries.dataFields.name = "name";`

I just want the stroke color to be added and editable (can start with #25BEC1) and the text color to change to #0B3D49

Upvotes: 1

Views: 611

Answers (1)

David Liang
David Liang

Reputation: 21526

Colors of the nodes

There is a whole section that talks about the colors of the Forced Directed Tree: https://www.amcharts.com/docs/v4/chart-types/force-directed/#Colors

You can either set the colors' source from data or the colors list. I'm not sure if you meant to just use one color for everything. If that's the case,

let chart = am4core.createFromConfig({
    series: [{
        type: 'ForceDirectedSeries',
        ...,
        colors: {
            list: [
                '#25BEC1'
            ],
            reuse: true
        },
        ...
    }],
    data: ...
}, 'chart', am4plugins_forceDirected.ForceDirectedTree);

enter image description here

demo: https://jsfiddle.net/davidliang2008/q42c8u5w/23/


Text colors of the nodes

To change the text color of the labels, you can set the color to the fill property of the label object:

let chart = am4core.createFromConfig({
    series: [{
        type: 'ForceDirectedSeries',
        ...,
        nodes: {
            label: {
                fill: '#0B3D49',
                text: '{name}'
            }
        },
        ...
    }],
    data: ...
}, 'chart', am4plugins_forceDirected.ForceDirectedTree);

enter image description here

demo: https://jsfiddle.net/davidliang2008/q42c8u5w/25/

Upvotes: 1

Related Questions