Skip to content

implement customPalette prop across all chart components #147

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
abhithesys merged 9 commits into from
Jul 3, 2025
Merged

implement customPalette prop across all chart components #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8014b51
implement customPalette prop across all chart components
i-subham23 Jul 2, 2025
e746a2d
remove superfluous code
i-subham23 Jul 2, 2025
871ca62
small changes
i-subham23 Jul 2, 2025
48992fe
fmt
abhithesys Jul 3, 2025
26ea1df
add chart palette in themeprovider
abhithesys Jul 3, 2025
71d2e58
optimise theme provider
abhithesys Jul 3, 2025
3f0c1b7
Resolve duild issue
i-subham23 Jul 3, 2025
7bb515b
Merge remote-tracking branch 'origin' into Refactor-charts-theme-palette
i-subham23 Jul 3, 2025
098cfad
Resolve build issue
i-subham23 Jul 3, 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
14 changes: 9 additions & 5 deletions js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
getWidthOfData,
getXAxisTickPositionData,
} from "../utils/AreaAndLine/AreaAndLineUtils";
import { getDistributedColors, getPalette, PaletteName } from "../utils/PalletUtils";
import { PaletteName, useChartPalette } from "../utils/PalletUtils";
import {
get2dChartConfig,
getColorForDataKey,
Expand All @@ -43,6 +43,7 @@ export interface AreaChartProps<T extends AreaChartData> {
data: T;
categoryKey: keyof T[number];
theme?: PaletteName;
customPalette?: string[];
variant?: AreaChartVariant;
grid?: boolean;
legend?: boolean;
Expand All @@ -62,6 +63,7 @@ const AreaChartComponent = <T extends AreaChartData>({
data,
categoryKey,
theme = "ocean",
customPalette,
variant = "natural",
grid = true,
icons = {},
Expand All @@ -80,10 +82,12 @@ const AreaChartComponent = <T extends AreaChartData>({

const transformedKeys = useTransformedKeys(dataKeys);

const colors = useMemo(() => {
const palette = getPalette(theme);
return getDistributedColors(palette, dataKeys.length);
}, [theme, dataKeys.length]);
const colors = useChartPalette({
chartThemeName: theme,
customPalette,
themePaletteName: "areaChartPalette",
dataLength: dataKeys.length,
});

const chartConfig: ChartConfig = useMemo(() => {
return get2dChartConfig(dataKeys, colors, transformedKeys, undefined, icons);
Expand Down
93 changes: 92 additions & 1 deletion js/packages/react-ui/src/components/Charts/AreaChart/stories/areaChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,14 +545,24 @@ const salesData = [
},
},
theme: {
description: "Specifies the color palette for the chart's areas, tooltips, and legend.",
description:
"Specifies the color palette for the chart's areas, tooltips, and legend. Ignored when customPalette is provided.",
control: "select",
options: ["ocean", "orchid", "emerald", "sunset", "spectrum", "vivid"],
table: {
defaultValue: { summary: "ocean" },
category: "🎨 Visual Styling",
},
},
customPalette: {
description:
"Custom array of colors to use instead of the theme palette. Overrides the theme prop when provided.",
control: "object",
table: {
type: { summary: "string[]" },
category: "🎨 Visual Styling",
},
},
variant: {
description: "Determines the area interpolation method, affecting the shape of the curves.",
control: "radio",
Expand Down Expand Up @@ -1076,6 +1086,87 @@ export const ExpandCollapseMarketingStory: Story = {
},
};

/**
* ## Custom Palette
*
* This story demonstrates how to use the customPalette prop to provide your own color scheme
* for the chart. This is useful when you need to match your brand colors or create
* specific visual themes.
*/

export const CustomPaletteStory: Story = {
name: "🎨 Custom Palette",
args: {
data: dataVariations.default as any,
categoryKey: "month" as any,
theme: "ocean", // This will be overridden by customPalette
variant: "natural",
grid: true,
legend: true,
isAnimationActive: true,
showYAxis: true,
xAxisLabel: "Month",
yAxisLabel: "Traffic",
},
render: (args: any) => (
<div>
<div
style={{
marginBottom: "16px",
padding: "12px",
background: "#f8f9fa",
borderRadius: "8px",
border: "1px solid #e9ecef",
}}
>
<h4 style={{ margin: "0 0 8px 0", color: "#333" }}>🎨 Custom Color Palette</h4>
<p style={{ margin: "0 0 12px 0", fontSize: "14px", color: "#666" }}>
This chart uses a custom color palette instead of the default theme colors.
</p>
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
{args.customPalette?.map((color: string, index: number) => (
<div
key={index}
style={{
display: "flex",
alignItems: "center",
gap: "4px",
padding: "4px 8px",
background: "white",
borderRadius: "4px",
border: "1px solid #ddd",
fontSize: "12px",
}}
>
<div
style={{
width: "12px",
height: "12px",
borderRadius: "2px",
backgroundColor: color,
border: "1px solid #ccc",
}}
/>
<span style={{ fontFamily: "monospace" }}>{color}</span>
</div>
))}
</div>
</div>
<Card style={{ width: "600px" }}>
<AreaChart {...args} />
</Card>
</div>
),
parameters: {
docs: {
description: {
story:
'Demonstrates how to use the `customPalette` prop to provide your own color scheme for the chart. When `customPalette` is provided, it overrides the `theme` prop and uses your specified colors instead of the predefined theme palettes.\n\n**Key Features:**\n- 🎨 **Custom Colors**: Override default theme colors with your own palette\n- 🔄 **Theme Override**: The `theme` prop is ignored when `customPalette` is provided\n- 📊 **Consistent Distribution**: Colors are distributed evenly across data series\n- 🎯 **Brand Matching**: Perfect for matching your application\'s brand colors\n\n**Usage:**\n```tsx\n<AreaChart\n data={data}\n categoryKey="month"\n customPalette={["#FF6B6B", "#4ECDC4", "#45B7D1"]}\n // theme prop is ignored when customPalette is provided\n/>\n```',
},
},
},
};

/**
* ## Responsive Behavior Demo
*
Expand Down
14 changes: 9 additions & 5 deletions js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
YAxisTick,
} from "../shared";
import { type LegendItem } from "../types";
import { getDistributedColors, getPalette, type PaletteName } from "../utils/PalletUtils";
import { useChartPalette, type PaletteName } from "../utils/PalletUtils";
import {
get2dChartConfig,
getColorForDataKey,
Expand Down Expand Up @@ -45,6 +45,7 @@ export interface BarChartProps<T extends BarChartData> {
data: T;
categoryKey: keyof T[number];
theme?: PaletteName;
customPalette?: string[];
variant?: BarChartVariant;
grid?: boolean;
radius?: number;
Expand All @@ -69,6 +70,7 @@ const BarChartComponent = <T extends BarChartData>({
data,
categoryKey,
theme = "ocean",
customPalette,
variant = "grouped",
grid = true,
icons = {},
Expand All @@ -88,10 +90,12 @@ const BarChartComponent = <T extends BarChartData>({

const transformedKeys = useTransformedKeys(dataKeys);

const colors = useMemo(() => {
const palette = getPalette(theme);
return getDistributedColors(palette, dataKeys.length);
}, [theme, dataKeys.length]);
const colors = useChartPalette({
chartThemeName: theme,
customPalette,
themePaletteName: "barChartPalette",
dataLength: dataKeys.length,
});

const chartConfig: ChartConfig = useMemo(() => {
return get2dChartConfig(dataKeys, colors, transformedKeys, undefined, icons);
Expand Down
114 changes: 112 additions & 2 deletions js/packages/react-ui/src/components/Charts/BarChart/stories/barChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -522,7 +522,7 @@ const icons = {
* - **Responsive Design**: Adjusts gracefully to the size of its container.
*
* ### Customization
* - **Theming**: Six built-in color palettes.
* - **Theming**: Six built-in color palettes, or use custom colors with `customPalette`.
* - **Bar Styling**: Customize the corner radius of the bars.
* - **Axis and Grid Control**: Toggle visibility of axes and grid lines.
*/
Expand Down Expand Up @@ -551,6 +551,13 @@ const monthlyData = [
categoryKey="month"
theme="ocean"
/>

// With custom colors
<BarChart
data={monthlyData}
categoryKey="month"
customPalette={["#FF6B6B", "#4ECDC4", "#45B7D1"]}
/>
\`\`\`

## Data Structure Requirements
Expand Down Expand Up @@ -599,14 +606,24 @@ const salesData = [
},
},
theme: {
description: "Specifies the color palette for the chart's bars, tooltips, and legend.",
description:
"Specifies the color palette for the chart's bars, tooltips, and legend. Ignored when customPalette is provided.",
control: "select",
options: ["ocean", "orchid", "emerald", "sunset", "spectrum", "vivid"],
table: {
defaultValue: { summary: "ocean" },
category: "🎨 Visual Styling",
},
},
customPalette: {
description:
"Custom array of colors to use instead of the theme palette. Overrides the theme prop when provided.",
control: "object",
table: {
type: { summary: "string[]" },
category: "🎨 Visual Styling",
},
},
variant: {
description:
"Defines how multiple data series are displayed: `grouped` (side-by-side) or `stacked` (on top of each other).",
Expand Down Expand Up @@ -1038,6 +1055,99 @@ export const ExpandCollapseMarketingStory: Story = {
},
};

/**
* ## Custom Palette
*
* This story demonstrates how to use the customPalette prop to provide your own color scheme
* for the chart. This is useful when you need to match your brand colors or create
* specific visual themes.
*/
export const CustomPaletteStory: Story = {
name: "🎨 Custom Palette",
args: {
data: dataVariations.default as any,
categoryKey: "month" as any,
customPalette: [
"#0A0E60",
"#14197B",
"#272DA6",
"#383FC9",
"#444CE7",
"#5F67F4",
"#7884FF",
"#97A9FF",
"#B4C6FF",
"#CBD7FF",
],
theme: "ocean", // This will be overridden by customPalette
variant: "grouped",
radius: 4,
grid: true,
legend: true,
isAnimationActive: true,
showYAxis: true,
xAxisLabel: "Month",
yAxisLabel: "Traffic",
},
render: (args: any) => (
<div>
<div
style={{
marginBottom: "16px",
padding: "12px",
background: "#f8f9fa",
borderRadius: "8px",
border: "1px solid #e9ecef",
}}
>
<h4 style={{ margin: "0 0 8px 0", color: "#333" }}>🎨 Custom Color Palette</h4>
<p style={{ margin: "0 0 12px 0", fontSize: "14px", color: "#666" }}>
This chart uses a custom color palette instead of the default theme colors.
</p>
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
{args.customPalette?.map((color: string, index: number) => (
<div
key={index}
style={{
display: "flex",
alignItems: "center",
gap: "4px",
padding: "4px 8px",
background: "white",
borderRadius: "4px",
border: "1px solid #ddd",
fontSize: "12px",
}}
>
<div
style={{
width: "12px",
height: "12px",
borderRadius: "2px",
backgroundColor: color,
border: "1px solid #ccc",
}}
/>
<span style={{ fontFamily: "monospace" }}>{color}</span>
</div>
))}
</div>
</div>
<Card style={{ width: "600px" }}>
<BarChart {...args} />
</Card>
</div>
),
parameters: {
docs: {
description: {
story:
'Demonstrates how to use the `customPalette` prop to provide your own color scheme for the chart. When `customPalette` is provided, it overrides the `theme` prop and uses your specified colors instead of the predefined theme palettes.\n\n**Key Features:**\n- 🎨 **Custom Colors**: Override default theme colors with your own palette\n- 🔄 **Theme Override**: The `theme` prop is ignored when `customPalette` is provided\n- 📊 **Consistent Distribution**: Colors are distributed evenly across data series\n- 🎯 **Brand Matching**: Perfect for matching your application\'s brand colors\n\n**Usage:**\n```tsx\n<BarChart\n data={data}\n categoryKey="month"\n customPalette={["#FF6B6B", "#4ECDC4", "#45B7D1"]}\n // theme prop is ignored when customPalette is provided\n/>\n```',
},
},
},
};

/**
* ## Responsive Behavior Demo
*
Expand Down
14 changes: 9 additions & 5 deletions js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
getWidthOfData,
getXAxisTickPositionData,
} from "../utils/AreaAndLine/AreaAndLineUtils";
import { getDistributedColors, getPalette, PaletteName } from "../utils/PalletUtils";
import { PaletteName, useChartPalette } from "../utils/PalletUtils";
import {
get2dChartConfig,
getColorForDataKey,
Expand All @@ -41,6 +41,7 @@ export interface LineChartProps<T extends LineChartData> {
data: T;
categoryKey: keyof T[number];
theme?: PaletteName;
customPalette?: string[];
variant?: LineChartVariant;
grid?: boolean;
legend?: boolean;
Expand All @@ -61,6 +62,7 @@ export const LineChart = <T extends LineChartData>({
data,
categoryKey,
theme = "ocean",
customPalette,
variant = "natural",
grid = true,
icons = {},
Expand All @@ -80,10 +82,12 @@ export const LineChart = <T extends LineChartData>({

const transformedKeys = useTransformedKeys(dataKeys);

const colors = useMemo(() => {
const palette = getPalette(theme);
return getDistributedColors(palette, dataKeys.length);
}, [theme, dataKeys.length]);
const colors = useChartPalette({
chartThemeName: theme,
customPalette,
themePaletteName: "lineChartPalette",
dataLength: dataKeys.length,
});

const chartConfig: ChartConfig = useMemo(() => {
return get2dChartConfig(dataKeys, colors, transformedKeys, undefined, icons);
Expand Down
Loading