ApexChart

Chart

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div class="col-md-6" 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;
    padding: 10px;
}

JavaScript

var options = {
  chart: {
    type: "bar"
  },
  series: [
    {
      name: "Abertos",
      data: [30]
    },
    {
      name: "Finalizados",
      data: [40]
    },
    {
      name: "Cancelados",
      data: [7]
    }
  ],
  xaxis: {
    categories: ["Status"]
  },
  
  colors: ['#E3B421', '#1AB83F', '#CD3E3C']

};

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

chart.render();