How to render striplines behind the series in chart

Description

This article describes how to render striplines behind the series in chart

Solution

Essential EJ2 chart supports rendering stripline behind the series by using zIndex property of stripline. This property takes values as Behind and Over. By default, stripline appears behind the series.

The following steps explains how to render striplines behind the series in chart. To know more about striplines, you can refer 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.