feat: add bar charts #2924

tewarig · 2025-09-01T10:23:29Z

Description

Changes

Additional Information

Component Checklist

Update Component Status Page
Perform Manual Testing in Other Browsers
Add KitchenSink Story
Add Interaction Tests (if applicable)
Add changeset

saurabhdaware · 2025-09-22T09:13:09Z

packages/blade/src/components/Charts/BarCharts/index.ts

@@ -0,0 +1 @@
+export { ChartBarWrapper, ChartBar } from './BarCharts';


types are not exported from here

saurabhdaware · 2025-09-22T09:15:21Z

packages/blade/src/components/Charts/LineChart/LineChart.stories.tsx

      componentName="LineChart"
      componentDescription="A Line Chart component built on top of Recharts with Blade design system styling."
-      figmaURL="https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=92678-188716&p=f&m=dev"
+      figmaURL="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Charts/_decisions/decisions.md"


saurabhdaware · 2025-09-22T09:16:13Z

packages/blade/src/components/Charts/BarCharts/types.ts

+  /**
+   * The layout of the bar chart.
+   */
+  layout?: 'horizontal' | 'vertical';


Suggested change

layout?: 'horizontal' | 'vertical';

orientation?: 'horizontal' | 'vertical';

we call it orientation in other components right 🤔

saurabhdaware · 2025-09-23T04:45:14Z

packages/blade/src/components/Charts/BarChart/BarChart.web.tsx

can you fix the file naming? "AreaChart" but "BarCharts" 🙈

saurabhdaware · 2025-09-23T04:46:37Z

packages/blade/src/components/Charts/BarChart/types.ts

+   * Chart data to be rendered
+   */
+  data: data[];
+} & Partial<Omit<BaseBoxProps, keyof FlexboxProps | keyof GridProps>>;


did you mean to use StyledPropsBlade here? why does it support type like this?

if you want to give margin padding to chartWrapper it should support that, right ?
even we should be able to define width of the container in chartWrapper it self

Lets do & BoxProps then? its fine if flex and grid is supported as well. We can avoid creating too many different combinations of styled props on different components

saurabhdaware · 2025-09-23T04:50:12Z

packages/blade/src/components/Charts/BarCharts/BarCharts.stories.tsx

