error: Uncaught TypeError: Illegal constructor JavaScript

Question

const cases = document.querySelector('coronovirus-input');
const deaths = document.querySelector('deaths-input');
const recovered =document.querySelector('recovered-input');

const ctx = document.getElementById('mychart').getContext("2d");
let mychart = new CharacterData(ctx , {

  type:'pie',
  data: {
    labels : ['Active Cases','Deaths','Recovered'],
    datasets : [
      {
        label:'# of votes',
        data : [0,0,0],
        backgroundColor:['#2adece','#dd3b79','#ff766b'],
        borderWidth:1
      }
    ]
    
  }
});

const updateChartValue = (input, dataOrder) => {

  input.addEventListener ('change', e => {
    mychart.data.datasets[0].data[DataOrder] = e.target.value;
    mychart.update();
  });

};

updateChartValue(cases,0);
updateChartValue(deaths,1);
updateChartValue(recovered,2);

Hi Guys I cant solve this problem... i want to make pie chart but I cant I am newbie to share any post in this website sorry if I did any mistakes This Error

Answer 1

I see several issues in the code you posted, but most notably the constructor for initialising mychart should be new Chart() rather than new CharacterData() (possible typo due to auto-completion in your editor?).

Second, mind that selectors for element ids must be prefixed with #.

Finally the updateChartValue shows a mismatch in the case of the dataOrder argument and where it is used (capital 'D').

See solution here https://codepen.io/beezital/pen/zYEmKRG

const cases = document.querySelector('#coronovirus-input');
const deaths = document.querySelector('#deaths-input');
const recovered =document.querySelector('#recovered-input');

const ctx = document.getElementById('mychart').getContext("2d");
let mychart = new Chart(ctx , {

  type:'pie',
  data: {
    labels : ['Active Cases','Deaths','Recovered'],
    datasets : [
      {
        label:'# of votes',
        data : [10,20,30],
        backgroundColor:['#2adece','#dd3b79','#ff766b'],
        borderWidth:1
      }
    ]
    
  }
});

const updateChartValue = (input, dataOrder) => {

  input.addEventListener ('change', e => {
    mychart.data.datasets[0].data[dataOrder] = e.target.value;
    mychart.update();
  });

};

updateChartValue(cases,0);
updateChartValue(deaths,1);
updateChartValue(recovered,2);