Grid over Series

Chart grid belongs in the back - behind all other chart elements. However sometimes, you might want to take them the front seat. This short tutorial will show you how.

Moving plot container to back

The reason why grid lines appear behind series is that they belong to axes and containers that hold axes are usually placed behind ones that hold series.

So, in order to bring grid/axis to front we just need to move series container to back.

The chart's property that holds reference to a container with all the series is seriesContainer and its property, responsible for position is zIndex.

The smaller the zIndex the fartehr behind elements an object will be.

If we want to move an element all the way back, we can set it to -1 (minus one).

Let's try that on a basic chart.

chart.seriesContainer.zIndex = -1

chart.seriesContainer.zIndex = -1

{
  // ...
  "seriesContainer": {
    "zIndex": -1
  }
}

See the Pen amCharts 4: Grid over series by amCharts (@amcharts) on CodePen.24419