Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

chartjs tooltip is cut off when out of canvas [duplicate]

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

like image 952
icy Avatar asked Jun 12 '17 10:06

icy


People also ask

How do I override the tooltip defaults for chart types?

The bubble, doughnut, pie, polar area, and scatter charts override the tooltip defaults. To change the overrides for those chart types, the options are defined in Chart.overrides [type].plugins.tooltip.

What are the options for chart tooltips in namespace?

Namespace: options.plugins.tooltip, the global options for the chart tooltips is defined in Chart.defaults.plugins.tooltip. The bubble, doughnut, pie, polar area, and scatter charts override the tooltip defaults.

How do I enable external tooltips in a chart?

The external option takes a function which is passed a context parameter containing the chart and tooltip. You can enable external tooltips in the global or chart configuration like so: Copied! See samples for examples on how to get started with external tooltips. The tooltip model contains parameters that can be used to render the tooltip.

What are the options for aligning text in the tooltip?

The titleAlign, bodyAlign and footerAlign options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported.


1 Answers

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>
like image 170
ɢʀᴜɴᴛ Avatar answered Sep 16 '22 11:09

ɢʀᴜɴᴛ