initialImage not displayed on top of trendLine in Amcharts

Question

I'm trying to put a image to the beginning of a trend line using the initialImage property of the trendline. But it doesn't come up to the beginning of the trend line.

Here is the code:

"trendLines": [ {
    "initialDate": "2017-10-26 18:52:13",
    "initialValue": 0,
    "lineColor": "#CC0000",
    "initialImage": {
      "svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
      "color": "#050",
      "width": 13,
      "height": 13,
      "rotation": 90,
      "offsetX": 4,
      "offsetY": -17,
      "balloonText": "2017-10-26 11:52:43"
    },
    "finalDate": "2017-10-26 18:52:13",
    "finalValue": 80
}],

Here is the DEMO.

Answer 1

initialImage is placed at the location defined by initialValue and initialDate, so it actually is being placed at the beginning. In your case, the beginning is at the bottom due to your initial values with respect to the final values. If you want it to appear on top of that particular trendline, set it as the finalImage instead.

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginTop": 0,
    "marginRight": 80,
    "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
    "dataProvider": [{
        "year": "2017-10-26 18:45:13",
        "value": 80
    }, {
        "year": "2017-10-26 18:46:13",
        "value": 2
    }, {
        "year": "2017-10-26 18:47:13",
        "value": 46
    }, {
        "year": "2017-10-26 18:48:13",
        "value": 22
    }, {
        "year": "2017-10-26 18:49:13",
        "value": 50
    }, {
        "year": "2017-10-26 18:50:13",
        "value": 24
    }, {
        "year": "2017-10-26 18:51:13",
        "value": 7
    }, {
        "year": "2017-10-26 18:52:13",
        "value": 5
    }, {
        "year": "2017-10-26 18:53:13",
        "value": 47
    }, {
        "year": "2017-10-26 18:54:13",
        "value": 35
    }],
       "valueAxes": [{
        "axisAlpha": 0,
        "guides": [{
            "fillAlpha": 0.1,
            "fillColor": "#888888",
            "lineAlpha": 0,
            "toValue": 16,
            "value": 10
        }],
        "position": "left",
        "tickLength": 0
    }],
    "graphs": [{
        "balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
        "bullet": "round",
        "dashLength": 3,
        "colorField":"color",
        "valueField": "value"
    }],
    "trendLines": [ {
        
        "initialDate": "2017-10-26 18:52:13",
        "initialValue": 0,
        "lineColor": "#CC0000",
        "finalImage": {
          "svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
          "color": "#050",
          "width": 13,
          "height": 13,
          "rotation": 90,
          "offsetX": 4,
          "offsetY": -17,
          "balloonText": "2017-10-26 11:52:43"
        },
        "finalDate": "2017-10-26 18:52:13",
        "finalValue": 80
    }],
    "categoryField": "year",
   
   "categoryAxis": {
        "parseDates": true,
        "axisAlpha": 0,
        "gridAlpha": 0.1,
        "minorGridAlpha": 0.1,
        "minorGridEnabled": true,
        "minPeriod": "fff"
    }
});
/*
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
	chart.zoomChart();
}

function zoomChart(){
    chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}*/

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

<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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>