Remove blank space in horizontal stack 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 horizontal stack 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(){//ww  w  .  j a  va2  s. co m
$(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: [30],
        backgroundColor: [
          'rgba(0, 255, 0, 0.5)'
        ],
        borderColor: [
          'rgba(0, 255, 0, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      //tooltips: { enabled: false },
      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
          }
        }]
      }
    }
  });
});
    });

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

Related Tutorials