Charts update leads to unexpected scroll

I am working on an Angular application using Primeng and Chart.js. I have a big webpage with many forms and charts. When I update one field of my forms, I need to update the corresponding charts. All is working fine. Except when the chart is outside of the screen, changing the field value leads to the update of the charts but also to a scroll of the page to make the charts visible. This is very annoying for the user who must scroll down to continue to fill the forms.

Here are the options I defined for the charts :

{
indexAxis: "y",
animation: false,
aspectRatio: 0.2,
maintainAspectRatio: false,
scales: {
x: {
axis: "x",
},
y: {
axis: "y",
}
},
x: {
beginAtZero: true,
stacked: true
},
y: {
beginAtZero: true,
stacked: true
},
cutout: "50%",
plugins: {
title: {
color: "gray",
font: {
weight: "bold",
size: 12
}
},
legend: {
display: false,
position: "top"
},
datalabels: {
color: "white",
align: "center",
anchor: "center",
textAlign: "center",
formatter: (val: number, ctx: Context): string => {
if (val) {
const label = ctx.chart.data.labels[ctx.datasetIndex] as string;
const value = ctx.chart.data.datasets[ctx.datasetIndex].data[0];
return `${label} (${value})`;
}
return '';
},
},
tooltip: {
enabled: true,
callbacks: {
title: (): string => '',
label: (tooltipItem: any): string => {
const { chart } = tooltipItem;
const label = chart.data.labels[tooltipItem.datasetIndex];
const value: number = chart.data.datasets[tooltipItem.datasetIndex].data[0];
return `${label}: ${value}`;
},
},
},
},
}


Then I use theses options in the html template like this :

<p-chart type="bar" [data]="data" [plugins]="barChartPlugins"
[options]="options" width="280px" height="80px" />


I have tried to add these properties :

interaction: {
mode: undefined,
intersect: false,
},
transitions: {
active: { animation: { duration: 0 } },
show: { animation: { duration: 0 } },
hide: { animation: { duration: 0 } },
},


It doesn't change anything. I tried to make a directive to access each chart and define their tabindex to -1. The directive sets this value correctly, but it has no visible effect.

I have just noticed something else. I have a webpage with 3 angular components : PageComponent with 2 children : HeaderComponent and ContentComponent. The forms are in the content, the charts are in both header and content. If I remove the charts from the content, there is no scroll to the header, despite of the fact the charts of the header are updated.

Does someone have an idea about how I could fix this issue ?

Continue reading...