CODEWITHSUNDEEP
javascripthtmlhtml5-canvaschart.js
Omer Butt
Omer Butt

Reputation: 41

Chart.js Uncaught TypeError: Cannot read properties of undefined (reading 'options')

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.

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.

Uncaught TypeError: Cannot read properties of undefined (reading 'options') at timeFrame2 (Index:1825:41) at HTMLButtonElement.onclick (Index:708:165)

Heres the 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();
};
.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;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" />


</head>

<body>
  <div class="mb-5">
    <h1>Chart 1</h1>
  </div>
  <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">
    <div class="col-12">
      <div class="row">
        <div class="col-12 d-flex align-items-center">
          <div class="col-5 d-flex justify-content-end">
            <button class="active btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame(this)" value="day">Today</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame(this)" value="month">Monthly</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold" onclick="timeFrame(this)" value="year">Yearly</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-9">
      <canvas id="myChart" width="618" height="220" style="display: block; box-sizing: border-box; height: 130px; width: 250.5px;"></canvas>
    </div>
  </div>


  <div class="mt-5">
    <h1>Chart 2</h1>
  </div>

  <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">
    <div class="col-12">
      <div class="row">
        <div class="col-12 d-flex">
          <div class="col-5 d-flex justify-content-end align-items-center">
            <button class="active btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame2(this);" value="days">Today</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame2(this);" value="months">Monthly</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold" onclick="timeFrame2(this);" value="years">Yearly</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12" style="display: block; box-sizing: border-box; height: 211px">
      <canvas id="ExpenseChartTwo" width="825" height="211" style="display: block; box-sizing: border-box; height: 211px; width: 250.5px;"></canvas>
    </div>
  </div>
  </div>

  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

  <script>
    $(document).on('click', 'button', function() {
      $(this).addClass('active').siblings().removeClass('active')
    })
  </script>
</body>

</html>

Upvotes: 2

Views: 22880

Answers (1)

uminder
uminder

Reputation: 26150

chartfour is the name of the chart configuration you're using for creating your chart. myChart2.chartfour however does not exist.

When creating the chart, make sur to to assign it to a global constant...

const myChart2 = new Chart('myChart2', chartfour);

...then, you can directly access its options and data as follows:

myChart2.options.scales.x.time.unit = period.value;
myChart2.data.datasets[0].data = months;
...

Upvotes: 3

Related Questions