Skip to content

perf(dashboards): Fix slow re-render of ECharts objects #103375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 14, 2025
Merged

perf(dashboards): Fix slow re-render of ECharts objects #103375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6a14042
Allow ECharts option merge
gggritso Nov 14, 2025
ce832d2
Allow turning off `BaseChart` animations
gggritso Nov 14, 2025
54c8de9
Turn off animations
gggritso Nov 14, 2025
b076fca
Add clarifying comments
gggritso Nov 14, 2025
27fbc62
Pass through animation prop
gggritso Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion static/app/components/charts/barChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,12 @@ export function BarChart({
}, [xAxis]);

return (
<BaseChart {...props} ref={ref} xAxis={xAxisOptions} series={transformedSeries} />
<BaseChart
{...props}
animation={animation}
ref={ref}
xAxis={xAxisOptions}
series={transformedSeries}
/>
);
}
7 changes: 7 additions & 0 deletions static/app/components/charts/baseChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,10 @@ export interface BaseChartProps {
* This is to pass series to BaseChart bypassing the wrappers like LineChart, AreaChart etc.
*/
additionalSeries?: SeriesOption[];
/**
* Whether animations are enabled for the entire chart. If animations are enabled overall, this will cause ZRender to occasionally attempt to run animations and call `requestAnimationFrame` which might cause UI stutter.
*/
animation?: boolean;
/**
* If true, ignores height value and auto-scales chart to fit container height.
*/
Expand Down Expand Up @@ -332,6 +336,7 @@ const DEFAULT_Y_AXIS = {};
const DEFAULT_X_AXIS = {};

function BaseChart({
animation,
brush,
colors,
grid,
Expand Down Expand Up @@ -564,6 +569,7 @@ function BaseChart({

return {
...options,
animation,
useUTC: utc,
color: color as string[],
grid: Array.isArray(grid) ? grid.map(Grid) : Grid(grid),
Expand All @@ -580,6 +586,7 @@ function BaseChart({
brush,
};
}, [
animation,
chartId,
color,
resolvedSeries,
Expand Down
4 changes: 3 additions & 1 deletion static/app/views/dashboards/widgetCard/chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,8 @@ function WidgetCardChart(props: WidgetCardChartProps) {
};

const chartOptions = {
animation: false, // Turn off all chart animations. This turns off all ZRender hooks that might `requestAnimationFrame`
notMerge: false, // Enable ECharts option merging. Chart components are only re-drawn if they've changed
autoHeightResize: shouldResize ?? true,
useMultilineDate: true,
grid: {
Expand Down Expand Up @@ -661,7 +663,7 @@ function getChartComponent(chartProps: any, widget: Widget): React.ReactNode {

switch (widget.displayType) {
case 'bar':
return <BarChart {...chartProps} stacked={stacked} animation={false} />;
return <BarChart {...chartProps} stacked={stacked} />;
case 'area':
case 'top_n':
return <AreaChart stacked {...chartProps} />;
Expand Down
Loading