Remove blank space in chart.js chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Remove blank space in chart.js chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Charts.js demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from   w w w  . j ava 2 s.c om
$(function() {
  myBarChart = new Chart($("#myChart"), {
    type: 'horizontalBar',
    data: {
      labels: ["Actions"],
      datasets: [{
        label: 'Closed : 50 (65%)',
        data: [50],
        backgroundColor: [
          'rgba(255, 0, 0, 0.5)'
        ],
        borderColor: [
          'rgba(255, 0, 0, 1)'
        ],
        borderWidth: 1
      }, {
        label: 'Delayed : 20 (12%)',
        data: [20],
        backgroundColor: [
          'rgba(0, 0, 255, 0.5)'
        ],
        borderColor: [
          'rgba(0, 0, 255, 1)'
        ],
        borderWidth: 1
      }, {
        label: 'Open : 12 (5%)',
        data: [12],
        backgroundColor: [
          'rgba(0, 255, 0, 0.5)'
        ],
        borderColor: [
          'rgba(0, 255, 0, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      maintainAspectRatio: false,
      responsive: true,
      legend: {
        position: "right"
      },
      scales: {
        xAxes: [{
          max: 82,
          display: false,
          gridLines: {
            display: false
          },
          stacked: true
        }],
        yAxes: [{
          max: 82,
          display: false,
          gridLines: {
            display: false,
          },
          stacked: true,
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
  var total = 0;
  var value = 0;
  for (var i = 0; i < myBarChart.data.datasets.length; i++) {
    total += myBarChart.data.datasets[i].data[0]
  }
  value = (100 - total) / myBarChart.data.datasets.length
  for (var i = 0; i < myBarChart.data.datasets.length; i++) {
    myBarChart.data.datasets[i].data[0] += value;
  }
  myBarChart.update();
});
    });

      </script> 
   </head> 
   <body> 
      <div style="border:1px solid black"> 
         <canvas id="myChart" height="100"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials