Die Tief- und Hochpunkte in diesem Diagramm werden abgeschnitten. Gibt es eine Möglichkeit, das zu beheben?ohn Wissen, welche Zahlen in den Daten enthalten sein werden?

Ich habe andere Leute gesehen, die eine Auffüllung mit den minimalen und maximalen Werten des Diagramms erstellt haben, aber ich weiß vorher nicht, wie die Werte aussehen werden.

Diagramm:

Ein ähnliches Beispiel, das unter dem gleichen Problem leidet, wird hier gezeigt:http: //codepen.io/erose/pen/LNwdQO

Hier ist der HTML-Code:

<div class="chart-container">
  <canvas id="chart"></canvas>
</div>

Hier ist das CSS:

.chart-container {
  width: 493px;
  height: 83px;
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

und hier der JS, mit dem das obige Diagramm erstellt wurde:

var ctx = $("#chart");

Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.backgroundColor = "lightblue";
Chart.defaults.global.tooltips.bodyFontFamily = "sans-serif";
Chart.defaults.global.tooltips.bodyFontSize = 20;
Chart.defaults.global.tooltips.bodyColor = "#95989a";
Chart.defaults.global.tooltips.bodyAlign = "left";
Chart.defaults.global.tooltips.titleFontSize = 0;
Chart.defaults.global.tooltips.titleMarginBottom = 0;
Chart.defaults.global.tooltips.footerMarginTop = 0;
Chart.defaults.global.tooltips.cornerRadius = 12;
Chart.defaults.global.tooltips.caretSize = 10;
Chart.defaults.global.tooltips.xPadding = 20;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.scale.gridLines.color = 'white';

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["            ", "", "", "", "", "", "", "", "", "            "],
    datasets: [{
      label: ',
      data: [100,100,100,100,0,100,100,100,100,100],
      fill: false,
      borderWidth: 1,
      borderColor: "#2f75c1",
      borderCapSytle: "round",
      pointBorderColor: "#2f75c1",
      pointBackgroundColor: "#2f75c1",
      pointBorderWidth: 5,
      pointHoverRadius: 10,

    }]
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: false
        },
        scaleLkneColor: 'white',
        ticks: {
          display: false
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: false
        },
        // ticks: {
        //   display: false
        // }
      }]
    }
  }
});