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 Hayk Aghabekyan

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-01",
        "value": 8
    }, {
        "date": "2012-01-02",
        "color":"#CC0000",
        "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
    }, {
        "date": "2012-01-08",
        "value": 9
    }, {
        "date": "2012-01-09",
        "value": 13
    }, {
        "date": "2012-01-10",
        "value": 15
    }, {
        "date": "2012-01-11",
        "color":"#CC0000",
        "value": 19
    }, {
        "date": "2012-01-12",
        "value": 21
    }, {
        "date": "2012-01-13",
        "value": 22
    }, {
        "date": "2012-01-14",
        "value": 20
    }, {
        "date": "2012-01-15",
        "value": 18
    }, {
        "date": "2012-01-16",
        "value": 14,
        "labelText": "wsw"
    }, {
        "date": "2012-01-17",
        "color":"#CC0000",
        "value": 16
    }, {
        "date": "2012-01-18",
        "value": 18
    }],
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "left",
        "tickLength": 0,
        "labelFunction": function (value) {
					return value == 14 ? "qaq" : value;
        }
    }],
    "graphs": [{
        "bullet": "none",
        "valueField": "value"
    }],
    "trendLines": [{
        "finalDate": "2012-01-19 00:00",
        "finalValue": 14,
        "initialDate": "2012-01-01 00:00",
        "initialValue": 14,
        "lineColor": "red"
    }],
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "axisAlpha": 0,
        "gridAlpha": 0.1,
    }
});