Axis Grid and Ranges over Series

The order of the universe is this: axis elements like grid and ranges go under series. This short tutorial will explain how to change that order.

Since there’s no setting for that, the only way to do that is to move seriesContainer to back:

TypeScript

chart.seriesContainer.zIndex = -1;

JavaScript

chart.seriesContainer.zIndex = -1;

JSON

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

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Axis grid over seriesaxis-grid-over-series