JSFiddle - React, Tailwind, and code Playground

by Harmonix Motion

HTML

<canvas id="voe_trend_three_months" width="400" height="150"></canvas>
<button id="voe_trend_six_months">Last 6 months</button>
<button id="voe_trend_one_year">Last 1 year</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

JavaScript

const ctx = document.getElementById('voe_trend_three_months').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['VOE Trend Last 3 Months'],
            datasets: [{
                data: [8],
                 backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
                ],
                
            }],
           
        },
        
         options: {
      legend: { display: false },
      responsive: false,
      }
        
        
    });

    // using jQuery with es5 syntax
    $('#voe_trend_six_months').on('click', function (e) {
        e.preventDefault();
        chart.config.data = {
            labels: ['Voe Data last 6 months'],
            datasets: [{
                data: [9],
                backgroundColor: [
                'rgba(54, 162, 235, 0.2)',
                ],
            }],
        }
        chart.update();

    });
    
    
    
    
    
    // using jQuery with es5 syntax
    $('#voe_trend_one_year').on('click', function (e) {
        e.preventDefault();
        chart.config.data = {
            labels: ['Voe Data last 6 months'],
            datasets: [{
                data: [91],
                backgroundColor: [
                'rgba(54, 162, 235, 0.2)',
                ],
            }],
        }
        chart.update();

    });