[Chartjs]-Changing Chart.js chart type doesn't remove older axis

by

1👍

✅

It seems that the update method works only with new data. For new types you will need to create a new chart every time.

$(function() {

  $("#chartType0").change(function() { createChart($(this).val()) })

  function createChart(type) {
    new Chart($("#chart0"), {
      type: type,
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Dataset',
          backgroundColor: 'rgba(255, 99, 132, 0.5)',
          borderColor: 'rgb(255, 99, 132)',
          data: [5, 10, 5, 7, 20, 30, 45]
        }]
      }
    })
  }

  createChart('line')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<select id="chartType0">
  <option value="line">Line</option>
  <option value="radar">Radar</option>
</select>
<canvas id="chart0"></canvas>

Leave a comment