Charts: Add animation support to Sparkline chart

projects/js-packages/charts/changelog/add-sparkline-animation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add animation support to Sparkline chart component

projects/js-packages/charts/src/charts/sparkline/sparkline.tsx

@@ -55,6 +55,7 @@ const SparklineComponent = forwardRef< HTMLDivElement, SparklineProps >(
 			className,
 			chartId,
 			margin: marginProp,
+			animation,
 		},
 		ref
 	) => {
@@ -170,6 +171,7 @@ const SparklineComponent = forwardRef< HTMLDivElement, SparklineProps >(
 						},
 					} }
 					curveType="monotone"
+					animation={ animation }
 				/>
 			</div>
 		);

projects/js-packages/charts/src/charts/sparkline/stories/index.api.mdx

@@ -27,6 +27,7 @@ Main component for rendering minimal trend visualizations.
 | `className` | `string` | - | Additional CSS class name |
 | `chartId` | `string` | - | Custom chart identifier for unique gradient/element identification |
 | `margin` | `object` | `{2,2,2,2}` | Margin around the chart |
+| `animation` | `boolean` | `false` | Enable entry animation on initial render. Creates a rising effect where the line scales up from the bottom. Automatically respects user's `prefers-reduced-motion` system setting |
 | `aspectRatio` | `number` | `0.5` | Aspect ratio for responsive charts (responsive variant only) |
 | `maxWidth` | `number` | `1200` | Maximum width for responsive charts (responsive variant only) |
 | `resizeDebounceTime` | `number` | `300` | Debounce time for resize events in ms (responsive variant only) |

projects/js-packages/charts/src/charts/sparkline/stories/index.docs.mdx

@@ -213,6 +213,32 @@ Sparklines integrate seamlessly with the chart theming system. The default theme
 	</GlobalChartsProvider>` }
 />
 
+## Animation
+
+The Sparkline component supports an optional entry animation that creates a smooth reveal effect when the chart first renders:
+
+<Canvas of={ SparklineStories.Animation } />
+
+<Source
+	language="tsx"
+	code={ `<Sparkline
+		data={ [10, 15, 12, 18, 22, 25, 23, 28] }
+		width={ 120 }
+		height={ 48 }
+		color="#4CAF50"
+		animation={ true }
+	/>` }
+/>
+
+### Animation Behavior
+
+- **Opt-in**: Animation is disabled by default and must be explicitly enabled with the `animation` prop
+- **Accessibility**: Automatically respects the user's `prefers-reduced-motion` system setting - animation will not play for users who prefer reduced motion
+- **Effect**: Creates a rising effect where the line scales up from the bottom, revealing the data progressively
+- **Duration**: 1000ms (1 second) with ease-out timing
+
+**Note**: The animation plays once when the chart initially renders and does not repeat.
+
 ## Edge Cases
 
 The component handles various edge cases gracefully:

projects/js-packages/charts/src/charts/sparkline/stories/index.stories.tsx

@@ -56,6 +56,11 @@ const meta: Meta< SparklineProps > = {
 			description: 'Margin around the chart',
 			table: { category: 'Dimensions' },
 		},
+		animation: {
+			control: 'boolean',
+			description: 'Enable entry animation on initial render',
+			table: { category: 'Visual Style' },
+		},
 	},
 };
 
@@ -191,3 +196,17 @@ export const Dashboard: Story = {
 		);
 	},
 };
+
+/**
+ * Sparkline with entry animation that creates a smooth rising effect.
+ * The animation respects the user's prefers-reduced-motion setting for accessibility.
+ */
+export const Animation: Story = {
+	args: {
+		data: defaultData,
+		width: 120,
+		height: 48,
+		color: '#4CAF50',
+		animation: true,
+	},
+};

projects/js-packages/charts/src/charts/sparkline/types.ts

@@ -89,4 +89,12 @@ export interface SparklineProps {
 		bottom?: number;
 		left?: number;
 	};
+
+	/**
+	 * Enable entry animation on initial render
+	 * Creates a rising effect where the line scales up from the bottom.
+	 * Automatically respects user's prefers-reduced-motion system setting.
+	 * @default false
+	 */
+	animation?: boolean;
 }