'Charts.js how to set zero-value on axis?

I'm trying to implement a horizontal bar chart with Charts.js (sample page)

Standard behavior is, that the bars split at the "mirror line" at "0"

See image

How can I set it up to use a different value as mirror line? Like:

See image

Thank your for your advice !

I've found this code on a another post, it will shift the whole graph to the right, maybe this helps?

jsFiddle

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

    Chart.pluginService.register({
        afterUpdate: function(chart) {
            var dataset = chart.config.data.datasets[0];
            var offset = 20;
        
            for (var i = 0; i < dataset._meta[0].data.length; i++) {
                var model = dataset._meta[0].data[i]._model;
                model.x += offset;
                model.controlPointNextX += offset;
                model.controlPointPreviousX += offset;
            }
        }
    });

    var myChart = new Chart.Line(ctx, {
        type: 'line',
        data: {
            labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
            datasets: [{
                data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
                pointLabelFontSize : 4,
                borderWidth: 2,
                fill: false,
                lineTension: .3,
                borderColor: "#f37029",
                borderCapStyle: 'round',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'bevel',
                pointBorderColor: "#f37029",
                pointBackgroundColor: "#f37029",
                pointBorderWidth: 1,
                pointHoverRadius: 4,
                pointHoverBackgroundColor: "rgba(220,220,220,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 4,
                pointHitRadius: 10,
                spanGaps: false,
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        offsetGridLines: true,
                        display: false,
                        borderDash: [6, 2],
                        tickMarkLength:5
                    },
                    ticks: {
                         fontSize: 8,
                         labelOffset: 10,
                         maxRotation: 0
                    }}],
                yAxes: [{
                    gridLines: {
                        display:false
                    },
                    ticks: {
                        beginAtZero: true,
                        max: 200,
                        min: 0,
                        stepSize: 20,
                        fontSize: 8
                    }
                }]
            },
            legend: {
                display: false
            },
            responsive: false,
            maintainAspectRatio: true
        }
    });


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source