Trend Lines

Trend lines are straight lines from one given category / value axis point to another. Trend lines are used to indicate the general changes over time, also as technical indicators in financial charts. In case you need a possibility to allow your users draw the trend lines, check <a href="/demos/drawing-trend-lines/">this Stock Chart example</a>. <h2>Infinite fills or lines</h2> For infinite lines or fills, crossing all plot area without start/end horizontally or vertically (notice the horizontal fill from 10 to 16), you can use <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a>.

by Rogério Saraceni

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
    
      "titles": [{
        "text": "DPO Evolution",
        "size": 15 }],
    
    "legend": {
        "position": "bottom",
        "spacing": -40,
        "data": [ 
        {"title": "Plan","color": "#CC0000"},
        {"title": "Actual","color": "#FD690E"},
         {"title": "Projection to score","color": "#FBD118"}
    ] 
  },  
    "marginRight":80,
    "autoMarginOffset":20,
    "dataDateFormat": "YYYY-MM",
    "dataProvider": [{
     
     "date": "2019-01",
        "Actual": 70
    }, {
        "date": "2019-02",
        "Actual": 68
    }, {
        "date": "2019-03",
        "Actual": 65
    }, {
        "date": "2019-04",
        "Actual": 70
    }, {
        "date": "2019-05",
        "Tend": 72
    }, {
        "date": "2019-06",
        "Tend": 65
    }, {
        "date": "2019-07",
        "Tend": 70
    }, {
        "date": "2019-08",
        "Tend": 72
    }, {
        "date": "2019-09",
        "Tend": 72
    }, {
        "date": "2019-10",
         "Tend": 65
    }, {
        "date": "2019-11",     
        "Tend": 70
        
    }, {
        "date": "2019-12",
        "Tend": 72
    }],
    "valueAxes": [{
        "axisAlpha": 0,
        "title": "Scores",
        //"labelFrequency": 2,
       // "maximum": 100,
            "guides": [{
            "fillAlpha": 0.1,
            "fillColor": "#888888",
            "lineAlpha": 0,
                  }],
        "position": "left",
        "tickLength": 0
    }],
    "graphs": [{
        "balloonText": "<span style='font-size:14px;'>Actual:[[value]]</span></b>",
        "bullet": "round",
       // "dashLength": 3,
        "colorField":"color",
        "valueField": "Actual",
        "labelText": [[""]]
    },
    
    {
        "balloonText": "<span style='font-size:14px;'>Actual:[[value]]</span></b>",
        "bullet": "round",
        "dashLength": 3,
        "colorField":"color",
       ...