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: "Multi-series Column Chart with space between columns"
      },  
      axisX: {
      	interval: 10,
      	stripLines: [
        	{
          	value: 10,
            color: "white",
            showOnTop: true
          },
          {
          	value: 20,
            color: "white",
            showOnTop: true
          },
          {
          	value: 30,
            color: "white",
            showOnTop: true
          },
          {
          	value: 40,
            color: "white",
            showOnTop: true
          },
          {
          	value: 50,
            color: "white",
            showOnTop: true
          },
          
        ]
      },
      axisY: {
      	gridColor: "#EAECEE"
      },
      data: [{        
        type: "column",
        dataPoints: [
        { x: 10, y: 171 },
        { x: 20, y: 155 },
        { x: 30, y: 150 },
        { x: 40, y: 165 },
        { x: 50, y: 195 }
        ]
      },
      {        
        type: "column",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 }
        ]
      }        
      ]
    });

    chart.render();
  }