title: Chart.js Uncaught TypeError: Cannot read properties of undefined (reading 'options')
body: <p>Edited the Details as I found a solution to display the Chart with the right datasets. Code Below will show the Two Charts, which visually looks great but buttons on the 1st Chart are working great but the buttons on 2nd chart are not working.</p>
  <p>Please check my code and Run the code Snippet and see by clicking on Today Monthly Yearly Buttons on both 1st and 2nd chart and you will find the error.</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read properties of undefined (reading
  'options')
  at timeFrame2 (Index:1825:41)
  at HTMLButtonElement.onclick (Index:708:165)</p>
  </blockquote>
  <p><strong>Heres the Code:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//for Miscellaneous
  const day = [{
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 18
    },
    {
      x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
      y: 6
    },
    {
      x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
      y: 9
    },
    {
      x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
      y: 3
    },
    {
      x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
      y: 9
    },
  ];
  const month = [{
      x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
      y: 10
    },
    {
      x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 5
    },
    {
      x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
      y: 15
    },
    {
      x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
      y: 0
    },
    {
      x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
      y: 60
    },
    {
      x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
      y: 55
    },
    {
      x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
      y: 3
    },
    {
      x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
      y: 10
    },
  ];
  const year = [{
      x: '2018',
      y: '15'
    },
    {
      x: '2019',
      y: '5'
    },
    {
      x: '2020',
      y: '25'
    },
    {
      x: '2021',
      y: '50'
    },
    {
      x: '2022',
      y: '40'
    },
  ];
  //for Administrative
  const day1 = [{
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
      y: 18
    },
    {
      x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
      y: 9
    },
    {
      x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
      y: 6
    },
    {
      x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
      y: 3
    },
    {
      x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
      y: 7
    },
  ];
  const month1 = [{
      x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
      y: 0
    },
    {
      x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
      y: 13
    },
    {
      x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 4
    },
    {
      x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
      y: 50
    },
    {
      x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
      y: 20
    },
  ];
  const year1 = [{
      x: '2018',
      y: '40'
    },
    {
      x: '2019',
      y: '50'
    },
    {
      x: '2020',
      y: '25'
    },
    {
      x: '2021',
      y: '5'
    },
    {
      x: '2022',
      y: '15'
    },
  ];
  //for Payroll
  const day2 = [{
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 14
    },
    {
      x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
      y: 16
    },
    {
      x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
      y: 9
    },
    {
      x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
      y: 2
    },
    {
      x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
      y: 10
    },
    {
      x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
      y: 12
    },
  ];
  const month2 = [{
      x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
      y: 10
    },
    {
      x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
      y: 3
    },
    {
      x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
      y: 10
    },
    {
      x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
      y: 10
    },
    {
      x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
      y: 0
    },
    {
      x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
      y: 60
    },
  ];
  const year2 = [{
      x: '2018',
      y: '50'
    },
    {
      x: '2019',
      y: '40'
    },
    {
      x: '2020',
      y: '15'
    },
    {
      x: '2021',
      y: '25'
    },
    {
      x: '2022',
      y: '5'
    },
  ];
  //for PettyCash
  const day3 = [{
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 13
    },
    {
      x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
      y: 14
    },
    {
      x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
      y: 10
    },
    {
      x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
      y: 11
    },
    {
      x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
      y: 16
    },
    {
      x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
      y: 15
    },
    {
      x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
      y: 10
    },
  ];
  const month3 = [{
      x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
      y: 17
    },
    {
      x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
      y: 50
    },
    {
      x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
      y: 5
    },
    {
      x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
      y: 15
    },
    {
      x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
      y: 58
    },
    {
      x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
      y: 33
    },
    {
      x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
      y: 18
    },
  ];
  const year3 = [{
      x: '2018',
      y: '25'
    },
    {
      x: '2019',
      y: '5'
    },
    {
      x: '2020',
      y: '40'
    },
    {
      x: '2021',
      y: '50'
    },
    {
      x: '2022',
      y: '15'
    },
  ];
  
  
  //expense chart 2
  //for Expense chart 2
  const days = [{
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 18
    },
    {
      x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
      y: 6
    },
    {
      x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
      y: 9
    },
    {
      x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
      y: 3
    },
    {
      x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
      y: 9
    },
  ];
  const months = [{
      x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
      y: 10
    },
    {
      x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 5
    },
    {
      x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
      y: 15
    },
    {
      x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
      y: 0
    },
    {
      x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
      y: 60
    },
    {
      x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
      y: 55
    },
    {
      x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
      y: 3
    },
    {
      x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
      y: 10
    },
  ];
  const years = [{
      x: '2018',
      y: '15'
    },
    {
      x: '2019',
      y: '5'
    },
    {
      x: '2020',
      y: '25'
    },
    {
      x: '2021',
      y: '50'
    },
    {
      x: '2022',
      y: '40'
    },
  ];
  //for Income
  const days1 = [{
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
      y: 18
    },
    {
      x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
      y: 9
    },
    {
      x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
      y: 6
    },
    {
      x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
      y: 3
    },
    {
      x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
      y: 12
    },
    {
      x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
      y: 7
    },
  ];
  const months1 = [{
      x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
      y: 0
    },
    {
      x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
      y: 13
    },
    {
      x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
      y: 4
    },
    {
      x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
      y: 40
    },
    {
      x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
      y: 20
    },
    {
      x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
      y: 50
    },
    {
      x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
      y: 30
    },
    {
      x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
      y: 20
    },
  ];
  const years1 = [{
      x: '2018',
      y: '40'
    },
    {
      x: '2019',
      y: '50'
    },
    {
      x: '2020',
      y: '25'
    },
    {
      x: '2021',
      y: '5'
    },
    {
      x: '2022',
      y: '15'
    },
  ];
  
  //for Expense 1 chart
  // setup
  const data = {
    //labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
        label: 'Miscellaneous',
        data: day,
        backgroundColor: [
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7'
        ],
        borderColor: [
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7'
        ],
        borderWidth: 1
      },
      {
        label: 'Administrative',
        data: day1,
        backgroundColor: [
          '#01AF53',
          '#01AF53',
          '#01AF53',
          '#01AF53',
          '#01AF53',
          '#01AF53'
        ],
        borderColor: [
          '#01AF53',
          '#01AF53',
          '#01AF53',
          '#01AF53',
          '#01AF53',
          '#01AF53'
        ],
        borderWidth: 1
      },
      {
        label: 'Payroll',
        data: day2,
        backgroundColor: [
          '#8D68A6',
          '#8D68A6',
          '#8D68A6',
          '#8D68A6',
          '#8D68A6',
          '#8D68A6',
          '#8D68A6'
        ],
        borderColor: [
          '#8D68A6',
          '#8D68A6',
          '#8D68A6',
          '#8D68A6',
          '#8D68A6',
          '#8D68A6',
          '#8D68A6'
        ],
        borderWidth: 1
      },
      {
        label: 'Petty Cash',
        data: day3,
        backgroundColor: [
          '#FD85A9',
          '#FD85A9',
          '#FD85A9',
          '#FD85A9',
          '#FD85A9',
          '#FD85A9',
          '#FD85A9'
        ],
        borderColor: [
          '#FD85A9',
          '#FD85A9',
          '#FD85A9',
          '#FD85A9',
          '#FD85A9',
          '#FD85A9',
          '#FD85A9'
        ],
        borderWidth: 1
      }
    ]
  };
  
  
  // config
  
  var config = {
    type: 'line',
    data,
    options: {
      plugins: {
        legend: {
  
          display: true,
          labels: {
            boxWidth: 60,
            boxHeight: 20,
          }
        }
      },
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'day'
          }
        },
        y: {
          beginAtZero: true
        }
      }
    }
  };
  
  
  // render init block
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
  
  
  
  function timeFrame(period) {
    console.log(period.value);
    if (period.value == 'day') {
      myChart.config.options.scales.x.time.unit = period.value;
      myChart.config.data.datasets[0].data = day;
      myChart.config.data.datasets[1].data = day1;
      myChart.config.data.datasets[2].data = day2;
      myChart.config.data.datasets[3].data = day3;
    }
    if (period.value == 'month') {
      myChart.config.options.scales.x.time.unit = period.value;
      myChart.config.data.datasets[0].data = month;
      myChart.config.data.datasets[1].data = month1;
      myChart.config.data.datasets[2].data = month2;
      myChart.config.data.datasets[3].data = month3;
    }
    if (period.value == 'year') {
      myChart.config.options.scales.x.time.unit = period.value;
      myChart.config.data.datasets[0].data = year;
      myChart.config.data.datasets[1].data = year1;
      myChart.config.data.datasets[2].data = year2;
      myChart.config.data.datasets[3].data = year3;
    }
    myChart.update();
  };
  
  //expense chart 2
  //for Expense 1 chart
  // setup
  const dataExBar = {
    //labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
        label: 'Experience',
        data: days,
        backgroundColor: [
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7'
        ],
        borderColor: [
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7',
          '#23BAD7'
        ],
        borderWidth: 1,
        barThickness: 12
      },
      {
        label: 'Other Income',
        data: days1,
        backgroundColor: [
          '#00B153',
          '#00B153',
          '#00B153',
          '#00B153',
          '#00B153',
          '#00B153',
          '#00B153'
        ],
        borderColor: [
          '#00B153',
          '#00B153',
          '#00B153',
          '#00B153',
          '#00B153',
          '#00B153',
          '#00B153'
        ],
        borderWidth: 1,
        barThickness: 12
      }
    ]
  };
  
  
  // config
  
  var configExBar = {
    type: 'bar',
    data: dataExBar,
    options: {
      plugins: {
        legend: {
  
          display: true,
          labels: {
            boxWidth: 60,
            boxHeight: 20,
          }
        }
      },
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'day'
          }
        },
        y: {
          beginAtZero: true
        }
      }
    }
  };
  
  
  // render init block
  const ExpenseChartTwo = new Chart(
    document.getElementById('ExpenseChartTwo'),
    configExBar
  );
  
  
  
  function timeFrame2(period2) {
    console.log(period2.value);
    if (period2.value == 'days') {
      ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
      ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = days;
      ExpenseChartTwo.configExBar.dataExBar.datasets[1].data = days1;
    }
    if (period2.value == 'months') {
      ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
      ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = months;
      ExpenseChartTwo.configExBar.dataExBar.datasets[1].data = months1;
    }
    if (period2.value == 'years') {
      ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
      ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = years;
      ExpenseChartTwo.configExBar.data.datasets[1].data = years1;
    }
    ExpenseChartTwo.update();
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-outline-prime {
    color: #23BAD7;
    border-color: #23BAD7;
  }
  
  .btn-outline-prime:hover {
    color: #fff;
    background-color: #23BAD7;
    border-color: #23BAD7;
  }
  
  button.active {
    color: #fff;
    background-color: #23BAD7;
    border-color: #23BAD7;
  }
  
  .border-expBox {
    border: 1px solid #E0E0E0 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" /&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="mb-5"&gt;
      &lt;h1&gt;Chart 1&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div style="display: block; box-sizing: border-box; height: 307px" class="row ps-3 pe-3 ms-0 me-0 mb-3 bg-white d-flex align-items-center shadow-sm rounded-3"&gt;
      &lt;div class="col-12"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-12 d-flex align-items-center"&gt;
            &lt;div class="col-5 d-flex justify-content-end"&gt;
              &lt;button class="active btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame(this)" value="day"&gt;Today&lt;/button&gt;
              &lt;button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame(this)" value="month"&gt;Monthly&lt;/button&gt;
              &lt;button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold" onclick="timeFrame(this)" value="year"&gt;Yearly&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-9"&gt;
        &lt;canvas id="myChart" width="618" height="220" style="display: block; box-sizing: border-box; height: 130px; width: 250.5px;"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="mt-5"&gt;
      &lt;h1&gt;Chart 2&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div style="display: block; box-sizing: border-box; height: 307px" class="row ps-3 pe-3 ms-0 me-0  mb-3 bg-white d-flex align-items-center shadow-sm rounded-3"&gt;
      &lt;div class="col-12"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-12 d-flex"&gt;
            &lt;div class="col-5 d-flex justify-content-end align-items-center"&gt;
              &lt;button class="active btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame2(this);" value="days"&gt;Today&lt;/button&gt;
              &lt;button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame2(this);" value="months"&gt;Monthly&lt;/button&gt;
              &lt;button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold" onclick="timeFrame2(this);" value="years"&gt;Yearly&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-12" style="display: block; box-sizing: border-box; height: 211px"&gt;
        &lt;canvas id="ExpenseChartTwo" width="825" height="211" style="display: block; box-sizing: border-box; height: 211px; width: 250.5px;"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
  
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/chart.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      $(document).on('click', 'button', function() {
        $(this).addClass('active').siblings().removeClass('active')
      })
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>