15

I'm currently using chartjs (chartjs).

Tooltip is cutted, because it go out of canvas. How I can fix this behavior?

chart-with-legend-cuttedoff

gdrt
  • 3,160
  • 4
  • 37
  • 56
icy
  • 1,468
  • 3
  • 16
  • 36

3 Answers3

12

There are multiple ways of solving this.

One way (in your case), you can solve this, is by setting the bottom padding for your chart layout , like so ...

options: {
   layout: {
      padding: {
         bottom: 25  //set that fits the best
      }
   },
   ...
}

ᴅᴇᴍᴏ

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
      datasets: [{
         label: 'Standard Rating',
         data: [0.1, 0.02, 3, 4, 5, 6, 7, 8, 9],
         backgroundColor: 'rgba(209, 230, 245, 0.5)',
         borderColor: 'rgba(56, 163, 236, 1)',
         borderWidth: 1
      }]
   },
   options: {
      layout: {
         padding: {
            bottom: 25  //set that fits the best
         }
      },
      responsive: false,
      tooltips: {
         yAlign: 'top'
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="350" height="200"></canvas>
ɢʀᴜɴᴛ
  • 32,025
  • 15
  • 116
  • 110
  • 2
    Thanks, but in your solution if chart have lower value I have the same issue. – icy Jun 12 '17 at 13:02
  • try to set data array like this: `data: [0.1, 0.02, 3, 4, 5, 6, 7, 8, 9]` – icy Jun 12 '17 at 13:12
  • then, just increase the padding value. see updated answer. – ɢʀᴜɴᴛ Jun 12 '17 at 13:20
  • it doesn't resolve the issue in my case, but I'll accept this answer – icy Jun 12 '17 at 13:27
  • hm.. there are other ways, you can check [here](https://github.com/chartjs/Chart.js/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3A%20tooltip%20cut%20off%20) – ɢʀᴜɴᴛ Jun 12 '17 at 13:30
  • 7
    I'm thinking this should be a chartjs issue/feature. It should detect it has alot more real estate on top of the point, so the tooltip should be rendered above. (of course) unless you have the tooltip fixed to render below. – dream_team Apr 21 '20 at 16:51
  • Sadly, this solution makes my chart almost invisible. You can look at my [solution](https://stackoverflow.com/a/63205306/3190576) which provides a code for external tooltips. – gdrt Aug 01 '20 at 12:43
9

You can use external tooltips option. Here's an example from Chart.js tooltips documentation:

options: {
    tooltips: {
        // Disable the on-canvas tooltip
        enabled: false,

        custom: function(tooltipModel) {
            // Tooltip Element
            var tooltipEl = document.getElementById('chartjs-tooltip');

            // Create element on first render
            if (!tooltipEl) {
                tooltipEl = document.createElement('div');
                tooltipEl.id = 'chartjs-tooltip';
                tooltipEl.innerHTML = '<table></table>';
                tooltipEl.style.backgroundColor = "#FFFFFF";
                tooltipEl.style.borderColor = "#000000";
                tooltipEl.style.borderWidth = "thin";
                tooltipEl.style.borderStyle = "solid";
                document.body.appendChild(tooltipEl);
            }

            // Hide if no tooltip
            if (tooltipModel.opacity === 0) {
                tooltipEl.style.opacity = 0;
                return;
            }

            // Set caret Position
            tooltipEl.classList.remove('above', 'below', 'no-transform');
            if (tooltipModel.yAlign) {
                tooltipEl.classList.add(tooltipModel.yAlign);
            } else {
                tooltipEl.classList.add('no-transform');
            }

            function getBody(bodyItem) {
                return bodyItem.lines;
            }

            // Set Text
            if (tooltipModel.body) {
                var titleLines = tooltipModel.title || [];
                var bodyLines = tooltipModel.body.map(getBody);

                var innerHtml = '<thead>';

                titleLines.forEach(function(title) {
                    innerHtml += '<tr><th>' + title + '</th></tr>';
                });
                innerHtml += '</thead><tbody>';

                bodyLines.forEach(function(body, i) {
                    var colors = tooltipModel.labelColors[i];
                    var style = 'background:' + colors.backgroundColor;
                    style += '; border-color:' + colors.borderColor;
                    style += '; border-width: 2px';
                    var span = '<span style="' + style + '"></span>';
                    innerHtml += '<tr><td>' + span + body + '</td></tr>';
                });
                innerHtml += '</tbody>';

                var tableRoot = tooltipEl.querySelector('table');
                tableRoot.innerHTML = innerHtml;
            }

            // `this` will be the overall tooltip
            var position = this._chart.canvas.getBoundingClientRect();

            // Display, position, and set styles for font
            tooltipEl.style.opacity = 1;
            tooltipEl.style.position = 'absolute';
            tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
            tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
            tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
            tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
            tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
            tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
            tooltipEl.style.pointerEvents = 'none';
        }
    }
}
gdrt
  • 3,160
  • 4
  • 37
  • 56
1

Try setting the tooltips position property to nearest.

tooltips : {
    position: "nearest"
},
...
habadeer
  • 91
  • 6