Chartjs-Bootstrap Tabs Change Chart.js Default Animation

by

2👍

✅

You could try to change the animation config, as following:

options: {
  animations: {
    numbers: {
      type: 'number',
      properties: ['base', 'y', 'height'],
      from: ({chart}) => chart.chartArea.bottom
    },
  }
  ...
}

const labels2 = ["A", "B", "C"];

const config2 = {
  type: 'bar',
  data: {
    labels: labels2,
    datasets: [{
      label: 'ds',
      data: [3400, 3614, 3843]
    }]
  },
  options: {
    animations: {
      numbers: {
        type: 'number',
        properties: ['base', 'y', 'height'],
        from: ({chart}) => chart.chartArea.bottom
      },
    }
  }
};

const barexpensechart = new Chart(
  document.getElementById('myChart'),
  config2
);
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script> 
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

Leave a comment