Chart.js: Tool tip is cut off on rightmost point

[joeljeske]

When using tooltips, the right most point's tooltip seems to be cut off. It seems as if it is out of bounds of the actual canvas.

[tasl33m]

I'm also having this issue

[fhinson]

+1 also having this issue

[etimberg]

Here's a JSBin that recreates the issue: http://jsbin.com/yebadi/1/edit

[brettmhoffman]

+1 Same issue here.

[haydenbleasel]

+1 but for both sides since I disabled the scale.

[maeishoj]

any progress?

[xierox]

Also having this issue with my pie chart.

[mindjuice]

Same issue for me, but if you have a bit of a larger circle for your data points, the last data point's circle on the right side gets cut off too. I imagine it would have the same issue with the first data point if the scale is disabled on the left side as haydenbleasel mentioned above.

[jenswegar]

+1 for me as well with bar charts. The tool tip gets cut off on both the left and right edge depending on how long the content of it is.

[robertturrall]

I'm sure that this is due to the fact that the tooltips are generated within the confines of the canvas, making it difficult to fix.

I had the same issue on my doughnut chart and solved it by implementing custom tooltips as per the example on the samples folder - worked in conjunction with my existing tooltip fontsize and template settings in the chart initialisation code:

var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
tooltipFontSize: 10,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
percentageInnerCutout : 70
});

Check out samples/pie-customTooltips.html for the custom tooltip code. Copy/paste and it worked straight away. Very happy!

Tooltip displayed well outside the bounds of the canvas:

PS: there's a line chart example too, which I'm guessing will work fine with bar charts.

[idangozlan]

+1

[akubos]

+1

[fjarrett]

+1 quite annoying :-)

[tannerlinsley]

Take a look at http://www.chartjs.org/docs/#advanced-usage-external-tooltips

[mindjuice]

See my StackOverflow post for a workaround for this that involves simply adding spaces to the leftmost or rightmost label. Not 100% perfect for everyone's use cases, but works great for many cases.

[terraelise]

For line charts, I solve the issue with the right-most tooltip being cut off only when the chart was thin (labels show slanted, the last point on the right was right against the right of the canvas) by adding more padding to the left/right via the option ",tooltipXPadding: 15" - since the tooltip on the right was generally positioned correct, just a tad cut off, this ensured the data was always visible since there is now enough padding to keep it within the canvas. I accept visually that now all tooltips now have a lot of padding on the sides and the last on the right trimmed (cannot see the rounded right side).

[mindjuice]

@terraelise If you follow my suggestion above, you don't have to live with the rounded corners getting cut off or unnecessary tooltip padding either.

[DavidVII]

+1 it looks like #1064 fixes this too.

[derekperkins]

@joeljeske Huzzah! The first alpha of Chart.js 2.0 has landed and should fix this issue. Check out the release and try it out! We've got a lot of momentum right now, so please help us test so we can launch 2.0 Gold by the end of the month.
https://github.com/nnnick/Chart.js/releases/tag/v2.0-alpha

I'm closing this issue for now, but if you have implementation questions or find bugs, please create a jsfiddle and post the link here and we'll reopen this issue and get it fixed.

[akocmark]

Interestingly, by setting the "tooltipCaretSize" option to "0" solves the issue
{ tooltipCaretSize: 0, ... }

[dessita]

Thank you Akocmark, this was super easy solution! It worked right away :)

[akocmark]

@dessita glad I'm able to help :)

[akousmata]

Am I the only one having the problem where the tooltip being passed into the global function is always false? Am I doing something wrong?

// !tooltip is always false? if (!tooltip) { tooltipEl.css({ opacity: 0 }); return; }

[akousmata]

Ok, sorry about this. I realized I didn't have an empty div on the page just for the tooltip #chartjs-tooltip rather crucial div I suppose.

[daviddunne]

+1

[LuisPalomo]

Thank you @akocmark. Nice and simple solution :+1:

[akocmark]

@LuisPalomo no worries bruh

[PixelAtLarge]

+1

[barintsights]

+10 @akocmark , perfect solution.

[rohan-deshpande]

