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", {
    theme: 'light2',
    animationEnabled: true,
    exportEnabled: true,
    exportFileName: 'capacidadeProdutividade',
    zoomEnabled: true,
    title:{
      text: 'Produtividade na Linha'
    },
    axisY: {
      includeZero: true,
      title: 'Produtividade',
      suffix: 'hh/hp',
      yValueFormatString: "#0.000"
    },
    axisX: {
      labelAngle: 90,
      interval: 1
    },
    toolTip: {
      shared: 'true'
    },
    legend: {
      cursor: 'pointer'
    },
    data: [{
      type: "column",
      name: "Produtividade",
      visible: true,
      showInLegend: true,
      dataPoints: [
        {label: '01/09/2018', y: 1.502, indexLabel: '{y}'},
        {label: '02/09/2018', y: 0, indexLabel: '{y}'},
        {label: '03/09/2018', y: 3.103, indexLabel: '{y}'},
        {label: '04/09/2018', y: 2.799, indexLabel: '{y}'},
        {label: '05/09/2018', y: 2.282, indexLabel: '{y}'},
        {label: '06/09/2018', y: 4.156, indexLabel: '{y}'},
        {label: '07/09/2018', y: 0, indexLabel: '{y}'},
        {label: '08/09/2018', y: 2.875, indexLabel: '{y}'},
        {label: '09/09/2018', y: 0, indexLabel: '{y}'}
      ]
    }, {
      type: "spline",
      name: "Meta",
      markerType: "none",
      lineDashType: "solid",
      visible: true,
      showInLegend: true,
      dataPoints: [
        {y: 1},
        {y: 1},
        {y: 1},
        {y: 1},
        {y: 1},
        {y: 1},
        {y: 1},
        {y: 1},
        {y: 1}
      ]
    }]
  });

chart.render();