Chartjs-Chart js – Line chart cuts border for lines in boundaries

by

0👍

✅

Chart.js does a pretty good job of auto-sizing scales and figuring out the best configuration for tick step sizes and spacing, however it is not always perfect. In your example, since you have data points that sit directly on the x axis and the top gridline, the lines appear to get chopped off.

When this occurs, you have to step in a be more explicit with your scale definition. In this case, you could set the tick min and max so that the scale extends past your datapoints, thus preventing the line clipping.

Here is an example.

var myBarChart = Chart.Line(canvas, {
  data: data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: -20,
          max: 140
        }
      }]
    }
  }
});

I forked your jsfiddle showing what this looks like in your specific example. Here is the updated version.

0👍

I used workaround to prevent line from being cutted:

      ticks: {
        callback(tick) {
          if (!Number.isInteger(tick)) {
            return ''
          }

          return tick
        },
        min: -0.9,
        max: 100.9,
      },

Leave a comment