[Chartjs]-High and low points on chart getting cut off

by

4👍

From reading your question I believe you not only want the for the circle to not be cut off but you would like some extra padding inside the chart.

For that I would structure this a little different:

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 getData = [100,100,100,100,0,100,100,100,100,100];
var getLabels = ["", "", "", "", "", "", "", "", "", ""];
var minNum = function(array){
  return Math.min.apply( Math, array )-10;
}
var maxNum = function(array){
  return Math.max.apply( Math, array )+10;
}
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: getLabels,
    datasets: [{
      label: '$',
      data: getData,
      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: {
          suggestedMin: minNum(getData), 
          suggestedMax: maxNum(getData),
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: false
        },
        // ticks: {
        //   display: false
        // }
      }]
    }
  }
});
.chart-container {
  width: 493px;
  height: 83px;
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<div class="chart-container">
  <canvas id="chart"></canvas>
</div>

2 Important changes

  1. I create a getData var to hold the array this way the array can be formatted however you like the function does not care it just looks for getData and expects an array.
  2. I created a minNum and maxNum function to go through the array and select either the lowest or highest number then call that inside the ticker you can find more on this at ChartJS Scales

Leave a comment