JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<div id="chart">
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
  font-family: Roboto, sans-serif;
}

#chart {
  max-width: 650px;
  margin: 35px auto;
}

JavaScript

var options = {
  chart: {
    type: "bar"
  },
  series: [
    {
      name: "Abertos",
      data: [30]
    },
    {
      name: "Finalizados",
      data: [40]
    },
    {
      name: "Cancelados",
      data: [7]
    }
  ],
  xaxis: {
    categories: ["Status"]
  },
  
  colors: ['#546E7A', '#E91E63', '#ff00ee']

};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();