Hide min and max values from y Axis in Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Axis

  1. HOME
  2. Javascript
  3. Chart.js
  4. Axis

Description

Hide min and max values from y Axis in Chart.js

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js - Hiding Some Ticks</title> 
   </head> 
   <body translate="no"> 
      <div style="width:40%; float: left;"> 
         <canvas id="canvas"></canvas> 
      </div> 
      <div style="width:40%; float: left;"> 
         <canvas id="canvas2"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
      var chartColors = {// ww  w  .ja v  a2s  .c om
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(231,233,237)'
};
var randomScalingFactor = function() {
  min = 20;
  max = 90;
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
var data = {
  labels: ["Car", "Bike", "Walking"],
  datasets: [{
    label: 'Fuel',
    backgroundColor: [
      chartColors.red,
      chartColors.blue,
      chartColors.yellow],
    data: [
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
    ]
  }]
};
var myChart = new Chart(document.getElementById("canvas"), {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js - Original Chart With Min/Max"
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    legend: {
      display: false,
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 10,
          max: 90,
        },
      }],
    }
  }
});
var myChart2 = new Chart(document.getElementById("canvas2"), {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js - Modified Chart Hiding Min/Max"
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    legend: {
      display: false,
    },
    scales: {
      yAxes: [{
        afterTickToLabelConversion: function(scaleInstance) {
          scaleInstance.ticks[0] = null;
          scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
          scaleInstance.ticksAsNumbers[0] = null;
          scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
        },
        ticks: {
          min: 10,
          max: 90,
        },
      }],
    }
  }});
      </script>  
   </body>
</html>

Related Tutorials