JSFiddle - React, Tailwind, and code Playground

by Harmonix Motion

HTML

<canvas id="voe_trend_three_months" width="300" height="150"></canvas>
<button id="voe_trend_six_months">Last 6 months</button>
<button id="voe_trend_one_year">Last 1 year</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

JavaScript

function plotVoeTrend() {
 var ctx = document.getElementById("voe_trend_three_months");
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['VOE Last 3 months'],
        datasets: [{
          label: 'VOE Trend',
          data: [8],
          backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
      },
      options: {
      legend: { display: false },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
}

plotVoeTrend();



function voeTrendSixMonths(chart) {
$('#voe_trend_six_months').on('click', function (e) {
        e.preventDefault();
       
       chart.options = {
        responsive: true,
        title: {
            display: true,
            text: 'Chart.js'
        },
        scales: {
            xAxes: [{
                display: true
            }],
            yAxes: [{
                display: true
            }]
        }
    };
    chart.update();
       });
       }

voeTrendSixMonths('voe_trend_three_months');