Search code examples
javascriptamchartsamcharts5

How do I make two series have different colors in amCharts


const createSeries = (data, color) => {
      series = am5xy.SmoothedXLineSeries.new(root, settings);
      series.set("stroke", color);
      series.bullets.push(() =>
        am5.Bullet.new(root, {
          locationY: 0,
          sprite: am5.Circle.new(root, {
            radius: 4,
            stroke: color,
            strokeWidth: 2,
            fill: am5.Color.brighten(color, -0.3),
          }),
        })
      );
      series.data.setAll(data);

      chart.series.push(series);
    };

Here is the function I use to populate the data. I want multiple series, each with their own color. However, when I set a color (set "stroke") it just sets it for all the series. How do I set the stroke of each series?


Solution

  • I found the issue. The settings object passed into SmoothXLineSeries.new contains a name field. I was using the same settings object for all series and thus the same names. This seems to be what causes changing one series' color to change the rest, as they are all treated as the same series. I've changed the code to define the settings object within the function and take name as a parameter. This allows each series to have a different color.