@akocmark solution worked excellent for line charts in v1, but not pie charts for me sadly :(

[apfz]

can confirm. this solution is not working in v2

[reubenbrown]

For those interested I've been having the same problem on the most recent version (2.3). To solve the issue I modified the code found here to suit my needs. I'm using a doughnut chart in the example below but should work for every type of chart.

<!doctype html>
<html>

<head>
    <title>Pie Chart with Custom Tooltips</title>
    <script src="../dist/Chart.bundle.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <style>
    #chartjs-tooltip {
      opacity: 1;
      position: absolute;
      background: rgba(0, 0, 0, .7);
      color: white;
      border-radius: 3px;
      -webkit-transition: all .1s ease;
      transition: all .1s ease;
      pointer-events: none;
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
    }
    </style>
</head>

<body>
  <div id="parent-div"
    <canvas id="chart-area2" width="300" height="300" />
    <div id="chartjs-tooltip"></div>
  </div>

  <script>
    var ctx = document.getElementById("chart-area2").getContext("2d");
    var data = {
      labels: ["First label", "Second Label"],
      datasets: [
        {
          data: [[1,2,3,4,5], [6,7,8,9,10],
          backgroundColor: ['#3e569d', '#146816']
        },
      ]
    };
    var options = {
      tooltips: {
        enabled: false,
        custom: function(tooltip) {
          // Tooltip Element
          var tooltipEl = $('#chartjs-tooltip');
          // Have the tooltip appear/disappear when you hover on/off the chart
          $("#parent-div).mouseover(function(e) {
            tooltipEl.css('visibility', 'visible');
          });
          $("#parent-div).mouseleave(function(e) {
            tooltipEl.css('visibility', 'hidden');
          });
          // Set Text
          if (tooltip.body) {
            var innerHtml = [
              (tooltip.body[0].lines || []).join('\n')
            ];
            tooltipEl.html(innerHtml.join('\n').replace(/,/g, ', '));
          }
          // Find Y Location on page
          var top = 0;
          if (tooltip.yAlign) {
            top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
          }
          var position = $(this._chart.canvas)[0].getBoundingClientRect();
          // Display, position, and set styles for font
          tooltipEl.css({
            opacity: 1,
            width: tooltip.width ? (tooltip.width + 'px') : 'auto',
            left: position.left + tooltip.x + 'px',
            top: position.top + top + 'px',
            fontFamily: tooltip._fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip._fontStyle,
            padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
          });
        }
      }
    };
    var chart = new Chart(ctx, {
      type: 'doughnut',
      data: data,
      options: options
    });
  </script>
</body>

</html>

[tlupfer]

@reubenbrown thanks! yours is the only working solution I could find for 2.3.0. Seems like this issue should be re-opened. Or is there a new one for 2.x?

[reubenbrown]

@tlupfer looking at the issues it seems there are a lot the pertain to the tooltip functionality but none that deal with this issue specifically in the latest version

[Anujndls]

I am also facing this tooltip positionising issue in DoughnutChart.

[miro4994]

I´m looking for solution too. Nothing working at all...

[tlupfer]

@miro4994 the solution @reubenbrown posted above works, but you may have to tweak the positioning depending on your layout. I removed all of the code related to getBoundingClientRect to fit my layout.

[apocalyarts]

I'm also not satisfied with @reubenbrown 's solution. I'm already using a wrapper library for chart.js so I don't want to mess around with HTML and CSS that much. Isn't there a possibility to inject custom tooltip html using a callback function?

[miro4994]

Yep, sorry for the message before. I was little bit off my mude because i had to edit some stuff for making it work with react without jQuery. However, it´s working correctly so thank you @reubenbrown

[jminuscula]

@derekperkins this still happening on v2.4.0 —could we please reopen the issue?

[corysmc]

+1

[apocalyarts]

+1

[derekperkins]

Open Sesame!

[derekperkins]

@etimberg Who is most into tooltips these days?

[etimberg]

@derekperkins not sure. No one really owns them specifically at the moment.

[etimberg]

If someone wants to tale over the tooltip code, I'm happy to share

[andresgleztelo]

+1

[RichardM99]

+1

[blubberbo]

+1

[geek-at-heart]

+1

[enistara]

+1

[miladghiravani]

+1

[damiendevienne]

+1
Isn't there a simple way to change the size of the plot itself relative to the canvas? Say that for instance the piechart takes 50% of the width and height of canvas size ?

[joebillman]

