JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Showing Axis Labels at non-linear interval using StripLines & ScaleBreak"
    },
    axisY: {
      tickColor: "transparent",
      gridThickness: 0,
      labelFormatter: function() {
        return "";
      },
      stripLines: [{
        label: "10-20",
        labelPlacement: "outside",
        labelBackgroundColor: "transparent",
        color: "#DEDEDE",
        labelFontColor: "#000",
        value: 20,
      }, {
        label: "30-50",
        labelPlacement: "outside",
        labelBackgroundColor: "transparent",
        color: "#DEDEDE",
        labelFontColor: "#000",
        value: 50,
      }, {
        label: "70-75",
        labelPlacement: "outside",
        labelBackgroundColor: "transparent",
        color: "#DEDEDE",
        labelFontColor: "#000",
        value: 75,
      }, {
        label: "80-90",
        labelPlacement: "outside",
        labelBackgroundColor: "transparent",
        color: "#DEDEDE",
        labelFontColor: "#000",
        value: 90
      }],
      scaleBreaks: {
        spacing: 0,
        lineThickness: 0,
        customBreaks: [{
          startValue: 21,
          endValue: 30
        }, {
          startValue: 51,
          endValue: 70
        }, {
          startValue: 76,
          endValue: 80
        }, {
          startValue: 91,
          endValue: 100
        }]
      }
    },
    data: [{
      type: "line",
      dataPoints: [
        { y: 10 },
        { y: 20 },
        { y: 40 },
        { y: 50 },
        { y: 70 },
        { y: 80 },
        { y: 90 },
        { y: 101}
      ]
    }]
  });
  chart.render();
}