title: Customize AMCharts legend color
body: <p>I want to use line chart from AMCharts and I want to customize its line colors and legend.</p>
  
  <p>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? </p>
  
  <p>If you need more information please comment it my JS file:</p>
  
  <pre><code>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')
      });
  </code></pre>
  
  <p>I used this chart in an HTML file and the output of the chart is:</p>
  
  <p><a href="https://i.stack.imgur.com/NumGI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NumGI.jpg" alt="image"></a></p>