amcharts / amcharts5

The newest, fastest, and most advanced amCharts charting library for JavaScript and TypeScript apps.
Other
358 stars 95 forks source link

Dynamically change chart serie fill color #1308

Closed canesen7 closed 10 months ago

canesen7 commented 10 months ago

Hi, I created a Pyramid Chart with React Class Based Component. When component mount, I can create chart without problem. When component did mount, I create chart and I push the series to the chart.

  measure1.bullets.push(function () {
    return am5.Bullet.new(root, {
      sprite: am5.Label.new(root, {
        centerX: am5.p50,
        x: am5.p50,
        centerY: am5.p50,
        text: "{formattedOther}",
        fill: am5.color(0x000),
        fontSize: newState.config.valuesOnBarFontSize,
        populateText: true,
      })
    });
  });

like this.

But when I change palette config, I need to only change the bar's fill color. So I set the chart to the state and when config change, I read this code

this.state.chart.series._values[0].set("fill", am5color("anycolor")

But this is not work. I think maybe state can't protect chart ref. So I set the chart this object like this.

this.chart = null

...plugin create functions

this.chart = chart

and when my config change triggers this:

this.chart.series._values[0].set("fill", am5color("anycolor")

and this is not work too. After that, I think maybe I need to set chart.serie to state or this object. When I set measure1 a state or this object this is not work too. Basically, how can I change the measure1 fill value with state or this object. I need this because I don't want to rerender all plugin processes when a basic state change.

martynasma commented 10 months ago

You can set it like this:

series.dataItems[1].get("slice").set("fill", am5.color(0xff0000))

This will set the color of the second slice of the series.

canesen7 commented 10 months ago

Marty, hello again. I tried to

series.dataItems[1].get("slice").set("fill", am5.color(0xff0000))

But I push the column series to chart.series. So it is not "slice" but I don't know what it is. How can I find which parameter I must get for fill the column.

canesen7 commented 10 months ago

I solved my problem with

chart.series._values[1]._settings.fill = coloursList[0]

Thanks Marty...