Chart.js - How to offset bars from ZeroLine

Question

I've spent hours already trying to figure out how to offset the horizontal bars from the zero line on X-Axis so it doesn't overlap when the width of the line is bigger than 1.

Appreciate all the help.

Example is here on CodePen (hope it will show up): https://codepen.io/RomanKl/pen/mzmegG

var barOptions = {
tooltips: {
    enabled: false
},
hover :{
    animationDuration:0
},
scales: {
    xAxes: [{
        ticks: {
            beginAtZero:true,
          min: 0,
          max: 10000,
            fontFamily: "'Open Sans Bold', sans-serif",
            fontSize:12,
          callback: function(value, index, values) {
                    return Math.round(value/1000) + 'k';
          }
        },
        scaleLabel:{
            display:false
        },
        gridLines: {
          color: ['#000', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef'],
          lineWidth: [4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          zeroLineWidth: 4,
          zeroLineColor: '#000',

        }, 
    }],
    yAxes: [{
        gridLines: {
          display: false,
        },
        ticks: {
            fontFamily: "'Open Sans Bold', sans-serif",
            fontSize:14,
        },

    }]
},
legend:{
    display:false
},

animation: {
    onComplete: function () {
        var chartInstance = this.chart;
        var ctx = chartInstance.ctx;
        ctx.textAlign = "left";
        ctx.font = "1.6rem Open Sans";
        ctx.fillStyle = "#fff";

        Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            Chart.helpers.each(meta.data.forEach(function (bar, index) {
                data = dataset.data[index];
              data = data.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                if(i==0){
                    ctx.fillText(data, 80, bar._model.y+4);
                } else {
                    ctx.fillText(data, bar._model.x-25, bar._model.y+4);
                }
            }),this)
        }),this);
    }
},

};

var ctx = document.getElementById("Chart1");

var myChart = new Chart(ctx, { type: 'horizontalBar', borderSkipped: 'bottom', data: { labels: ["Aug.'17", "Aug.'18"],

    datasets: [{
        data: [6336, 6892],
        backgroundColor: "rgba(63,103,126,1)",
        hoverBackgroundColor: "rgba(50,90,100,1)"
    }]
},

options: barOptions,

});

roumen roumen · Accepted Answer · 2018-10-05T16:38:50

So I've brutally hacked it in the end. I've tried adding a border and then skip it everywhere except the start where I would set the colour to transparent but guess what? Border doesn't show up at the start. It's a requested feature not yet implemented in chart.js as of this posting.

In the end I've used a diabolical solution of using two stacked datasets while setting the first one via data to the desired offset and then setting backgroundColor to transparent and shifting data labels to the left via plugin.

you can see the result in the codepen link posted in the question.

Chart.js - How to offset bars from ZeroLine

1 Answers