Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js line chart is cut off at the top?

For some reasone all graphs are cut off at the highest value. How can i fix this? I can't use a fixed y-axis

Line Chart cut off at the top

like image 733
nourdin Avatar asked Jun 08 '16 08:06

nourdin


3 Answers

Edit/Update: As mentioned in the comments, the 5px value can more accurately be just half of whatever your line width value is, I belive default is 2px so in that case you would just want padding: { top: 1 }

There a layout.padding attribute you can set either in options or global. I had this same problem and set

options: {
  layout: {
    padding: {
      top: 5
    }
  },
  ...
}

worked fine for me to not cut off the line http://www.chartjs.org/docs/#chart-configuration-layout-configuration

like image 190
sean6bucks Avatar answered Oct 18 '22 20:10

sean6bucks


I used hardcode, just wide draw area at top and bottom. This code based on original Chart.canvasHelpers.clipArea.

const WIDE_CLIP = {top: 2, bottom: 4};

Chart.canvasHelpers.clipArea = function(ctx, clipArea) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(
      clipArea.left,
      clipArea.top - WIDE_CLIP.top,
      clipArea.right - clipArea.left,
      clipArea.bottom - clipArea.top + WIDE_CLIP.bottom
    );
    ctx.clip();
};
like image 32
Alex Maximenko Avatar answered Oct 18 '22 20:10

Alex Maximenko


You can try clip:false option, worked for me.

Example:

options: {
    clip: false,
    responsive: true,
    interaction: {
      intersect: false,
      mode: 'index',
    }
 }
like image 3
s1ntez Avatar answered Oct 18 '22 21:10

s1ntez