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>.

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/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataDateFormat": "YYYY-MM-DD HH:NN",
    "dataProvider": [{
        "date": "2012-01-01",
        "value": 8
    }, {
        "date": "2012-01-02",
        "value": 10
    }, {
        "date": "2012-01-03",
        "value": 12
    }, {
        "date": "2012-01-04",
        "value": 14
    }, {
        "date": "2012-01-05",
        "value": 11
    }, {
        "date": "2012-01-06",
        "value": 6
    }, {
        "date": "2012-01-07",
        "value": 7
    }],
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "left",
        "tickLength": 0,
        "includeGuidesInMinMax": true,
        "includeAllValues": true,
        "guides": [{
    "value": 25,
    "toValue": 25,
    "lineColor": "#CC0000",
    "fillAlpha": 1,
    "fillColor": "#CC0000",
    "label": "critical"
  }, {
    "value": 20,
    "toValue": 20,
    "lineColor": "#CCF000",
    "fillAlpha": 1,
    "fillColor": "#CCF000",
    "label": "normal"
  }, {
  	"value": -20,
    "lineColor": "blue",
    "fillAlpha": 1,
    "fillColor": "blue",
    "label": "negative"
  }]
    }],
    "graphs": [{
        "bullet": "none",
        "valueField": "value"
    }],
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "axisAlpha": 0,
        "gridAlpha": 0.1,
    },
 		"trendLines": [
		{
			"initialValue": 1,
			"finalValue": 11,
      "balloonText": "12315123"
		}
	]
});