科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Chart.js Uncaught TypeError: Cannot read properties of undefined (reading 'options') - Stack Overfl

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

    programmeradmin1浏览0评论

    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 Ine
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 Ine',
      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=".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=".js/2.29.1/moment.min.js"></script>
  <script src=".6.0/jquery.min.js"></script>
  <script src=".2.0-beta1/js/bootstrap.bundle.min.js"></script>
  <script src=".2.6/jquery.unobtrusive-ajax.min.js"></script>
  <script src=".js"></script>
  <script src=".bundle.min.js"></script>

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

</html>

    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 Ine
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 Ine',
      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./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./ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
  <script src="https://cdn.jsdelivr/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr/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>

    • javascript
    • html
    • html5-canvas
    • chart.js
    Share Improve this question edited May 16, 2022 at 23:51 Omer Butt asked May 13, 2022 at 20:54 Omer ButtOmer Butt 411 gold badge1 silver badge7 bronze badges
    Add a ment  | 

    1 Answer 1

    Reset to default 3

    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;
...
    继续浏览有关 的文章

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论