Chart - code helper

xxxxxxxxxx
 
<div class="d-flex p-5">
  <div class="btn-group w-100 p-3">
    <input type="radio" class="btn-check" name="ChartType" id="DineIn-Chart-Line" autocomplete="off" checked />
    <label class="btn btn-primary" for="DineIn-Chart-Line">
      LINE CHART
    </label>
​
    <input type="radio" class="btn-check" name="ChartType" id="DineIn-Chart-Bar" autocomplete="off" />
    <label class="btn btn-primary" for="DineIn-Chart-Bar">
      BAR CHART
    </label>
  </div>
</div>
<div class="card m-5 p-3 border">
  <canvas id="chart--dine-in"></canvas>
</div>

​

xxxxxxxxxx
 
var DineInChartLine = document.getElementById("DineIn-Chart-Line");
var DineInChartBar = document.getElementById("DineIn-Chart-Bar");
​
var DataDineInLine = {
  type: "line",
  data: {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [{
      label: "Sales",
      data: [3234, 2234, 3234, 1234, 3234, 3100, 4250],
      fill: false,
    },],
  },
  responsive: true,
};
​
var DataDineInBar = {
  type: "bar",
  data: {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [{
      label: "Sales",
      data: [3234, 2234, 3234, 1234, 3234, 3100, 4250],
    },],
  },
  responsive: true,
};
​
new mdb.Chart(document.getElementById("chart--dine-in"), DataDineInLine);
​
DineInChartLine.addEventListener('change', () => {
  new mdb.Chart(document.getElementById("chart--dine-in"), DataDineInLine);
});
​
DineInChartBar.addEventListener('change', () => {
  new mdb.Chart(document.getElementById("chart--dine-in"), DataDineInBar);
});

Console errors: 0