[Chartjs]-Add spaces/margin between bars – Chart.js

by

4👍

✅

You should set the categoryPercentage to lower value like 0.8 and barPercentage to 1.

Graphical info about categoryPercentage vs barPercentage:

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|

// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|

// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:             |1.0||1.0|
Category:        |   .5   |
Sample:     |==================|

EDIT:

You can get the bar width from the metasets of the chart and use that to draw it on the chart like so:

const plugin = {
  id: 'background',
  beforeDraw: (chart, args, opts) => {
    if (!opts.color) {
      return;
    }

    const {
      ctx,
      chartArea,
      _metasets
    } = chart;

    ctx.fillStyle = opts.color;

    _metasets.forEach(meta => {
      meta.data.forEach(data => {
        if (data.horizontal) {
          ctx.fillRect(chartArea.left, (data.y - (data.height / 2)), chartArea.width, data.height)
        } else {
          ctx.fillRect((data.x - (data.width / 2)), chartArea.top, data.width, chartArea.height)
        }
      })
    });
  }
}

Chart.register(plugin);

var colors = [];
for (var i = 0; i < 5; i++) {
  colors.push('#5671DB');
}
var config = {
  type: 'bar',
  data: {
    labels: ['Commerce, vente', 'Transport', 'Bureautique', 'Accueil', 'Santé', 'Secrétariat', 'Nettoyage', 'Sécurité', 'Mécanique', 'Agro-alimentaire'],
    datasets: [{
      data: [23.8, 17.7, 13, 9.5, 7.8, 7, 5.5, 5, 4.5, 3.5],
      backgroundColor: colors,
      hoverBackgroundColor: colors,
      borderColor: colors,
    }],
  },
  options: {
    onHover() {},
    indexAxis: 'y',
    barPercentage: 0.8,
    //barThickness: 60,
    // maxBarThickness: 60,
    categoryPercentage: 1.0,
    maintainAspectRatio: true,
    responsive: true,
    plugins: {
      background: {
        color: '#CDECEF'
      },
      title: {
        display: false,
        text: "Les 10 principaux domaines d'emploi",
        align: 'start',
        fullSize: true,
        color: '#324488',
        font: {
          size: 24,
          family: 'Arial',
        }
      },
      legend: {
        display: false
      },
      tooltip: {
        backgroundColor: 'rgba(255,255,255,0)',
        displayColors: false,
        titleFont: {
          size: 0,
        },
        titleMarginBottom: 0,
        titleSpacing: 0,
        bodyFont: {
          size: 25,
          weight: 700
        },
        xAlign: 'right',
        callbacks: {
          label: (item) => (`${item.parsed.x} %`),
        },
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          color: "#34478B",
          font: {
            size: 18,
          },
          stepSize: 1,
          beginAtZero: true
        },
      },
      x: {
        ticks: {
          color: "#25C8C9",
          font: {
            size: 14
          },
          stepSize: 1,
          beginAtZero: true
        },

      }
    }
  },
};


var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, config);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

codePen

0👍

If reducing the bar size is not a problem you could add barPercentage to your options.

Like this:

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    barPercentage: 0.8
  }
};

Bar Chart | Charts.js

Leave a comment