[Chartjs]-Chart.js I want to fix my xAxis to my yAxis position 0

by

1👍

✅

I needed exactly same, then decided to code it myself, hope it helps someone

Play with css as your use case, comment if you need further help

Note: My chart canvas was required to be wider than its parent container (mobile 😉 and it should have a horizontal scroll but ticks were going out of view, now fixed on the left

CSS

div#ticks {
    position: fixed;
    font-size: 11px;
    pointer-events: none;
    background: white;
}
div#ticks > span {
    display: block;
    position: absolute;
    padding: 0 5px;
    font-weight: 300;
    transform: translate(-50%,-2.6px);
    left: 50%;
}

JavaScript

Chart.prototype.makeTicks = function() {
    var box = this.boxes[3];//This is canvas element with id#y-axis-0
    var lineHeight = (box.bottom-box.top)/(box.ticksAsNumbers.length-1);
    if (this.ticksDiv) {
        this.ticksDiv.remove();
        delete this.ticksDiv;
    }
    this.ticksDiv = document.createElement('div');
    this.ticksDiv.id = 'ticks';
    this.ticksDiv.innerHTML = '';
    this.ticksDiv.style.width = box.width+'px';
    this.ticksDiv.style.height = Math.ceil(box.bottom+2.6)+'px';
    box.ticksAsNumbers.forEach((tick,i)=>{
        var spn = document.createElement('span');
        spn.style.top = (i*lineHeight)+'px';
        spn.innerHTML = tick;
        this.ticksDiv.appendChild(spn);
    });
    this.canvas.parentNode.insertBefore(this.ticksDiv,this.canvas);
}

then

var chart = new Chart(ctx, {
    plugins: [{
        afterLayout: function(chart) {
            chart.makeTicks();
        }
    }],
    ...

Leave a comment