Chartjs-Remove blank space in chart.js chart

by

1👍

Use

xAxes: [{
    ticks: { max: 82 },
    ...
}]

instead of 

xAxes: [{
    max: 82,
    ...
}]

$(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: {

                //tooltips: { enabled: false },
                maintainAspectRatio: false,
                responsive: true,
                legend: {
                    position: "right"
                },
                scales: {

                    xAxes: [{
                        ticks: { max: 82 },

                        display: false,
                        gridLines: {
                            display: false
                        },
                        stacked: true
                    }],
                    yAxes: [{
                        max: 82,
                        display: false,
                        gridLines: {
                            display: false,
                        },
                        stacked: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
        });
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div style="border:1px solid black">
<canvas id="myChart" height="100"></canvas>
</div>

0👍

http://jsfiddle.net/uLUAT/1166/
I tried different things but I cant fix it. Can you change your data? If your datas total equal 100 there is no problem I think

 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
  }]
},

http://jsfiddle.net/uLUAT/1167/ I created a function check out. You dont need to change values any more.

  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();

Leave a comment