Line Chart with stripLines as background - CanvasJS JavaScript Charts

Line Chart with stripLines as background - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
    axisY: {
      gridThickness: 0,
      interval: .4,
      minimum: -4.4,
      maximum: 0.1,
      stripLines: [
        {
          startValue: 0.1,
          endValue: -2,
          color: "#0066ff",
        },
        {
          startValue: -2,
          endValue: -4.4,
          color: "#33FF64",
        }
      ],
    },
      data: [
      {
        type: "line",
        markerSize: 15,
        dataPoints: [
        { x: 10, y: -4.3 },
        { x: 20, y: -4.2 },
        { x: 30, y: -4.1 },
        { x: 40, y: -4.0 },
        { x: 50, y: -3.9 },
        { x: 60, y: -3.8 },
        { x: 70, y: 0 },
        { x: 80, y: -3.5 },
        { x: 90, y: -3.2 }
        ]
      }
      ]
    });

 chart.render();