Chartjs-ChartJS, updating chart type does not update xAxis properly

by

1👍

✅

You don’t need to destroy the chart and create one, simply create another on the same canvas with the desired option, bar or line

From bar to line:

var dataset = {
  "labels": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ],
  "datasets": [{
      "label": "Impressions",
      "data": [
        76422672,
        686284176,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "backgroundColor": "rgba(54, 162, 235, 0.3)",
      "borderColor": "rgba(54, 162, 235, 1)",
      "borderWidth": 1,
      "yAxisID": "impressions"
    },
    {
      "label": "Actions",
      "data": [
        18,
        198,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "backgroundColor": "rgba(255, 159, 64, 0.3)",
      "borderColor": "rgba(255, 159, 64, 1)",
      "borderWidth": 1,
      "yAxisID": "actions"
    }
  ]
};

var options = {
  "title": {
    "display": true,
    "text": "My Chart"
  },
  "maintainAspectRatio": false,
  "responsive": true,
  "scales": {
    "yAxes": [{
        "scaleLabel": {
          "display": true,
          "labelString": "Impressions",
          "fontStyle": "bold"
        },
        "ticks": {
          "beginAtZero": true
        },
        "position": "left",
        "id": "impressions"
      },
      {
        "scaleLabel": {
          "display": true,
          "labelString": "Actions",
          "fontStyle": "bold"
        },
        "gridLines": {
          "display": false,
          "offsetGridLines": true
        },
        "ticks": {
          "beginAtZero": true
        },
        "position": "right",
        "id": "actions"
      }
    ],
    "xAxes": [{
      "ticks": {
        "display": true,
        "beginAtZero": true
      },
      "scaleLabel": {
        "display": true,
        "labelString": "Day",
        "fontStyle": "bold"
      },
      "gridLines": {
        "color": "rgba(172, 172, 172, 0.30)",
        "offsetGridLines": true
      }
    }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
window.myChart = new Chart(ctx, {
  type: 'line',
  data: dataset,
  options: options
});

var button = document.getElementById("changeChartType");
button.addEventListener("click", function() {
  // here is your trick, change the type to 'bar' with same other options;
  window.myChart = new Chart(ctx, {
    type: 'bar',
    data: dataset,
    options: options
  });
});
.myChartContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.myChartContainer canvas {
  position: relative;
  max-width: 800px;
  max-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class="myChartContainer">
  <canvas id="myChart" style="min-height: 300px"></canvas>
</div>
<button id="changeChartType">
Change Chart Type
</button>

And from line to bar:

var dataset = {
  "labels": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ],
  "datasets": [{
      "label": "Impressions",
      "data": [
        76422672,
        686284176,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "backgroundColor": "rgba(54, 162, 235, 0.3)",
      "borderColor": "rgba(54, 162, 235, 1)",
      "borderWidth": 1,
      "yAxisID": "impressions"
    },
    {
      "label": "Actions",
      "data": [
        18,
        198,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "backgroundColor": "rgba(255, 159, 64, 0.3)",
      "borderColor": "rgba(255, 159, 64, 1)",
      "borderWidth": 1,
      "yAxisID": "actions"
    }
  ]
};

var options = {
  "title": {
    "display": true,
    "text": "My Chart"
  },
  "maintainAspectRatio": false,
  "responsive": true,
  "scales": {
    "yAxes": [{
        "scaleLabel": {
          "display": true,
          "labelString": "Impressions",
          "fontStyle": "bold"
        },
        "ticks": {
          "beginAtZero": true
        },
        "position": "left",
        "id": "impressions"
      },
      {
        "scaleLabel": {
          "display": true,
          "labelString": "Actions",
          "fontStyle": "bold"
        },
        "gridLines": {
          "display": false,
          "offsetGridLines": true
        },
        "ticks": {
          "beginAtZero": true
        },
        "position": "right",
        "id": "actions"
      }
    ],
    "xAxes": [{
      "ticks": {
        "display": true,
        "beginAtZero": true
      },
      "scaleLabel": {
        "display": true,
        "labelString": "Day",
        "fontStyle": "bold"
      },
      "gridLines": {
        "color": "rgba(172, 172, 172, 0.30)",
        "offsetGridLines": true
      }
    }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
window.myChart = new Chart(ctx, {
  type: 'bar',
  data: dataset,
  options: options
});

var button = document.getElementById("changeChartType");
button.addEventListener("click", function() {
  // and here, change to type: 'line' 
  window.myChart = new Chart(ctx, {
    type: 'line',
    data: dataset,
    options: options
  });
});
.myChartContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.myChartContainer canvas {
  position: relative;
  max-width: 800px;
  max-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class="myChartContainer">
  <canvas id="myChart" style="min-height: 300px"></canvas>
</div>
<button id="changeChartType">
Change Chart Type
</button>

Leave a comment