Amcharts Trendline stack behind

Question

I am using Trend line in amstockcharts. They are fine except that they always stack on top of other graphs. Is it possible to set it stack behind ?

@Jerson did my answer help, or do you need another solution? — gerric
Yes it work ! Fantastic! It also work for stockChart by changing chart.panel[0].stockGraph[i]. However, what is the meaning of set.D.container ? where can i find more information on that ? thanks — Jerson
The "D" object is an internal object for drawing of the chart. It contains for example the reference to the container (the svg). I think this is not officially documented, as it is only for internal purposes. See my updated answer for a simplified approach. (which actually uses set.D.container) — gerric

gerric gerric · Accepted Answer · 2015-07-27T06:46:51

In SVG there is no z-Index like in HTML. The last appended element is drawn on top of the others. So while there is no AmCharts feature supporting your request, you could manually redraw all Graphs, so that they're on top of the Trendlines again.

To do this, use 'appendChild()' to reappend the element to the SVG.
Now do this everytime the chart is drawn. For this we need an Event Listener for 'drawn' (called when resizing the chart) and one for 'zoomed' (obvious i think).

This is the resulting code:

chart.addListener("zoomed", drawGraphsOnTop);
chart.addListener("drawn", drawGraphsOnTop);

function drawGraphsOnTop() {
    for (var i = 0; i < chart.graphs.length; i++) {
        chart.graphs[i].set.D.container.appendChild(chart.graphs[i].set.node);
    }
}

I've also prepared a fiddle for that.

Edit:
I found a better way to do this. (Updated fiddle)

function drawGraphsOnTop() {
    chart.graphsSet.toFront();
}

(Actually you could also do chart.trendlinesSet.toBack() which would fit to your question better, but then the Trendlines are even behind the grid)

Explanation:
The chart is consisting of multiple "sets". For each type of component there's a set (e.g. GraphsSet, AxesSet, CursorSet,...) and each individual component has its own set (e.g. graph.set).
You can call .toFront() or .toBack() for each to change their layer. Note, that for the individual set this only changes the layer inside the types' set. (It means you e.g. set one graph on top of all other graphs but not on top of all other chart elements, for this you must move the whole graphsset)

Amcharts Trendline stack behind

1 Answers