[Chartjs]-Points cut at half at the edges of top and bottom, at chartjs

by

4👍

✅

You can use the afterDataLimits hook to set the max and min of the scale, that way it still overflows the chart area:

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [12, 19, 3, 10, 2, 3],
      borderColor: 'pink',
      backgroundColor: 'pink',
      radius: 10
    }]
  },
  options: {
    scales: {
      y: {
        afterDataLimits: (scale) => {
          scale.max = 10;
          scale.min = 0;
        }
      },
    },
  },
});
<canvas id="chart" width="250" height="120" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>

Leave a comment