JSFiddle - React, Tailwind, and code Playground

Basic Column Chart

HTML

<script src="https://cdn.canvasjs.com/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", {
  animationEnabled: true,
  exportEnabled: true,
  title: {
    text: "Levies & Expiration Dates"
  },
  axisX: {
    title: "Levy Name"
  },
  axisY: {
    title: "Years In Force",
    scaleBreaks: {
      type: "wavy",
      customBreaks: [{
        startValue: 2035,
        endValue: 2095
      }]
    },
    valueFormatString: "####"
  },
  data: [{
    type: "rangeBar",
    showInLegend: true,
    indexLabel: "{y[#index]}",
    yValueFormatString: "####",
    legendText: "Levies with a 2100 end date never expire",
    toolTipContent: "<b>{label}</b>: {y[0]} to {y[1]}",
    dataPoints: [
      { x: 10, y:[1978, 2100], label: "1978 Levy" },
      { x: 20, y:[1984, 2100], label: "1984 Levy" },
      { x: 30, y:[1988, 2100], label: "1988 Levy" },
      { x: 40, y:[1993, 2100], label: "1993 Levy" },
      { x: 50, y:[2000, 2030], label: "Bond Renovations" },
      { x: 60, y:[2004, 2100], label: "2004 Levy" },
      { x: 70, y:[2008, 2030], label: "Bond Stadium" },
      { x: 80, y:[2011, 2100], label: "2011 Levy " },
      { x: 90, y:[2019, 2100], label: "2019 Levy" },
      { x: 100, y:[2026, 2100], label: "Issue 10" }
    ]
  }]
});

chart.render();