ApexCharts

Get charts to display random values

by Neil Daley

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>
<button type="button">Update series</button>

CSS

button {
  padding: 10px;
  color: white;
  background-color: #0d6efd;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  color: black;
  background-color: #0dcaf0;
}

JavaScript

let options = {
  series: [{
    name: 'Series',
    data: [1, 7, 3]
  }],
  chart: {
    type: 'line',
    height: 350
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['Category 1', 'Category 2', 'Category 3']
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

function getRandomNumber() {
  return Math.floor(Math.random() * 10);
}

document.querySelector('button').addEventListener('click', () => {
  chart.updateSeries([{
    data: [getRandomNumber(), getRandomNumber(), getRandomNumber()]
  }])
});