Chart.js: v2 beta: tooltips are sometimes truncated

[justanotheranonymoususer]

[etimberg]

Closed since #1829 was merged

[justanotheranonymoususer]

Still an issue sometimes. Screenshot below.
Can be solved by putting the label below the arrow, on the whole width of the graph, or by using word wrapping.

Please reopen the issue. I can't do it.

[etimberg]

@justanotheranonymoususer do you have CSS padding applied to your canvas?

[justanotheranonymoususer]

No, just the simplest canvas element.

[etimberg]

Ok, I can reproduce your second case on my machine. Looking into it now.

[etimberg]

@justanotheranonymoususer see #1840

[justanotheranonymoususer]

I use Chart.min.js. How can I test the fix?

[etimberg]

You'll need to pull the fix and rebuild.

[etimberg]

@justanotheranonymoususer I merged #1840
If you can give it a try and let me know if it fixes your issue, that'd be great.

[justanotheranonymoususer]

Thanks. If you can provide Chart.min.js, I'll check it.

[etimberg]

Ok, I'll build it shortly

[etimberg]

I pushed updated built files to the v2.0-dev branch

[justanotheranonymoususer]

I see the same behavior. For some strings, which are even longer, it attempts to fit it, but it doesn't work very good, too.

[laurentpayot]

I chose chart.js 2.X for my doughnuts charts because of the nice tooltips but they are unusable when moderately long because of this cut off.
A quick and dirty fix could be to add some "padding" option to have room on the left and right of the canvas for the tooltips to be displayed. What do you think?

[shyamal890]

Facing the same issue here too!

[stefek99]

As I'm searching on Github and docs for the solution and see screenshots - all of them focus on text being cut off because it is too wide. In my instance it is too short...

Related #622

Current attempt: http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

The mode for positioning the tooltip. 'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position. New modes can be defined by adding functions to the Chart.Tooltip.positioners map.

---

UPDATE:

Chart.Tooltip.positioners.myCustomPosition = function(unused, position) {
   return { x: position.x, y: 230 };
}

http://codepen.io/anon/pen/mRPjoe

[ste2425]

Can't the tooltip be allowed to grow in height should its width come to within an amount of the canvas? I guess if you have ridiculously long labels and a small canvas you could still have issues but by that point there's probably not much that could be done from the libraries point of view.

[11Schotter]

Really hope we find a fix for this

[apocalyarts]

+1

I think one of the problems is, that the charts are rendered inside an iFrame? Maybe we could work around this by offering callback functions that display tooltips correctly if the pie chart is wrapped in a parent-div with a specific class/id?

[etimberg]

@apocalyarts the iframe is not used for rendering. it is used to detect when the chart container resizes to trigger the appropriate resize on the chart. We plan to remove this in v2.6 and replace it with a faster method.

[WyattKampel]

I'm having the same issue with my pie charts

[apocalyarts]

Anything new on the tooltip-front?

[cassieporter]

Did anyone get a fix for this? I'm having issues m=with my tool tip truncating too

[kaidohallik]

After applying #3998 I am not able to reproduce tooltip truncation any more.

[blubberbo]

@kaidohallik will I get that change if I download chartjs from github? I have version 2.5 right now and am still getting the truncation issue

[kaidohallik]

@blubberbo No, #3998 is not merged, you must manually apply this patch.
If tooltip is longer than canvas width then #3998 doesn't help. Then I think you need to implement custom tooltip which is outside of the canvas.

3998 improvements/fixes are:

• specific tooltip lengths doesn't cause truncation any more (up to caretSize+caretPadding truncation could happen)
• in some cases tooltip was truncated though there was enough space to show tooltip without truncation, with #3998 tooltip is shown without truncation in that case
• if tooltip is longer than canvas then beginning of the tooltip is shown, truncation occurs at the end of the tooltip

[blubberbo]

@kaidohallik thank you - so to apply that manually, I just replace the one src/core/core.tooltip.js file?

[kaidohallik]

@blubberbo This is tested with current chart.js git master. You can apply #3998 to current master with following sequence:

1. Clone chart.js source code git repository

git clone https://github.com/chartjs/Chart.js.git

1. Save https://github.com/chartjs/Chart.js/pull/3998.patch to your disk.
2. Apply patch to your local git repository:

git apply 3998PatchLocationInDisk

1. Install dependencies

npm install

1. Build with gulp

gulp build

1. Use suitable file from dist subdirectory

If you want to use 2.5.0 only with #3998 then you can try following sequence, maybe it works:

1. Clone chart.js source code git repository

git clone https://github.com/chartjs/Chart.js.git

1. Checkout version 2.5.0

git checkout v2.5.0

1. Manually change core.tooltip.js, look at https://github.com/chartjs/Chart.js/pull/3998/files - changes in 6 places
2. Install dependencies

npm install

1. Build with gulp

gulp build

1. Use suitable file from dist subdirectory

[blubberbo]

@kaidohallik Thanks for the instructions, if I dont use gulp though and have my application locally (in Visual Studio) is there a way for me to apply the patch manually? Thanks!

[kaidohallik]

@blubberbo If you don't have gulp installed then you can install gulp by:

npm install --global gulp-cli

I try to give also more detailed instruction:

1. Go to folder where you want to download and manage chart.js
2. Run commands:

git clone https://github.com/chartjs/Chart.js.git
cd Chart.js

1. Save https://github.com/chartjs/Chart.js/pull/3998.patch to your disk and apply this patch by:

git apply 3998PatchLocationInDisk

1. Run commands:

npm install
gulp build

1. Look at dist folder and copy suitable version from there to your local project (create maybe new folder libs there or put to some other folder you like)
2. Change chart.js reference in your project from node_modules/chart.js/dist/xxx.js to libs/xxx.js where xxx is chart.js version you use

If you don't want to install gulp then I think you should wait while #3998 is merged and new version released after that.

[blubberbo]

@kaidohallik Ok great, thank you so much!

[geminiyellow]

2.6 truncating tooltip on chart.

[etimberg]

Merging this with an older, identical issue, #622