From 6a14042c7c13a516ff2fb12dde129c54f6ef2313 Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Fri, 14 Nov 2025 11:15:52 -0500
Subject: [PATCH 1/5] Allow ECharts option merge

---
 static/app/views/dashboards/widgetCard/chart.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
index ba78c17dc285a8..958099fd8e9b79 100644
--- a/static/app/views/dashboards/widgetCard/chart.tsx
+++ b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -303,6 +303,7 @@ function WidgetCardChart(props: WidgetCardChartProps) {
   };
 
   const chartOptions = {
+    notMerge: false,
     autoHeightResize: shouldResize ?? true,
     useMultilineDate: true,
     grid: {

From ce832d219306b8e539ab08e2a2a509decc0f3bf8 Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Fri, 14 Nov 2025 11:41:08 -0500
Subject: [PATCH 2/5] Allow turning off `BaseChart` animations

---
 static/app/components/charts/baseChart.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/static/app/components/charts/baseChart.tsx b/static/app/components/charts/baseChart.tsx
index 6c2b981b77d071..60a1c17fe58677 100644
--- a/static/app/components/charts/baseChart.tsx
+++ b/static/app/components/charts/baseChart.tsx
@@ -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.
    */
@@ -332,6 +336,7 @@ const DEFAULT_Y_AXIS = {};
 const DEFAULT_X_AXIS = {};
 
 function BaseChart({
+  animation,
   brush,
   colors,
   grid,
@@ -564,6 +569,7 @@ function BaseChart({
 
     return {
       ...options,
+      animation,
       useUTC: utc,
       color: color as string[],
       grid: Array.isArray(grid) ? grid.map(Grid) : Grid(grid),
@@ -580,6 +586,7 @@ function BaseChart({
       brush,
     };
   }, [
+    animation,
     chartId,
     color,
     resolvedSeries,

From 54c8de92c59c8078fa7c83220b2700e520529e2c Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Fri, 14 Nov 2025 11:41:42 -0500
Subject: [PATCH 3/5] Turn off animations

---
 static/app/views/dashboards/widgetCard/chart.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
index 958099fd8e9b79..51f564ba0eff21 100644
--- a/static/app/views/dashboards/widgetCard/chart.tsx
+++ b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -303,6 +303,7 @@ function WidgetCardChart(props: WidgetCardChartProps) {
   };
 
   const chartOptions = {
+    animation: false,
     notMerge: false,
     autoHeightResize: shouldResize ?? true,
     useMultilineDate: true,
@@ -662,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} />;

From b076fcadc2fafa5ca6560e592b2b385ce877ce0e Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Fri, 14 Nov 2025 14:45:27 -0500
Subject: [PATCH 4/5] Add clarifying comments

---
 static/app/views/dashboards/widgetCard/chart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
index 51f564ba0eff21..f15ab842346359 100644
--- a/static/app/views/dashboards/widgetCard/chart.tsx
+++ b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -303,8 +303,8 @@ function WidgetCardChart(props: WidgetCardChartProps) {
   };
 
   const chartOptions = {
-    animation: false,
-    notMerge: false,
+    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: {

From 27fbc62d332d3dde27668ac6ad6b228d3acf8403 Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Fri, 14 Nov 2025 14:49:05 -0500
Subject: [PATCH 5/5] Pass through animation prop

---
 static/app/components/charts/barChart.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/static/app/components/charts/barChart.tsx b/static/app/components/charts/barChart.tsx
index d5623f6e5f3998..5951cd35f2e340 100644
--- a/static/app/components/charts/barChart.tsx
+++ b/static/app/components/charts/barChart.tsx
@@ -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}
+    />
   );
 }