#44173: amCharts v4 - legend color

by notacouch

HTML

<!--
fork of:
https://jsfiddle.net/bosiljkakostic1/65echf0n/146/

for:
https://github.com/amcharts/amcharts4/issues/1128
-->

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

CSS

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";

var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;

categories = [
  {
    name: "John",
  },
  {
    name: "Jane",
  },

  {
    name: "Peter",
  },
  {
    name: "Melania",
  },

  {
    name: "Donald",
  }
];
chart.data = categories;
data = [];
for (i=1 ; i <= 20; i++) {
var randomDate = '';
if( i < 10) {
	randomDate = "2018-01-0"+i;
} else {
	randomDate = "2018-01-"+i;
}
colors = ['black','red','blue',
'green','yellow','purple','grey','orange','brown','violet','black','red','blue','green','yellow','purple','grey','orange','brown','violet','cyan'];
data[i] = [
  {
    name: "John",
    toDate: randomDate, 
    config : {
    fill: colors[i],
    }
  },
  {
    name: "Jane",
    toDate: randomDate, 
    config : {
    fill: colors[i],
    },
  },  
  {
    name: "Peter",
    toDate: randomDate, 
    config : {
    fill: colors[i],
    }
  },  
  {
    name: "Melania",
    toDate: randomDate, 
    config : {
    fill: colors[i],
    }    
  },

  {
    name: "Donald",
    toDate: randomDate,    
    config : {
    fill: colors[i],
    }
  }
]
}
console.log(data[1]);
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.data = categories;
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;

categoryAxis.renderer.ticks.template.disabled = false;
categoryAxis.renderer.ticks.template.length = 15;
categoryAxis.renderer.ticks.template.strokeOpacity = 1;
categoryAxis.renderer.ticks.template.strokeWidth = 1;
categoryAxis.renderer.ticks.template.stroke = am4core.color("black");
categoryAxis.renderer.ticks.template.location = 0.5;
categoryAxis.renderer.line.strokeOpacity = 0.2;  
label1 =...