Customize AMCharts legend color

Question

I want to use line chart from AMCharts and I want to customize its line colors and legend.

I could change line colors but the legend has difference colors. I am new to AMCharts. Can you tell me how can I customize it?

If you need more information please comment it my JS file:

am4core.useTheme(am4themes_animated);

    var base = document.createElement("base");
    base.href = "/foo";
    document.head.appendChild(base);

    setTimeout(function () {
        console.log(document.body.baseURI, document.body.baseURI, location.href, document.location.href, window.frameElement, document.documentURI);
      }, 5000);



     var chart = am4core.create("basediv", am4charts.XYChart);
chart.dataSource.url = "http://c117d4d4.ngrok.io/test/amcharts4/dash/linechartdata.php";
        chart.colors.step = 2;
        chart.legend = new am4charts.Legend();
        chart.legend.useDefaultMarker = true;
    //chart.legend = new am4charts.Legend();
    //chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;
    var marker = chart.legend.markers.template.children.getIndex(0);
    marker.cornerRadius(12, 12, 12, 12);
    marker.strokeWidth = 2;
    marker.strokeOpacity = 1;
    marker.stroke="#f00";

    // Set input format for the dates
    chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    // Create series
    var series1 = chart.series.push(new am4charts.LineSeries());
    series1.dataFields.valueY = "value1";
    series1.dataFields.dateX = "date";
    series1.tooltipText = "{value1}"
    series1.strokeWidth = 2;
    series1.minBulletDistance = 15;
    series1.stroke=am4core.color("#ff0");
    // Drop-shaped tooltips
    series1.tooltip.background.cornerRadius = 20;
    series1.tooltip.background.strokeOpacity = 0;
    series1.tooltip.pointerOrientation = "vertical";
    series1.tooltip.label.minWidth = 40;
    series1.tooltip.label.minHeight = 40;
    series1.tooltip.label.textAlign = "middle";
    series1.tooltip.label.textValign = "middle";
    //series1.color="#f00";
    //series1.dataFields.color="#f00";
    //series1.color="#ff0000";
    // Make bullets grow on hover
    var bullet1 = series1.bullets.push(new am4charts.CircleBullet());
    bullet1.circle.strokeWidth = 2;
    bullet1.circle.radius = 4;
    bullet1.circle.fill = am4core.color("#f0f");//مشخص نشد

    var bullethover1 = bullet1.states.create("hover");
    bullethover1.properties.scale = 1.3;
    //کار مننننننننننن
    series1.name = " اتوبوس";
    //series1.lineColor="#f00";
    var series2 = chart.series.push(series1.clone());
    series2.name = " مینی بوس";
    series2.dataFields.valueY = "value2";
    series2.dataFields.dateX = "date";
    series2.tooltipText = "{value2}"
    series2.strokeWidth = 2;
    series2.minBulletDistance = 15;

    // Drop-shaped tooltipsکاررررر منننن 
    series2.tooltip.background.cornerRadius = 20;
    series2.tooltip.background.strokeOpacity = 0;
    series2.tooltip.pointerOrientation = "vertical";
    series2.tooltip.label.minWidth = 40;
    series2.tooltip.label.minHeight = 40;
    series2.tooltip.label.textAlign = "middle";
    series2.tooltip.label.textValign = "middle";
    series2.fill = chart.colors.next();
    //series2.stroke = series2.fill;
    series2.stroke=am4core.color("#f0f");// رنگ خط دوم
    // Make bullets grow on hover
    var bullet2 = series2.bullets.push(new am4charts.CircleBullet());
    bullet2.circle.strokeWidth = 2;
    bullet2.circle.radius = 4;
    bullet2.circle.fill = am4core.color("#f00");

    var bullethover2 = bullet2.states.create("hover");
    bullethover2.properties.scale = 1.3;
    //                      خط سوم==============================================
    var series3 = chart.series.push(series1.clone());
    series3.name = " سواری ";
    series3.dataFields.valueY = "value3";
    series3.dataFields.dateX = "date";
    series3.tooltipText = "{value3}"
    series3.strokeWidth = 2;
    series3.minBulletDistance = 15;

    // Drop-shaped tooltipsکاررررر منننن 
    series3.tooltip.background.cornerRadius = 20;
    series3.tooltip.background.strokeOpacity = 0;
    series3.tooltip.pointerOrientation = "vertical";
    series3.tooltip.label.minWidth = 40;
    series3.tooltip.label.minHeight = 40;
    series3.tooltip.label.textAlign = "middle";
    series3.tooltip.label.textValign = "middle";
    series3.fill = chart.colors.next();
    //series3.stroke = series3.fill;
    series3.stroke ="#fff";
    // Make bullets grow on hover
    var bullet3 = series3.bullets.push(new am4charts.CircleBullet());
    bullet3.circle.strokeWidth = 2;
    bullet3.circle.radius = 4;
    bullet3.circle.fill = am4core.color("#0f0");

    var bullethover3 = bullet3.states.create("hover");
    bullethover3.properties.scale = 1.3;
    //----------------------------------------------------------
    // Make a panning cursor
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.behavior = "panXY";
    chart.cursor.xAxis = dateAxis;
    chart.cursor.snapToSeries = series;

    // Create vertical scrollbar and place it before the value axis
    chart.scrollbarY = new am4core.Scrollbar();
    chart.scrollbarY.parent = chart.leftAxesContainer;
    chart.scrollbarY.toBack();

    // Create a horizontal scrollbar with previe and place it underneath the date axis
    chart.scrollbarX = new am4charts.XYChartScrollbar();
    chart.scrollbarX.series.push(series);
    chart.scrollbarX.parent = chart.bottomAxesContainer;

    chart.events.on("ready", function () {
      dateAxis.zoom({start:0.79, end:1});
    });
    var i = 0;
    dateAxis.events.on('rangechangeended', function (ev) {
        i++;
      history.replaceState('', {}, '/bar?i='+i+'#abc')
    });

I used this chart in an HTML file and the output of the chart is:

Answer 1

This answer might be late but here goes. For the line series,providing just a stroke color updates the color on the line graph but not the legend.

Give it both a stroke and fill.

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