Wie macht man ChartJS Tooltips nicht abgeschnitten?

Question

Ich versuche herauszufinden, wie man macht chartjs nicht abgeschnitten es ist Tooltips, aber ich kann nicht scheinen, eine Config-Option zu finden, um das zu beheben.

Das ist, was ich bisher versucht habe:

<script> 
     $(document).ready(function() { 


      var doughnutData = [ 
       { 
        value: 48.3, 
        color: "#81d7d8", 
        highlight: "#23c6c8", 
        label: "Accepted" 
       }, 
       { 
        value: 20.7, 
        color: "#f58894", 
        highlight: "#d9534f", 
        label: "Denied" 
       }, 
       { 
        value: 31, 
        color: "#f5c592", 
        highlight: "#f8ac59", 
        label: "Pending" 
       } 
      ]; 

      var doughnutOptions = { 
       segmentShowStroke: true, 
       segmentStrokeColor: "#fff", 
       segmentStrokeWidth: 2, 
       percentageInnerCutout: 45, // This is 0 for Pie charts 
       animationSteps: 100, 
       animationEasing: "easeOutBounce", 
       animateRotate: true, 
       animateScale: false, 
        fullWidth: true 
      }; 

      var ctx = document.getElementById("doughnutChart").getContext("2d"); 
      var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions); 



     }); 
    </script> 

In meinem HTML der jeweilige Abschnitt wie folgt aussieht:

<div class="col-lg-3"> 
    <div class="ibox float-e-margins"> 
     <div class="ibox-content"> 
      <canvas id="doughnutChart" width="95" height="95" style="width: 95px; height: 95px;"></canvas> 
     </div> 
    </div> 
</div> 

Wer mich zu dem, was darauf hinweisen könnte ich Vermisse ich hier?

Answer 1

Da Sie das Erbe verwenden Chart.js v1.x, die Sie nicht so viele Möglichkeiten wie in der v2.x haben.

Eine einfache Möglichkeit, Ihr Problem zu beheben, besteht darin, den Stil Ihrer Tooltips in Ihren Optionen zu bearbeiten. Dies wird nicht als Standard 95px von height und width für Ihr Diagramm ändern:

var doughnutOptions = { 
     // ... 
     fullWidth: true, 
     tooltipFontSize: 10 
    }; 

Und wird this result geben.