Chart.js: y-axis labels are being cut off when many data values displayed

[googol7]

Big numbers are cut off in the y-axis:

30000 (you almost can't see the "3" anymore)
25000 (you almost can't see the "2" anymore)
20000 (you almost can't see the "2" anymore)
15000
1000

See this example:

http://jsbin.com/cigoxefoxe/1/edit?html,js,output

[sweetgoals]

The values are there. If you give the canvas object style padding it will add white space around the chart. For example:

padding:20px;"
http://jsbin.com/jayutaqela/1/edit?html,js,output

Does that fix the problem? If not can you please be more spcific and take a picture of it and point to exactly what your talking about?
thanks.

[etimberg]

I think the issue is just the font. The left edge of the '2' and the '3' at quick glance looks like it is cut off but in actual fact it's just the font.

[googol7]

Padding does not help here. It seems to be the font. I'm on Mac OS X 10.9.5. It's the same in all browsers (Chrome, Safari, Firefox). See the screenshot attached:

[sweetgoals]

Running windows 8 and chrome. I don't get that issue.

[googol7]

It depends on the browser language! If you set your browser language to german it will cut the labels off - if it's english it won't. But I couldn't reproduce it in jsbin yet. Attached two screenshots from my app.

[sweetgoals]

I'm wondering if you attach a font script to it if that will override the system font. On the main page for chart.js he uses a link for http://use.typekit.net/dqv7hih.js. I created a link:http://jsbin.com/tekifukaro/1/watch?html,js,output
Does it help?

[googol7]

Nope:

[sweetgoals]

hmmm... What about trying to change the fonts for the graphs? Supports a few.
// String - Scale label font declaration for the scale label
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Scale label font size in pixels
scaleFontSize: 12,

You could also add your own if you changed the Chart.js file. I really can't help that much with this one. I don't have a mac.

[pfirpfel]

If you look closely at the English screenshot, you see that the 3's and 2's are still cut off.

I have the same problem with my line chart.

I strongly believe the issue is related to the inaccuracy of the browser's context.measureText-method used in the longestText-helper.

Adding 5% more width "solved" the issue for me, but this isn't a pretty fix.

Update: Other possible way to "fix" the issue.

[rylanhalteman]

This issue is caused because in determining the tilt of the x-axis labels, chartjs checks for yLabelWidth + 8 and everywhere else it uses yLabelWidth + 10. Language and font can affect this because they both influence the line length, which is used to determine the tilt.

My pr, which @pfirpfel linked, addresses this issue by adding 10 when chartjs sets yLabelWidth and removes the + 10/+ 8 checks everywhere. In my tests it completely fixed the issue. Unfortunately it's been open for a nearly a month, so I don't know when it will be merged.

[googol7]

@sweetgoals: it's independent from the scaleFontSize setting

[sweetgoals]

were you able to reproduce this on windows in chrome? I wasn't able to reproduce the problem on windows.

[googol7]

Chrome @ Windows 8.1 displays it correctly without cropping.

[boroth]

OSX user here, still doesn't work in OSX 10.9.5

[jpomella]

I have this issue too. I am setting my Y label by using:

var options = { scaleLabel: "<%= Number(value / 1000) + ' MB'%>" };

Then, I put an extra space between " and <, making my code:

var options = { scaleLabel: " <%= Number(value / 1000) + ' MB'%>" };

This fixed the issue for me for the time being.

[BenMic]

The problem occurs when the loop that calculates this.xScalePaddingLeft in calculateXLabelRotation() reduces the value to less than the value required to draw the Y axis labels.

The solution is to revert this.xScalePaddingLeft to its previous value after the loop.

[jivinivan]

I am seeing this issue as well :+1:

[jivinivan]

Adding a space in the scaleLabel worked for me as well (temporary solution of course).

[wildchild]

It seems that @rylanhalteman found a fix. Is this annoying core issue going to be fixed in near future? Charts are broken for a lot of users.

[etimberg]

@wildchild I merged #677 so you should be good to go. Sorry that it took a while to get this into the core.

[cancerberoSgx]

Hey, I have this problem too and solved: The following utility will generate a new label array and the skipping is done with an empty string. It's working nice for me and doesn't need any extension, just preprocess your labels before creating the chart:

chartjsSkipLabels: function(labels, skip)
{
    var newLabels = []; 
    _(labels).each(function(label, index)
    {
        if(index % skip !== 0)
        {
            newLabels.push('');
        }
        else
        {
            newLabels.push(label);
        }
    });
    return newLabels; 
}

[PixelAtLarge]

I also had the same issue, which I fixed by updating "scaleLabel" in the chart options:

var options = {   
  scaleLabel: function(object) {
    return "      " + object.value;
  },
  responsive: true,
  pointDot: false
};

By adding a few spaces to the left of the labels, it prevents the label text from being cut off.

[adiakritos]

I'm having the issue as well. Just mentioning here so it's clear it's still not yet 100%.

@PixelAtLarge's patch worked nicely for me.

[sahil290791]

Was unable to fix the issue by any of the above methods in my rails app, but it worked by changing the default value of scaleLabel in Global Chart configuration as,

    // works in rails app, had to add extra % otherwise rails would try to print it.
    Chart.defaults.global.scaleLabel = "   <%%=value%>";
    // can be used in other apps
    Chart.defaults.global.scaleLabel = "   <%=value%>";

[Rinlama]

I had same issue with my y-label. Thanks to @jpomella
var options = { scaleLabel: "<%= Number(value)>" };
extra space after = works great!!
var options = { scaleLabel: " <%= Number(value)>" };

[theavijitsarkar]

This issue is far from closed. What is the solution?

See the image, both the scaleLabels are gone halfway, see the % and inHg

[theavijitsarkar]

Fixed on latest commit, using layout

options: {
            layout: {
                padding: {
                  // Any unspecified dimensions are assumed to be 0
                  left: 10,
                  bottom: 5
                }
              }
....

}

[LetItGo123]

May i know how you added xaxis and yaxis title in Line chart js

[Alyka]

Just increase the margin-left property until it begins to appear.

marginLeft: 60,