Chartjs: chart is blurry when using webworker

I am trying to use chart.js with webworker. I am able to create the webworker and show the chart on the screen with the right dimensions.

The problem is: the chart is blurry and a bit "zoomed in". It's like the responsivness or the ratio is not working.

Hier is the differences:





These are the configuration i use for the chart :

const config: ChartOptions = {
//...plugins etc...to avoid printing several lines
responsive: true,
maintainAspectRatio: false,
};
const parentNode = document.getElementById("chart-parent") as HTMLDivElement;
const canvas = document.getElementById("chart") as HTMLCanvasElement;

const offscreenCanvas = canvas.transferControlToOffscreen();
worker.postMessage(
{
canvas: offscreenCanvas,
config,
data: getChart(),
sizes: { width: parentNode.clientWidth, height: parentNode.clientHeight },
},
[offscreenCanvas]
);

// RESIZING => not really working
function resize() {
console.log("Rezise");
worker.postMessage({
sizes: { width: parentNode.clientWidth, height: parentNode.clientHeight },
});
}

window.onresize = resize;


Html:

<div class="chart-container">
<canvas id="chart"></canvas>
</div>


Css:

.chart-container {
position: relative;
height: 300px;
width: 80vw;

canvas#chart {
height: 100%;
width: 100%;
}
}


In the worker, i instantiate the Chart with the given configuration and a simple array for the data.

let chart: Chart | null;
let myConfig: ChartConfiguration;
onmessage = function (event) {
const { canvas, config, data, sizes } = event.data;
myConfig = config;
if (canvas && config && data) {
chart = new Chart(canvas, {
type: "line",
options: config,
data: {
labels: data.map((row: { year: any }) => row.year),
datasets: [
{
label: "Acquisitions by year",
data: data.map((row: { count: any }) => row.count),
},
],
},
});
}
if (sizes && chart) {
canvas.height = sizes.height;
canvas.width = sizes.width;
chart.resize();
}
};


UPDATE: changing the devicePixelRatio to my window.devicePixelRatio in the option configuration looks to solve a part of my problem: initial width/height/ratio and blurryness is OK but the responsiveness is not working...

const config: ChartOptions = {
//...plugins...
responsive: true,
maintainAspectRatio: false,
devicePixelRatio: window.devicePixelRatio,
};




Thank you very much and have a nice day.

Continue reading...