title: High and low points on chart getting cut off
body: <p>The low and high points on this chart are getting cut off, is there any way to fix this <em>without</em> knowing what numbers will be in the data?</p>
  
  <p>I've seen other people create some padding with the chart's minimum and maximum values, but I don't know what the values will be beforehand. </p>
  
  <p>Chart:
  <img src="https://i.stack.imgur.com/VFbmq.png" /></p>
  
  <p>A similar example suffering from the same problem is shown here: <a href="http://codepen.io/erose/pen/LNwdQO/" rel="nofollow noreferrer">http://codepen.io/erose/pen/LNwdQO/</a></p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="chart-container"&gt;
    &lt;canvas id="chart"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.chart-container {
    width: 493px;
    height: 83px;
  }
  
  canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  </code></pre>
  
  <p>and here the JS used to create the above chart:</p>
  
  <pre><code>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
          // }
        }]
      }
    }
  });
  </code></pre>