I was able to get the tool tips to not cut off for me by making the width of the canvas tag larger. Make sure that maintainAspectRatio is set to true and then just make the width a little larger. Here's what it looked like for me: <canvas id="pieChart" style="width:180px; height:150px;"></canvas> Worked for my scenario and thought that it might help with others listed here.

[mce1978]

+1

[yashcr07]

Also if the height of the canvas small enough the tooltip doesn't render on the left or right, it renders below the point which cuts it off.

[derryl]

Am I correct in understanding that the solution is to use a custom HTML tooltip? (As opposed to the default one, which can never exceed the dimensions of the parent ?)

[etimberg]

@derryl you are correct. Because the default tooltip renders on the canvas it can never render outside of it which is why it gets cut off.

[geminiyellow]

@yashcr07 yes, use it in sparkline will fill very suck.

[ChrisKatsaras]

Not complete solution but what I did was implement the method outlined in this post:
https://stackoverflow.com/questions/21409717/chart-js-and-long-labels
which separates the tooltip label text onto multiple lines. Seems to work well if the issue is that your label is too long to fit on one line!

[BossGrand]

+1

[hernii8]

+1

[acenter2507]

+1

[sumit1191]

I am using tooltip but data on tooltip is showing incorrectly . I have two bar on bar is showing correctly but other is showing wrong. i am attaching image1 and image2 . In the image1 tooltip data is showing correctly on the green bar while in image2 on blue bar showing tooltip data in incorrectly. on the blue bar should also showing X axis value as green bar but its showing 20 instead of COD maintenance.

Please suggest someone.

[Eshva]

You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.

                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutoutPercentage: 60,
                        legend: {
                            display: false
                        },
                        animation: {
                            animateRotate: false
                        },
                        layout: {
                            padding: {
                                right: 40
                            }
                        }
                    }

[ciembor]

@Eshva It's not a solution, it doesn't solve the problem for every possible label. Tooltips should be outside of canvas by default, this is the only acceptable solution.

[rinogo]

@ciembor You mentioned that

this is the only acceptable solution

Could you please clarify a bit (explanation or link) what you mean by "this"?

Edited: I'm trying to process this thread; I'm still not sure what the recommended solution is.

[tannerlinsley]

This limitation is native to the restrictions of the canvas not being able to draw anything outside of the the canvas element itself.

If this limitation is encountered, the only blessed workaround is to use custom tooltips, which render using the DOM, and not the canvas.

The maintainers of the repo are aware of this restriction and have decided that there is currently no feasible solution that would not come with very large breaking changes to the way tooltips work. It's possible that this will be addressed in the next major version of Chart.js, but it is not currently planned.

[benmccann]

I'm closing this issue since it doesn't appear to happen anymore

[KeithGillette]

@benmccann: I still experience the issue with [email protected]:

[benmccann]

That looks like a bit of a different issue. It looks like it's not because it's the rightmost point, but because the legend is bigger than the chart. I'd recommend filing a new issue so that this one doesn't become too confusing

[hawkinsjb1]

@benmccann Considering this https://github.com/chartjs/Chart.js/issues/1731 was merged into here, I wouldn't say its a new issue

[s4m0r4m4]

I followed #1731 here as well, and am encountering a similar issue:
. Please let me know if you'd like me to open a new issue or something!

[benmccann]

@s4m0r4m4 yeah, if you can open a new issue with a reproducible test case on something like codepen or plunkr that would be great. The original report and possibly a majority of the comments here refer to an issue where the tooltip is mispositioned. It'd be a lot easier to keep track of if we have a clean report that describes the remaining issue of the tooltip overflowing because it's too large. It's not clear to me what the best fix would be for this remaining case and it may require a fair amount of discussion. I'd like that not to get lost amongst all the existing discussion of the already fixed issue so that we capture everyone's input and feedback

[MichaelPeter]

One improvment for the current case when there are too many lines, like in my case 50, it is always below the line picked instead of the side where the biggest tooltip can be shown.
In my case it would be good to show the tooltip above the line, to see more, even if not all tooltips

[ufukomer]

Padding is the solution for me: https://stackoverflow.com/a/57360344/3650955

[shyamal890]

Any updates on this issue? There is a new Chart.js version coming up, would tooltip cut-off issue be solved in the upcoming major release?