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>

TypeScript

const DATE_FORMAT: string = 'DD.MM.YYYY';
const TIME_FORMAT: string = 'HH:mm:ss.ff';
const DATE_TIME_FORMAT: string = 'DD.MM.YYYY HH:mm:ss';

const chart = new CanvasJS.Chart("chartContainer", {
  exportFileName: 'Trend Chart',
  exportEnabled: true,
  zoomEnabled: false,
  zoomType: 'x',
  theme: 'white',
  toolTip: {
    shared: true,
    enabled: true,
    animationEnabled: false,
  },
  axisX: {
    labelFontSize: 14,
    gridThickness: 1,
    gridColor: '#9C9998',
    labelAutoFit: true
  },
  axisY: [{
    labelFontSize: 14,
    gridThickness: 1,
    gridColor: '#9C9998',
    interval: 7,
    lineColor: '#009933',
    labelFontColor: '#009933'
  }],
  axisY2: [{
    labelFontSize: 14,
    gridThickness: 1,
    gridColor: '#9C9998',
    lineColor: '#FF2C6F',
    labelFontColor: '#FF2C6F'
  },],
  backgroundColor: '#ffffff',
  data: [{
    axisYIndex: 1,
    lineColor: '#FF2C6F',
    markerType: 'circle',
    markerSize: 1,
    type: 'spline',
    showInLegend: false,
    lineThickness: 1,
    axisYType: 'secondary',
    //axisYType: 'primary',
    lineDashType: null,
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55},
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14}
    ]
  }, {
    axisYIndex: 2,
    lineColor: '#009933',
    markerType: 'circle',
    markerSize: 1,
    type: 'spline',
    showInLegend: false,
    lineThickness: 1,
    //axisYType: 'secondary',
    axisYType: 'primary',
    lineDashType: null,

    dataPoints: [
      { x: 20, y: 71},
      { x: 10, y: 55},
      { x: 40, y: 50 },
      { x: 30, y: 66 },
      { x: 60, y: 95 },
      { x: 50, y: 68 },
      { x: 80, y: 28 },
      { x: 90, y: 34 },
      { x: 70, y: 15}
    ]
  }]
});

chart.render();