How to render striplines behind the series in chart

Description

This article explains how to render striplines behind the series in a chart

Solution

In EJ2 chart, rendering the stripline behind the series is supported by using the zIndex property of the stripline. This property accepts values such as Behind and Over. By default, the stripline appears behind the series.

The following steps explains how to render striplines behind the series in a chart. To know more about striplines, you can refer to the UG document.

Step 1: Create the chart component with column series

let chart: Chart = new Chart({
  series: [
    {
      dataSource: chartData,
      xName: "x",
      yName: "y",
      type: "Column"
    }
  ]
});
chart.appendTo("#element");
 

Step 2:  Add the stripline to the axis and set the zIndex to Behind to render stripline below the series.

let chart: Chart = new Chart({
    primaryXAxis: {
      stripLines: [
        { start: 0, end: 2, zIndex: "Behind", color: "#FFC0CB" },
        { start: 2, end: 4, color: "#008000" },
        { start: 4, end: 6, color: "#0000A0" },
        { start: 6, end: 8, color: "#ffff00" },
        { start: 8, end: 11, color: "#FF0000" }
      ]
    }
  });
  chart.appendTo("#element");
 

Output

                              Render striplines behind the series in chart 

You can check the demo sample from this link.