Am charts 4 LineSeries legend colors doesn't match graph colors

Question

I have created a series chart using AmCharts version 4. I have a red line that represents created cases and green line that represent closed cases. However my legend is blue for both lines. How can I get the legend color to fit the graph color?

I added color in the data section.

My code is here:

<script>
am4core.ready(function() {
    var chart = am4core.create("chartdiv_cases_created_per_day", am4charts.XYChart);
    chart.data = [
    {
        "x": "Mon 1",
        "created_value": 1,
        "created_color": am4core.color("red"),
        "closed_value": 2,
        "closed_color": am4core.color("green")
    },
    {
        "x": "Tue 2",
        "created_value": 4,
        "created_color": am4core.color("red"),
        "closed_value": 2,
        "closed_color": am4core.color("green")
    },
    {
        "x": "Wed 3",
        "created_value": 3,
        "created_color": am4core.color("red"),
        "closed_value": 1,
        "closed_color": am4core.color("green")
    }
    ];
    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "x";
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());


    // Create series
    var series1 = chart.series.push(new am4charts.LineSeries());
    series1.dataFields.valueY = "created_value";
    series1.dataFields.categoryX = "x";
    series1.name = "Opprettet";
    series1.propertyFields.stroke = "created_color";
    series1.propertyFields.fill = "created_color";
    series1.strokeWidth = 1;
    series1.tooltipText = "Opprettet: {valueY}";

    // Create series 2
    var series2 = chart.series.push(new am4charts.LineSeries());
    series2.dataFields.valueY = "closed_value";
    series2.dataFields.categoryX = "x";
    series2.name = "Lukket";
    series2.propertyFields.stroke = "closed_color";
    series2.propertyFields.fill = "closed_color";
    series2.tooltipText = "Lukket: {valueY}";

    // Legend
    chart.legend = new am4charts.Legend();
    chart.legend.labels.template.text = "[bold {color}]{name}[/]";


    // Tooltips
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.snapToSeries = series;
    chart.cursor.xAxis = valueAxis;



}); // end am4core.ready()
</script>

<div id="chartdiv_cases_created_per_day" style="height: 300px;"></div>

Answer 1

Seems like you're combining data and js-objects. That might be what you want but I would perhaps suggest that you separate them, as it would make it easier that day you need to add data from server.

There is no need to include the color for each point. Most likely you want the same color for all the points in the same series.

That you can achieve like this:

  series.stroke = am4core.color(color);
  series.fill = am4core.color(color);

You have already named the series in the data as created_value and closed_value so we can easily make a function that adds the data, names the series' and colorize them :)

In which turn you just call

createSeries("created_value", "Created", "red");
createSeries("closed_value", "Closed", "green");

Full code (I'm sure there's more refactoring you could do):

am4core.useTheme(am4themes_animated); // Not needed, but looks cool ;)

// Create chart instance
var chart = am4core.create("chartdiv_cases_created_per_day", am4charts.XYChart);

// Add data
chart.data = [{
  "date": new Date(2018, 0, 1),
  "created_value": 362,
  "closed_value": 699
}, {
  "date": new Date(2018, 0, 2),
  "created_value": 269,
  "closed_value": 450
}, {
  "date": new Date(2018, 0, 3),
  "created_value": 700,
  "closed_value": 358
}, {
  "date": new Date(2018, 0, 4),
  "created_value": 490,
  "closed_value": 367
}, {
  "date": new Date(2018, 0, 5),
  "created_value": 500,
  "closed_value": 485
}, {
  "date": new Date(2018, 0, 6),
  "created_value": 550,
  "closed_value": 354
}, {
  "date": new Date(2018, 0, 7),
  "created_value": 420,
  "closed_value": 350,
}];

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
function createSeries(field, name, color) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "date";
  series.name = name;
  series.tooltipText = "{dateX}: [b]{valueY}[/]";
  series.strokeWidth = 2;
  series.stroke = am4core.color(color);
  series.fill = am4core.color(color);
  
  // Set up tooltip
  series.adapter.add("tooltipText", function(ev) {
    var text = "[bold]{dateX}[/]\n"
    chart.series.each(function(item) {
      text += "[" + item.stroke.hex + "]●[/] " + item.name + ": {" + item.dataFields.valueY + "}\n";
    });
    return text;
  });
  
  series.tooltip.getFillFromObject = false;
  series.tooltip.background.fill = am4core.color("#fff");
  series.tooltip.label.fill = am4core.color("#00");
  
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  bullet.circle.stroke = am4core.color("#fff");
  bullet.circle.strokeWidth = 2;
  
  return series;
}

createSeries("created_value", "Åpnet", "red");
createSeries("closed_value", "Lukket", "green");

chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
chart.cursor.maxTooltipDistance = 0;

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv_cases_created_per_day"></div>