Search code examples
javascriptlistamcharts4

amCharts4: Color of columns in chart keeps changing every time I try to refresh the data being shown


So I'm working on a website where data can be viewed on a column chart, and the amount of data presented on the chart is dependent on what settings are selected in a "filter" panel. Whenever the settings in the filter change, the data on the graph is first cleared of everything, and then added back in according to the new settings.

I'm trying to replace the column chart I previously used with the Google Charts API, and am now using amCharts4 to generate the chart.

Everything is working fine so far, except for one issue. Whenever the graph resets, the colors on each series changes. I'm assuming the colors picked for each new series added are in order within the theme's spectrum. Every time the chart is reset, the color of the first series is the one right after the last series of the previous version of the chart.

The first version of the chart, before any filter settings are changed.

The second version of the chart, after I change a setting in the filter.

If I keep changing the settings, the colors will just keep going through the spectrum, through green, yellow, orange etc.

I'm assuming the previous series are saved somewhere, which is why the colors aren't being reset. But in the code I wrote to clear the series', I thought I was disposing them:

while (chart.series.length > 0) {
    chart.series.removeIndex(0).dispose();
}

Is there a way to retain the color of the first version of the graph? That should be secondary to making sure the previous series are successfully deleted before the graph is filled again.

I'm very much new to using amCharts4, so any help would be appreciated. Thanks!


Solution

  • You can call reset() on the chart's ColorSet object (colors) before you re-create your series to start from the first color in the theme again.

    chart.colors.reset();