0👍
When drawing the image inside the beforeDraw
hook, you should should specify its width
and height
depending on the size of the canvas
.
const x = left + width / 2 - height / 2;
const y = top + height / 2 - height / 2;
ctx.drawImage(image, x, y, height, height);
Please take a look at your amended code and see how it works.
const data = {
datasets: [{
label: "Elevation",
radius: 0,
borderWidth: 2,
pointBorderColor: 'blue',
pointBackgroundColor: 'red',
data: [{
x: "03/02/2022",
y: "659.63"
}, {
x: "03/03/2022",
y: "659.6"
}, {
x: "03/04/2022",
y: "659.6"
}, {
x: "03/05/2022",
y: "659.63"
}, {
x: "03/06/2022",
y: "659.81"
}, {
x: "03/07/2022",
y: "659.86"
}, {
x: "03/08/2022",
y: "659.99"
}, {
x: "03/09/2022",
y: "660.29"
}, {
x: "03/10/2022",
y: "660.38"
}, {
x: "03/11/2022",
y: "660.39"
}, {
x: "03/12/2022",
y: "660.78"
}, {
x: "03/13/2022",
y: "660.95"
}, {
x: "03/14/2022",
y: "660.95"
}, {
x: "03/15/2022",
y: "661.01"
}, {
x: "03/16/2022",
y: "661.48"
}, {
x: "03/17/2022",
y: "661.39"
}, {
x: "03/18/2022",
y: "661.24"
}, {
x: "03/19/2022",
y: "661.34"
}, {
x: "03/20/2022",
y: "661.44"
}, {
x: "03/21/2022",
y: "661.34"
}, {
x: "03/22/2022",
y: "661.12"
}, {
x: "03/23/2022",
y: "661.27"
}, {
x: "03/24/2022",
y: "661.29"
}, {
x: "03/25/2022",
y: "661.29"
}, {
x: "03/26/2022",
y: "661.29"
}, {
x: "03/27/2022",
y: "661.29"
}, {
x: "03/28/2022",
y: "661.52"
}, {
x: "03/29/2022",
y: "661.53"
}, {
x: "03/30/2022",
y: "661.44"
}, {
x: "03/31/2022",
y: "661.36"
}, {
x: "04/01/2022",
y: "661.0"
}, {
x: "04/02/2022",
y: "660.68"
}, {
x: "04/03/2022",
y: "660.41"
}, {
x: "04/04/2022",
y: "660.247"
}, {
x: "04/05/2022",
y: "660.31"
}, {
x: "04/06/2022",
y: "660.46"
}, {
x: "04/07/2022",
y: "660.7"
}, {
x: "04/08/2022",
y: "660.73"
}, {
x: "04/09/2022",
y: "660.73"
}, {
x: "04/10/2022",
y: "660.73"
}, {
x: "04/11/2022",
y: "660.85"
}, {
x: "04/12/2022",
y: "660.87"
}, {
x: "04/13/2022",
y: "660.83"
}, {
x: "04/14/2022",
y: "660.75"
}, {
x: "04/15/2022",
y: "660.73"
}],
fill: false,
borderColor: 'blue'
}]
};
//plugin block
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const {
ctx,
chartArea: {
left,
top,
width,
height
}
} = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
const image = new Image();
image.src = 'https://i.stack.imgur.com/S7tJH.png';
const imgPlugin = {
id: 'custom_canvas_background_image',
beforeDraw: (chart) => {
if (image.complete) {
const ctx = chart.ctx;
const {
top,
left,
width,
height
} = chart.chartArea;
const x = left + width / 2 - height / 2;
const y = top + height / 2 - height / 2;
ctx.drawImage(image, x, y, height, height);
} else {
image.onload = () => chart.draw();
}
}
};
var GradientBgPlugin = {
beforeDraw: function(chart, args, options) {
const ctx = chart.ctx;
const canvas = chart.canvas;
const chartArea = chart.chartArea;
// Chart background
var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
gradientBack.addColorStop(0, "rgba(255, 255, 255, 0.7)");
gradientBack.addColorStop(1, "rgba(200, 204, 255, 0.7)");
ctx.fillStyle = gradientBack;
ctx.fillRect(chartArea.left, chartArea.bottom, chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
}
};
//config block
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom'
},
title: {
display: true,
text: "HARTWELL PROJECT ",
font: {
size: 20
}
},
},
scales: {
x: {
type: 'time',
time: {
parser: 'MM/dd/yyyy',
unit: 'month',
displayFormats: {
month: 'MMM yyyy'
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
position: 'left',
display: true,
text: 'Elevation (FT-MSL)'
}
}
},
chartAreaBorder: {
borderColor: 'black',
borderWidth: 10,
//borderDash: [5, 5],
borderDashOffset: 5
},
imgPlugin: {}
},
plugins: [chartAreaBorder, imgPlugin, GradientBgPlugin]
};
// render block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
- Chartjs-Legend not displayed for radar Angular-chart.js
- Chartjs-How to insert dynamic data from sql into chartjs stacked bar chart javascript
Source:stackexchange.com