JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<button class="toggle-chart">1</button>
<button class="toggle-chart">2</button>
<button class="toggle-chart">3</button>

<canvas id="chart"></canvas>

JavaScript

const config = [
  {
    type: 'bar',
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          data: [65, 59, 30, 81, 56, 55, 40],
          backgroundColor: 'rgba(255, 0, 0, 0.4)'
        }
      ]
    }
  },
  {
    type: 'line',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        },	
        {
          label: '# of Points',
          data: [7, 11, 5, 8, 3, 7],
          borderWidth: 1
        }
      ]
    },
  },
  {
    type: 'radar',
    data: {
      labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
      datasets: [
        {
          label: "My First dataset",
          data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
          label: "My Second dataset",
          data: [28, 48, 40, 19, 96, 27, 100]
        }
      ]
    }
  }
];

let chart = null;

document.querySelectorAll('.toggle-chart').forEach(n => {
  n.addEventListener('click', () => toggleChart(n.textContent - 1));
});

toggleChart(0);

function toggleChart(index) {
  if (chart) {
    chart.destroy();
  }

  chart = new Chart('chart', config[index]);
}