I did not find a way to "nicely" implement this. I’ve changed the source code of the ChartJS library to implement this.

This method uses 2 different graphs that render in 2 different canvas objects. These canvas objects are placed side-by-side to let it look like one graph.

This is my result (The code in here is not exactly like the graph in the picture because I changed it to my specific needs).

I’ve added a custom variable in the options.layout category named sidePadding.

The code of creating the graph:

new Chart(document.getElementById(this.element), {
         type: 'scatter',
         data: {
             datasets: [{
                 borderColor: this.lineColor,
                 borderWidth: 1,
                 pointBackgroundColor: '#000',
                 pointBorderColor: '#000',
                 pointRadius: 0,
                 fill: false,
                 tension: 0,
                 showLine: true,
                 data: [],
             }],
         },
         options: {
             aspectRatio: 0.3,
             maintainAspectRatio: false,
             responsive: true,
             layout: {
                 sidePadding: {
                     left: 3,
                     right: -3,
                 }
             }
         }
     });

The padding on the sides is by default 3 so it does not touch the border of the canvas. I wanted it to touch the border of the canvas, and therefore set it to -3.

Two different graphs need to be created, one for the left side and one for the right side.
The left graph should have the sidePadding.right set to -3. The right graph should have the sidePadding.left set to -3.

Changes in the ChartJS library

I’ve worked with ChartJS version v2.9.3. This method will possibly not work anymore in a new version.

I’ve changed the following in the Chart.js file:

Replace (line number around 11800):

// Adjust padding taking into account changes in offsets
// and add 3 px to move away from canvas edges
me.paddingLeft = Math.max((paddingLeft - offsetLeft) * me.width / (me.width - offsetLeft), 0) + 3;
me.paddingRight = Math.max((paddingRight - offsetRight) * me.width / (me.width - offsetRight), 0) + 3;

to:

// Adjust padding taking into account changes in offsets
// and add 3 px to move away from canvas edges
var layoutOptions = chart.options.layout || {};
var sidePadding = helpers$1.options.toPadding(layoutOptions.sidePadding);
me.paddingLeft = Math.max((paddingLeft - offsetLeft) * me.width / (me.width - offsetLeft), 0) + sidePadding.left;
me.paddingRight = Math.max((paddingRight - offsetRight) * me.width / (me.width - offsetRight), 0) + sidePadding.right;

Also you must add the sidePadding.left and sidePadding.right parameter to ChartJS.

This can be done by changing (line number around 7180):

core_defaults._set('global', {
    layout: {
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        // Custom added parameter
        sidePadding: {
            left: 3,
            right: 3,
        }
    }
});

to:

core_defaults._set('global', {
    layout: {
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        // Custom added parameter
        sidePadding: {
            left: 3,
            right: 3,
        }
    }
});

Note

This is probably not the best way to achieve this. Changing the ChartJS library is bad-practice and updating the library could revert these changes.

If someone has a better way to achieve this, please post your methods or comment below.