I have the following horizontal bar chart

<template>
<div>
   <canvas id="myChart" width="100" height="100"></canvas>
</div>
</template>

<script>
import Chart from 'chart.js';
export default {
    data() {
        return {
            ctx: null,
            chart: null,
        }
    },

    mounted() {
        this.ctx = document.getElementById('myChart');
        this.chart = new Chart(this.ctx, {
            type: 'horizontalBar',
            data: {
                labels: ['1', '2', '3', '4', '5'],
                datasets: [{
                    categoryPercentage: 0.4,
                    label: 'Stars',
                    data: [15, 28, 34, 48, 100],
                    backgroundColor: [
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',

                    ],
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true,
                        categoryPercentage: 0.4
                    }]
                }
            }
        });
    }
}
</script>

I want to reduce the spacing between one bar and the other (not eliminate it, just reduce it), but I don't know how to do this, if I use the categoryPercentage prop it does about the same as barPercentage, just reduces the size of the bar itself but not the distance between each bar.

This is how is looking right now

If possible I would also have the chart in a blank canvas too

I have the following horizontal bar chart

<template>
<div>
   <canvas id="myChart" width="100" height="100"></canvas>
</div>
</template>

<script>
import Chart from 'chart.js';
export default {
    data() {
        return {
            ctx: null,
            chart: null,
        }
    },

    mounted() {
        this.ctx = document.getElementById('myChart');
        this.chart = new Chart(this.ctx, {
            type: 'horizontalBar',
            data: {
                labels: ['1', '2', '3', '4', '5'],
                datasets: [{
                    categoryPercentage: 0.4,
                    label: 'Stars',
                    data: [15, 28, 34, 48, 100],
                    backgroundColor: [
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',

                    ],
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true,
                        categoryPercentage: 0.4
                    }]
                }
            }
        });
    }
}
</script>

I want to reduce the spacing between one bar and the other (not eliminate it, just reduce it), but I don't know how to do this, if I use the categoryPercentage prop it does about the same as barPercentage, just reduces the size of the bar itself but not the distance between each bar.

This is how is looking right now

If possible I would also have the chart in a blank canvas too

• javascript
• chart.js

• stackoverflow./questions/34203301/… – Martin Zeitler Commented Sep 15, 2020 at 5:47

1 Answer 1

The bar width is influenced through the options barPercentage and categoryPercentage, which both need to be defined on the dataset.

To find out about the relationship between barPercentage and categoryPercentage, see here.

Please take a look at your amended runnable code below:

new Chart('myChart', {
  type: 'horizontalBar',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      barPercentage: 0.9,
      categoryPercentage: 1,
      label: 'Stars',
      data: [15, 28, 34, 48, 100],
      backgroundColor: [
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)'
      ],
    }]
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

In case you simply want to see the existing bars closer to each other, you need to change the height of the chart. This can be done directly on the canvas through the height attribute. Alternatively you may also enclose the canvas in a div that has its dimensions defined by some CSS.