I can't figure out why I'm not able to remove this random padding injected inside my line chart in Chart.js (file attached).
Here is a part of my chart configuration :
myChart.current = new Chart(canvasRef.current, {
type: "line",
data,
options: {
tension: 0.6,
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: (context) => {
const tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
setShowTooltip(false);
return;
}
setShowTooltip(true);
const tooltipEl = tooltipRef.current;
const currentTooltipWidth = tooltipEl.clientWidth;
const currentTooltipHeight = tooltipEl.clientHeight;
const currentTooltipCenterAlign = currentTooltipWidth / 2;
let left =
tooltipModel.dataPoints[0].element.x -
currentTooltipCenterAlign;
if (left < 0) {
left = Math.abs(left);
}
let top =
tooltipModel.dataPoints[0].element.y -
currentTooltipHeight -
offsetY;
if (top < 0) {
top = tooltipModel.dataPoints[0].element.y + offsetY;
}
const date = tooltipModel.dataPoints[0].label;
const value = tooltipModel.dataPoints[0].raw;
setPositionAndData(top, left, date, value);
},
},
},
},
});
Thank you very much for your help :) ! [1]: https://i.stack.imgur.com/lNi5p.png