+export const VerticalBarChart: StoryFn<typeof ChartBar> = () => {
+  return (
+    <div style={{ width: '100%', height: '500px' }}>
+      <ChartBarWrapper data={chartData.slice(0, 5)} layout="vertical">


isn't this horizontal and the default one is vertical?

you that's true. recharts follow the same nomenclature. so i have not changed it. (plus layout is related to chartwrapper not chart. i think that's why it is named that way.)
https://recharts.org/en-US/storybook

saurabhdaware · 2025-09-23T04:51:32Z

packages/blade/src/components/Charts/BarCharts/BarCharts.stories.tsx

+export const BarChartWithInformationalColorTheme: StoryFn<typeof ChartBar> = () => {
+  return (
+    <div style={{ width: '100%', height: '500px' }}>
+      <ChartBarWrapper data={chartData.slice(0, 5)} layout="vertical" colorTheme="default">


The story name says its Informational Color Theme but the prop says its colorTheme="default". Is the default color theme informational color theme?

changed it to default color theme

saurabhdaware · 2025-09-23T04:53:15Z

packages/blade/src/components/Charts/BarCharts/BarCharts.web.tsx

+const ChartBarWrapper: React.FC<ChartBarWrapperProps & TestID & DataAnalyticsAttribute> = ({
+  children,
+  colorTheme = 'default',
+  layout = 'horizontal',


Are you sure the default layout is horizontal?

Wouldn't this chart be a vertical chart and not horizontal chart?

🤔 the layout is horizontal , but the bar charts are vertical.

saurabhdaware · 2025-09-23T04:56:06Z

packages/blade/src/components/Charts/BarChart/BarChart.stories.tsx

Screen.Recording.2025-09-23.at.10.24.57.AM.mov

Can you check with RK if we're expected to not have any transition when we hover over the chart items? right now it feels too sudden

i did try to add custom transition with css classes but is not working.
so rechart render entire child's so you see sudden opacity change in rechart colors. i am trying to find work around of this.

the main issue is we use rect to show the white bar between bars in barGraph. which does not allow us to have animated properties for fill 😢

Screen.Recording.2025-09-23.at.5.05.45.PM.mov

lol was able to find a workaround for this.

tried using classes but that was working so.
i used framer motion.

Lets skip it for now if its too hacky and complex

saurabhdaware

added some minor comments. rest looks good

saurabhdaware · 2025-09-24T09:22:07Z

packages/blade-mcp/knowledgebase/components/BarChart.md

+   * The orientation of the bar chart.
   */
-  layout?: 'horizontal' | 'vertical';
+  orientation?: 'horizontal' | 'vertical';


we can go back to layout like we discussed in meeting since orientation and layout are 2 different things

saurabhdaware · 2025-09-24T09:22:31Z

packages/blade/src/components/Charts/BarChart/__tests__/BarChart.web.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChartBarWrapper, ChartBar } from '../BarCharts';
+import { ChartBarWrapper, ChartBar } from '../BarChart.web';


Suggested change

import { ChartBarWrapper, ChartBar } from '../BarChart.web';

import { ChartBarWrapper, ChartBar } from '../BarChart';

saurabhdaware · 2025-09-24T09:22:54Z

packages/blade/src/components/Charts/BarChart/BarChart.stories.tsx

Lets skip it for now if its too hacky and complex

saurabhdaware · 2025-09-24T09:23:41Z

packages/blade/src/components/Charts/BarChart/BarChart.web.tsx

+const MotionRectangle = (props: MotionRectProps): React.ReactElement => {
+  const { fillOpacity, barIndex, initialOpacity, ...restProps } = props;
+  return (
+    <LazyMotion features={domAnimation}>


LazyMotion is added by consumers in their applications. We shouldn't add it in components

saurabhdaware · 2025-09-24T09:24:21Z

packages/blade/src/components/Charts/BarChart/BarChart.web.tsx

-        const isVertical = layout === 'vertical';
+        const isVertical = orientation === 'vertical';
+
+        const getInitialOpacity = (): number => {


Lets skip it for now maybe? code seems too complex for just 1 transition. We'll figure out later

saurabhdaware · 2025-09-24T09:26:05Z

packages/blade/src/components/Charts/BarChart/types.ts

+   * Chart data to be rendered
+   */
+  data: data[];
+} & Partial<Omit<BaseBoxProps, keyof FlexboxProps | keyof GridProps>>;


Lets do & BoxProps then? its fine if flex and grid is supported as well. We can avoid creating too many different combinations of styled props on different components

packages/blade-mcp/knowledgebase/components/BarChart.md

packages/blade/src/components/Charts/BarChart/BarChart.web.tsx

tewarig added 30 commits August 7, 2025 16:31

feat: line chart pocs

e7e3ef4

fix: lint

4513e87

chore: pie charts

f38b3ec

feat: add area charts

76ed2c6

Merge remote-tracking branch 'origin' into feat/recharts-poc

27f260f

feat: add line chart

b2e5fae

refactor: charts and base components

26c822b

chore: code refactor

8310cb2

fix: line chart styling and offset colors

b14f469

fix: legend color in recharts

9e0f88f

chore: update legend styles

de5d214

fix: add color in reference line

d3fed65

chore: update color tokens

da0d881

chore: add lable in chart

f177c6f

fix: spacing

9b45b94

fix: add custom label

5f2530e

feat: add colors

1aa02c5

feat: support new colors in line charts & colors update

7efc234

chore: update color logic & exmaple color values

263731a

chore: update blade color theme

ab4bd23

refactor: reference line props

b60d9a9

fix: more color props

ee3d062

fix: line chart errors

1311652

fix: ts errors

67d5518

chore: more update

201f28d

chore: more style changes

535ca53

chore: change vars

5d23d9c

feat: add line charts

806a8fd

chore: update cursor values

3cf1ba3

chore: revert changes

5282030

fix: set animation easing to linear

08ded0a

saurabhdaware reviewed Sep 23, 2025

View reviewed changes

tewarig added 15 commits September 23, 2025 12:01

chore: export types

f80e366

feat: update chart layout

27ffef4

chore: rename to charts

1f88647

chore: rename story

4bd36fa

chore: update barchart stories

a3bc3e9

fix: add animation

2deae8c

fix: animation speed

fd2825b

fix: animation logic and stacked bar logic

51d9688

chore: more animation fixes

c8892f7

fix: update animation

6346b23

chore: update snaps

0283740

fix: ts issue

e23e82a

chore: add stacking

e9c088d

refactor: code animation

8fd2bff

chore: update snaps

01535f7

saurabhdaware reviewed Sep 24, 2025

View reviewed changes

tewarig added 4 commits September 24, 2025 15:13

chore: remove animation :(

e3a8769

review: change orientation to layout

5328255

chore: update layout

4fc94f2

chore: update types

37cb2c4

swapnil-kr1 approved these changes Sep 24, 2025

View reviewed changes

packages/blade-mcp/knowledgebase/components/BarChart.md Show resolved Hide resolved

packages/blade-mcp/knowledgebase/components/BarChart.md Show resolved Hide resolved

packages/blade/src/components/Charts/BarChart/BarChart.web.tsx Show resolved Hide resolved

saurabhdaware approved these changes Sep 24, 2025

View reviewed changes

tewarig merged commit 1b07633 into master Sep 24, 2025
19 of 22 checks passed

tewarig deleted the feat/add-bar-charts branch September 24, 2025 10:46

		@@ -0,0 +1 @@
		export { ChartBarWrapper, ChartBar } from './BarCharts';

	layout?: 'horizontal' \| 'vertical';
	orientation?: 'horizontal' \| 'vertical';

	import { ChartBarWrapper, ChartBar } from '../BarChart.web';
	import { ChartBarWrapper, ChartBar } from '../BarChart';

feat: add bar charts #2924

feat: add bar charts #2924

Uh oh!

Conversation

tewarig commented Sep 1, 2025

Description

Changes

Additional Information

Component Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tewarig Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tewarig Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tewarig Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

saurabhdaware left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tewarig Sep 23, 2025 •

edited

Loading

tewarig Sep 23, 2025 •

edited

Loading

tewarig Sep 23, 2025 •

edited

Loading