Graph Chart.js dropdown menu - chart rendering

Question

I used chart.js to plot the data. Now, after selecting from the dropdown, I always want to display the relevant line (using the updateChartType function).

Unfortunately, I only see two points in the graph. Can someone please advise me where the mistake is, please?

My demo is here - [http://jsfiddle.net/ondra15/chqa30sf/55/]

Thanks:-)

Answer 1

You forgot to add the options object in your updateChartType function

function updateChartType() {
  myChart.destroy();
  myChart = new Chart(ctx, {
    type: 'line',
    data: options2.data,
    options: options2.options //<--- this line
  });
  myChart.getDatasetMeta(document.getElementById("chartType").value).hidden = false;
};

if you want the dropdown to toggle between different datasets, you can use the following:

You don't need to create a new chart, you can simply update the current one, but you need to call chart.update()

function updateChartType() {
  const val = document.getElementById("chartType").value
  for (const i in myChart.data.datasets) {
    if (i == val) myChart.getDatasetMeta(i).hidden = false;
    else myChart.getDatasetMeta(i).hidden = true;
  }
  myChart.update();
};