How to set the position of tooltip?

[crazyBenqer]

Look at the two pictures, when the lable's length isn't enough, the edge of tooltip will be hidden.
Could you tell me how to resolve it?

[etimberg]

@crazyBenqer which version of chart.js are you using?

It'd be great if you could attach a JSFiddle demonstrating the issue as well.

[crazyBenqer]

Thanks for your response, the version that I used is '1.0.2', and the following is my js code.

var ctx=$("#Chart").get(0).getContext("2d");
var data={
// labels : ["day1","day2","day3","day4","day5","day6","day7"],
labels : [1,2,3,4,5,6,7],
datasets : [
{
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data : baseData
}]
},
options={
pointDotRadius : 3,
datasetStrokeWidth : 1,
};
new Chart(ctx).Line(data, options);

[lepinsk]

Hey @etimberg – looks like I'm running into a similar issue where I've got a pie chart with relatively long text labels that are extending past the bounds of the canvas, which is causing them to get cut off.

I've put together a little jsfiddle that demonstrates what I'm seeing: https://jsfiddle.net/qzf9c2vv/3/

[lepinsk]

@etimberg – Tried to see if this is still happening with the 2.0-beta branch, but I seem to be getting an error with the labels, so I'm guessing I'm doing something wrong here https://jsfiddle.net/phx2t0cc/5/

[etimberg]

@lepinsk I updated to the latest from the v2.0-dev branch https://jsfiddle.net/jdvusk3y/1/
I can see the labels at least. If you're looking for v2.0 docs, they can be found at http://nnnick.github.io/Chart.js/docs-v2/

[lepinsk]

@etimberg Thanks – it looks like it is exhibiting the same behaviour from before, though, when the labels are longer: https://jsfiddle.net/jdvusk3y/2/

[etimberg]

Yeah. #1731 was filed for that. It's pretty hard to fix since the tooltip needs to render on the canvas. I think I have an idea of what to do though to make it a little better but it involves some heavy refactoring

[lepinsk]

Yeah, this seems like it'd be a headache. Just to confirm: I don't see anything in the docs about including a newline in a tooltip (and it doesn't seem like they're working when I try them out) – there's no way to do that, right?

[etimberg]

@lepinsk right now we don't explicitly split lines on newline characters. I don't think it would actually be that hard to add since we already have support for multiple line rendering. In the tooltip callbacks returning an array of strings renders each on its own line.

[fulldecent]

Hello, today I am closing all issues that are only affecting version 1 of Chart.js as WONTFIX.

If this issue does affect version 2 as well, I apologize for the error. Please create a test case against Chart.js 2 using on of the below websites and we will be happy to reopen the issue and update its classification:

• http://jsbin.com/
• http://jsfiddle.net/
• http://codepen.io/pen/
• Premade template: http://codepen.io/pen?template=JXVYzq

[lepinsk]

Hey,

Looks like the issue is still present in Chart.js 2; longer tooltips aren't wrapping at the edge of the canvas, and it looks like newlines aren't working in them either? (I've tried <br> and \n.)

Here's a codepen link: http://codepen.io/anon/pen/pbeJYL

[etimberg]

Wrapping all the issues for the tooltip overlap into the already existing #1731