Chart.plugins.register({
chartUpdated: false,
preload: false,
imageLoaded: false,
image: new Image(),
loadImage: function(chart) {
var _this = this;
this.image.onload = function() {
_this.imageLoaded = true;
_this.drawScale(chart, this);
}
this.image.src = 'https://i.imgur.com/YDRy5jA.png'; // image URL
},
drawScale: function(chart, img) {
var ctx = chart.ctx,
y_axis = chart.scales['y-axis-0'],
topY = y_axis.top,
bottomY = y_axis.bottom,
scaleHeight = bottomY - topY,
scaleOffset = scaleHeight * (img.width / img.height * 100) / 100;
chart.options.layout = {
padding: {
left: scaleOffset
}
}
ctx.drawImage(img, 0, topY, scaleOffset, scaleHeight);
if (!this.chartUpdated) {
chart.update();
this.chartUpdated = true;
}
},
afterDraw: function(chart, ease) {
if (!this.preload) {
this.loadImage(chart);
this.preload = true;
} else if (this.imageLoaded) this.drawScale(chart, this.image);
}
});
Chart.plugins.register({
beforeDraw: function(chart) {
var ctx = chart.chart.ctx,
x_axis = chart.scales['x-axis-0'],
topY = chart.scales['y-axis-0'].top,
bottomY = chart.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false;
for (i = 0; i <= x_axis.ticks.length; i++) {
var x = i === x_axis.ticks.length ?
x_axis.right :
x_axis.getPixelForValue(x_axis.ticks[i]);
ctx.save();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
ctx.restore();
}
}
});
var options = {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
borderWidth: 2,
borderColor: "#5d5d5d",
pointBorderColor: "#5d5d5d",
pointBackgroundColor: "#5d5d5d",
pointBorderWidth: 5,
type: 'line',
data: [26, 26, 33, 28, 30],
fill: false,
lineTension: 0
}, {
... (repeated content removed for brevity)
}]
},
options: {
... (options configuration continued here for brevity)
}
}
var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas" width="400"></canvas>