Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

y-axis labels are being cut off when many data values displayed #729

Closed
googol7 opened this Issue Oct 28, 2014 · 29 comments

Comments

@googol7
Copy link

googol7 commented Oct 28, 2014

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

@googol7 googol7 changed the title y-axis labels are being cut for big numbers y-axis labels are being cut off for big numbers Oct 28, 2014

@googol7 googol7 changed the title y-axis labels are being cut off for big numbers y-axis labels are being cut off when many data values displayed Oct 28, 2014

@sweetgoals

This comment has been minimized.

Copy link

sweetgoals commented Oct 29, 2014

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

<canvas id="myChart" width=800px height="400" style="border: 2px solid black; padding:20px;"
http://jsbin.com/jayutaqela/1/edit?html,js,output

chart example

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

This comment has been minimized.

Copy link
Member

etimberg commented Oct 29, 2014

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

This comment has been minimized.

Copy link
Author

googol7 commented Oct 29, 2014

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:

bildschirmfoto 2014-10-29 um 23 57 34

@sweetgoals

This comment has been minimized.

Copy link

sweetgoals commented Oct 30, 2014

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

@googol7

This comment has been minimized.

Copy link
Author

googol7 commented Oct 31, 2014

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.
english
german

@sweetgoals

This comment has been minimized.

Copy link

sweetgoals commented Oct 31, 2014

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

This comment has been minimized.

Copy link
Author

googol7 commented Oct 31, 2014

Nope:

bildschirmfoto 2014-10-31 um 16 18 19

@sweetgoals

This comment has been minimized.

Copy link

sweetgoals commented Oct 31, 2014

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

This comment has been minimized.

Copy link

pfirpfel commented Nov 4, 2014

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 comment has been minimized.

Copy link
Contributor

rylanhalteman commented Nov 4, 2014

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

This comment has been minimized.

Copy link
Author

googol7 commented Nov 4, 2014

@sweetgoals: it's independent from the scaleFontSize setting
11
12
10
13
14

@sweetgoals

This comment has been minimized.

Copy link

sweetgoals commented Nov 6, 2014

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

@googol7

This comment has been minimized.

Copy link
Author

googol7 commented Nov 6, 2014

Chrome @ Windows 8.1 displays it correctly without cropping.

@boroth

This comment has been minimized.

Copy link

boroth commented Dec 10, 2014

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

@jpomella

This comment has been minimized.

Copy link

jpomella commented Dec 18, 2014

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

This comment has been minimized.

Copy link

BenMic commented Jan 1, 2015

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

This comment has been minimized.

Copy link

jivinivan commented Jan 7, 2015

I am seeing this issue as well 👍

@jivinivan

This comment has been minimized.

Copy link

jivinivan commented Jan 7, 2015

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

@wildchild

This comment has been minimized.

Copy link

wildchild commented Apr 12, 2015

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

This comment has been minimized.

Copy link
Member

etimberg commented Apr 12, 2015

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

@etimberg etimberg closed this Apr 12, 2015

@cancerberoSgx

This comment has been minimized.

Copy link

cancerberoSgx commented Apr 15, 2015

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

This comment has been minimized.

Copy link

PixelAtLarge commented Jul 31, 2015

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

This comment has been minimized.

Copy link

adiakritos commented Aug 15, 2015

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

This comment has been minimized.

Copy link

sahil290791 commented Oct 22, 2015

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

This comment has been minimized.

Copy link

Rinlama commented Nov 3, 2016

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 comment has been minimized.

Copy link

theavijitsarkar commented Nov 3, 2016

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

See the image, both the scaleLabels are gone halfway, see the % and inHg
screen shot 2016-11-03 at 11 32 56 pm

@theavijitsarkar

This comment has been minimized.

Copy link

theavijitsarkar commented Nov 3, 2016

Fixed on latest commit, using layout

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

}
@LetItGo123

This comment has been minimized.

Copy link

LetItGo123 commented Nov 16, 2016

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

@Alyka

This comment has been minimized.

Copy link

Alyka commented Sep 3, 2017

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

marginLeft: 60,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.