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

Points cut at half at the edges of top and bottom, at chartjs

As showed in the picture the points are cut in half when reaching bottom or top edges (when the data is 1 or 5 in this example).

I tried padding, adding some 'fake' data to extend the limits of 1 and 5 and removing it with callback function on ticks. None worked as expected

This is my config for this chart.

const config = {
    type: 'line' as ChartType,
    data: data,
    options: {
      pointStyle: 'circle',
      //pointBackgroundColor: 'white',
      scales: {
        y: {
          ticks: {
            maxTicksLimit: 5,
            stepSize: 1,
          },
          min: 1,
          max: 5,
          reverse: true,
        },
      },
    },
  };

Removing min and max, results in the expected output.

But I need min and max, cause I want fixed Y axes values

Any clues how to fix this?

Solution

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>