JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://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", {
	axisX: {
  	interval: 1
  },
  data: [{				
    dataPoints: [
      { label: "Attribute 1", x: 1, y: 1.25 },
      { label: "Attribute 2", x: 2, y: 3 },
      { label: "Attribute 3", x: 3, y: 3.5 },
      { label: "Attribute 4", x: 4, y: 3.5 },
      { label: "Attribute 5", x: 5, y: 4.5 }
    ]
  },{
  	type: "stepLine",
    dataPoints: [
      { x: 0.5, y: 1.57 },
      { x: 1.5, y: 1.57 },
      { x: 1.5, y: 2.89 },
      { x: 2.5, y: 2.89 },
      { x: 2.5, y: 3.25 },
      { x: 3.5, y: 3.25 },
      { x: 3.5, y: 3.65 },
      { x: 4.5, y: 3.65 },
      { x: 4.5, y: 4.75 },
      { x: 5.5, y: 4.75 }
    ]
  }]
});

chart.render();