From f4973e36a7af634e9062e1dfaa5625cdea03fd1a Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 27 Nov 2025 16:52:58 +1300 Subject: [PATCH 1/4] Remove woo and jetpack themes --- .../components/line-chart/stories/config.tsx | 4 +- .../line-chart/test/line-chart.test.tsx | 6 +- projects/js-packages/charts/src/index.ts | 2 - .../chart-context/stories/index.docs.mdx | 19 +-- .../chart-context/test/chart-context.test.tsx | 35 ----- .../test/use-global-charts-theme.test.tsx | 24 +--- .../src/providers/chart-context/themes.ts | 130 +----------------- .../charts/src/stories/theme-config.tsx | 6 +- 8 files changed, 10 insertions(+), 216 deletions(-) diff --git a/projects/js-packages/charts/src/components/line-chart/stories/config.tsx b/projects/js-packages/charts/src/components/line-chart/stories/config.tsx index cc88b0ad95194..50565488c69db 100644 --- a/projects/js-packages/charts/src/components/line-chart/stories/config.tsx +++ b/projects/js-packages/charts/src/components/line-chart/stories/config.tsx @@ -1,7 +1,7 @@ import { GlyphDiamond, GlyphStar } from '@visx/glyph'; import merge from 'deepmerge'; import { createElement } from 'react'; -import { jetpackTheme } from '../../../providers'; +import { defaultTheme } from '../../../providers'; import { chartDecorator, sharedChartArgTypes, @@ -20,7 +20,7 @@ type StoryArgs = ChartStoryArgs< React.ComponentProps< typeof LineChart > >; /** * Custom storybook theme with glyphs */ -export const glyphTheme = merge( jetpackTheme, { +export const glyphTheme = merge( defaultTheme, { glyphs: [ props => createElement( DefaultGlyph, { ...props, key: props.key } ), props => diff --git a/projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx b/projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx index efe05159eb200..9a8024c879653 100644 --- a/projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx +++ b/projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx @@ -7,12 +7,12 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { GlyphDiamond } from '@visx/glyph'; import { createElement, createRef } from 'react'; -import { GlobalChartsProvider, jetpackTheme, wooTheme } from '../../../providers'; +import { GlobalChartsProvider, defaultTheme } from '../../../providers'; import LineChart, { LineChartUnresponsive } from '../line-chart'; import type { SingleChartRef } from '../../private/single-chart-context'; const customTheme = { - ...jetpackTheme, + ...defaultTheme, glyphs: [ props => createElement( @@ -31,8 +31,6 @@ const customTheme = { const THEME_MAP = { default: undefined, - jetpack: jetpackTheme, - woo: wooTheme, custom: customTheme, }; diff --git a/projects/js-packages/charts/src/index.ts b/projects/js-packages/charts/src/index.ts index dcb780bd88ef7..8dcb41e3a60c4 100644 --- a/projects/js-packages/charts/src/index.ts +++ b/projects/js-packages/charts/src/index.ts @@ -25,8 +25,6 @@ export { useGlobalChartsTheme, GlobalChartsContext, defaultTheme, - jetpackTheme, - wooTheme, } from './providers'; // Types diff --git a/projects/js-packages/charts/src/providers/chart-context/stories/index.docs.mdx b/projects/js-packages/charts/src/providers/chart-context/stories/index.docs.mdx index 6ef92a991d4f1..dd849eccfd5f4 100644 --- a/projects/js-packages/charts/src/providers/chart-context/stories/index.docs.mdx +++ b/projects/js-packages/charts/src/providers/chart-context/stories/index.docs.mdx @@ -45,23 +45,6 @@ Wrap your application or chart components with `GlobalChartsProvider` to enable - **`theme`** *(optional)*: Partial theme object to customize chart appearance - **`children`**: Chart components and other React elements -### Using with Predefined Themes - - - { /* Charts will use Jetpack colors and styling */ } - - - // Using WooCommerce theme - - { /* Charts will use WooCommerce colors and styling */ } - ` } -/> - ## Color Coordination ### Stable Colors for Groups @@ -339,7 +322,7 @@ When charts register with a `chartId`, their legend data becomes available to st language="tsx" code={ `function DashboardWithCentralizedLegends() { return ( - +
{ /* Charts with hidden legends but registered data */ }
diff --git a/projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx b/projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx index 808025ce8f907..80de5df959f08 100644 --- a/projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx +++ b/projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx @@ -4,7 +4,6 @@ import { GlobalChartsProvider } from '../global-charts-provider'; import { useChartId } from '../hooks/use-chart-id'; import { useChartRegistration } from '../hooks/use-chart-registration'; import { useGlobalChartsContext } from '../hooks/use-global-charts-context'; -import { wooTheme } from '../themes'; import type { BaseLegendItem } from '../../../components/legend'; import type { ChartTheme, SeriesData } from '../../../types'; import type { GlobalChartsContextValue } from '../types'; @@ -768,40 +767,6 @@ describe( 'ChartContext', () => { expect( afterThemeChangeColor ).not.toBe( initialColor ); } ); - - it( 'generates colors with Woo theme characteristics', () => { - let contextValue: GlobalChartsContextValue; - - const TestComponent = () => { - contextValue = useGlobalChartsContext(); - return
Test
; - }; - - render( - - - - ); - - // Generate colors beyond the palette - const generatedColors = []; - for ( let i = 5; i < 8; i++ ) { - const color = contextValue.getElementStyles( { - data: createMockDataWithGroup( undefined ), - index: i, - } ).color; - generatedColors.push( color ); - } - - // All generated colors should be in HSL format - generatedColors.forEach( color => { - expect( color ).toMatch( /^hsl\(\d+,\s*\d+%,\s*\d+%\)$/ ); - } ); - - // All generated colors should be different - const uniqueColors = new Set( generatedColors ); - expect( uniqueColors.size ).toBe( generatedColors.length ); - } ); } ); describe( 'Context stability', () => { diff --git a/projects/js-packages/charts/src/providers/chart-context/test/use-global-charts-theme.test.tsx b/projects/js-packages/charts/src/providers/chart-context/test/use-global-charts-theme.test.tsx index 9a7591cb1bef4..18ed160a8ac2b 100644 --- a/projects/js-packages/charts/src/providers/chart-context/test/use-global-charts-theme.test.tsx +++ b/projects/js-packages/charts/src/providers/chart-context/test/use-global-charts-theme.test.tsx @@ -1,7 +1,7 @@ import { renderHook } from '@testing-library/react'; import { GlobalChartsProvider } from '../global-charts-provider'; import { useGlobalChartsTheme } from '../hooks/use-global-charts-theme'; -import { defaultTheme, jetpackTheme, wooTheme } from '../themes'; +import { defaultTheme } from '../themes'; import type { ChartTheme } from '../../../types'; import type { ReactNode } from 'react'; @@ -33,28 +33,6 @@ describe( 'useGlobalChartsTheme', () => { expect( result.current.gridStyles ).toEqual( defaultTheme.gridStyles ); } ); - it( 'should work with predefined jetpackTheme', () => { - const wrapper = createWrapper( jetpackTheme ); - - const { result } = renderHook( () => useGlobalChartsTheme(), { wrapper } ); - - expect( result.current.colors ).toEqual( jetpackTheme.colors ); - expect( result.current.leaderboardChart?.primaryColor ).toBe( - jetpackTheme.leaderboardChart?.primaryColor - ); - } ); - - it( 'should work with predefined wooTheme', () => { - const wrapper = createWrapper( wooTheme ); - - const { result } = renderHook( () => useGlobalChartsTheme(), { wrapper } ); - - expect( result.current.colors ).toEqual( wooTheme.colors ); - expect( result.current.leaderboardChart?.primaryColor ).toBe( - wooTheme.leaderboardChart?.primaryColor - ); - } ); - it( 'should handle empty theme object', () => { const wrapper = createWrapper( {} ); diff --git a/projects/js-packages/charts/src/providers/chart-context/themes.ts b/projects/js-packages/charts/src/providers/chart-context/themes.ts index 9dea94ee981a7..2b1dc7015c84e 100644 --- a/projects/js-packages/charts/src/providers/chart-context/themes.ts +++ b/projects/js-packages/charts/src/providers/chart-context/themes.ts @@ -1,4 +1,4 @@ -import type { ChartTheme, CompleteChartTheme } from '../../types'; +import type { CompleteChartTheme } from '../../types'; /** * Default theme configuration @@ -60,130 +60,4 @@ const defaultTheme: CompleteChartTheme = { }, }; -/** - * Jetpack theme configuration - */ -const jetpackTheme: ChartTheme = { - backgroundColor: '#FFFFFF', // chart background color - labelBackgroundColor: 'transparent', // label background color (transparent by default) - labelTextColor: '#FFFFFF', // label text color (white to match original behavior) - colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ], - gridStyles: { - stroke: '#DCDCDE', - strokeWidth: 1, - }, - tickLength: 4, - gridColor: '', - gridColorDark: '', - xTickLineStyles: { stroke: 'black' }, - xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 }, - legendLabelStyles: { - color: 'var(--jp-gray-80, #2c3338)', - }, - svgLabelSmall: { fill: 'var(--jp-gray-80, #2c3338)' }, - annotationStyles: { - label: { - anchorLineStroke: 'var(--jp-gray-80, #2c3338)', - backgroundFill: '#fff', - }, - connector: { - stroke: 'var(--jp-gray-80, #2c3338)', - }, - circleSubject: { - stroke: 'transparent', - fill: 'var(--jp-gray-80, #2c3338)', - radius: 5, - }, - }, - leaderboardChart: { - rowGap: 12, - columnGap: 4, - labelSpacing: 1.5, - primaryColor: '#006DAB', - secondaryColor: '#98C8DF', - deltaColors: [ '#FF8C8F', '#757575', '#1F9828' ], // [negative, neutral, positive] - }, - conversionFunnelChart: { - backgroundColor: '#F3F4F6', - positiveChangeColor: '#1F9828', - negativeChangeColor: '#FF8C8F', - }, - lineChart: { - lineStyles: { - comparison: { - strokeDasharray: '4 4', - strokeLinecap: 'square', - }, - }, - }, -}; - -/** - * Woo theme configuration - */ -const wooTheme: ChartTheme = { - backgroundColor: '#FFFFFF', // chart background color - labelBackgroundColor: 'transparent', // label background color (transparent by default) - labelTextColor: '#FFFFFF', // label text color (white to match original behavior) - colors: [ - '#3858E9', // WooCommerce brand blue - '#66BDFF', // Light blue - '#873EFF', // Purple - '#7B90FF', // Periwinkle blue - '#EB6594', // Pink/rose - ], - gridStyles: { - stroke: '#787C82', - strokeWidth: 1, - }, - tickLength: 4, - gridColor: '', - gridColorDark: '', - svgLabelSmall: { fill: '#757575' }, - xTickLineStyles: { stroke: 'black' }, - xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 }, - legendLabelStyles: { - fontSize: '12px', - fontWeight: 400, - color: '#757575', - }, - legendContainerStyles: { - gap: '8px', - }, - annotationStyles: { - label: { - anchorLineStroke: 'black', - backgroundFill: '#fff', - }, - connector: { - stroke: 'black', - }, - circleSubject: { - stroke: 'transparent', - fill: 'black', - radius: 5, - }, - }, - leaderboardChart: { - rowGap: 12, - columnGap: 4, - labelSpacing: 1.5, - deltaColors: [ '#D63638', '#757575', '#008A20' ], // [negative, neutral, positive] - }, - conversionFunnelChart: { - backgroundColor: '#F3F4F6', - positiveChangeColor: '#008A20', - negativeChangeColor: '#D63638', - }, - lineChart: { - lineStyles: { - comparison: { - strokeDasharray: '4 4', - strokeWidth: 1.5, - strokeLinecap: 'square', - }, - }, - }, -}; - -export { defaultTheme, jetpackTheme, wooTheme }; +export { defaultTheme }; diff --git a/projects/js-packages/charts/src/stories/theme-config.tsx b/projects/js-packages/charts/src/stories/theme-config.tsx index 86ecc7f49bfc0..40aa598be48fd 100644 --- a/projects/js-packages/charts/src/stories/theme-config.tsx +++ b/projects/js-packages/charts/src/stories/theme-config.tsx @@ -1,4 +1,4 @@ -import { defaultTheme, jetpackTheme, wooTheme } from '../providers'; +import { defaultTheme } from '../providers'; import type { ChartTheme } from '../types'; /** @@ -28,8 +28,6 @@ export const customTheme: ChartTheme = { */ export const CHART_THEME_MAP: Record< string, ChartTheme | undefined > = { default: defaultTheme, - jetpack: jetpackTheme, - woo: wooTheme, custom: customTheme, }; @@ -39,7 +37,7 @@ export const CHART_THEME_MAP: Record< string, ChartTheme | undefined > = { export const themeArgTypes = { themeName: { control: { type: 'select' as const }, - options: [ 'default', 'jetpack', 'woo', 'custom' ], + options: Object.keys( CHART_THEME_MAP ), defaultValue: 'default', description: 'Select a theme to apply to the chart', table: { category: 'Theme' }, From a41281ce7c6470aec7de4dfe6a2dc83a08061c16 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 27 Nov 2025 16:54:27 +1300 Subject: [PATCH 2/4] Add changelog --- .../charts-141-remove-consumer-product-themes | 4 ++++ .../test/conversion-funnel-chart.test.tsx | 1 - .../components/line-chart/stories/annotation.docs.mdx | 10 +++------- .../components/line-chart/stories/glyph.stories.tsx | 2 +- .../src/components/line-chart/test/line-chart.test.tsx | 10 +++++----- .../src/components/pie-chart/stories/donut.stories.tsx | 4 ++-- projects/js-packages/charts/src/stories/index.docs.mdx | 8 ++++---- 7 files changed, 19 insertions(+), 20 deletions(-) create mode 100644 projects/js-packages/charts/changelog/charts-141-remove-consumer-product-themes diff --git a/projects/js-packages/charts/changelog/charts-141-remove-consumer-product-themes b/projects/js-packages/charts/changelog/charts-141-remove-consumer-product-themes new file mode 100644 index 0000000000000..3733922cf9c7f --- /dev/null +++ b/projects/js-packages/charts/changelog/charts-141-remove-consumer-product-themes @@ -0,0 +1,4 @@ +Significance: minor +Type: removed + +Remove Woo and Jetpack themes diff --git a/projects/js-packages/charts/src/components/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx b/projects/js-packages/charts/src/components/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx index 5d754eed9fcdf..bf8aa33ca0598 100644 --- a/projects/js-packages/charts/src/components/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx +++ b/projects/js-packages/charts/src/components/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx @@ -310,7 +310,6 @@ describe( 'ConversionFunnelChart', () => { renderWithoutTheme( ); const changeElement = screen.getByText( '+5.2%' ); - // Note: The exact color value depends on the theme (Woo theme colors) // Color is applied via CSS variable, so check that element exists expect( changeElement ).toBeInTheDocument(); } ); diff --git a/projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx b/projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx index 483157ab374e0..660cbe7f94352 100644 --- a/projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx +++ b/projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx @@ -15,7 +15,7 @@ The Line Chart component supports a compound component pattern for annotations, @@ -198,16 +198,12 @@ Controls the text label appearance: ### Theme Integration -Annotations inherit styling from your chart theme. Default themes provide consistent styling: - -- **Jetpack Theme**: Gray colors with subtle styling -- **Woo Theme**: Black accents for higher contrast -- **Custom Themes**: Define `annotationStyles` in your theme object +Annotations inherit styling from your chart theme. You can customize annotation styles by defining `annotationStyles` in your theme object: = { ...lineChartMetaArgs.argTypes, themeName: { ...themeArgTypes.themeName, - options: [ 'default', 'jetpack', 'woo', 'custom', 'glyph' ], + options: [ 'default', 'custom', 'glyph' ], }, withStartGlyphs: { control: 'boolean', diff --git a/projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx b/projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx index 9a8024c879653..9659be139148b 100644 --- a/projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx +++ b/projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx @@ -50,7 +50,7 @@ describe( 'LineChart', () => { ], }; - const renderWithTheme = ( props = {}, themeName = 'jetpack' ) => { + const renderWithTheme = ( props = {}, themeName = 'default' ) => { const theme = THEME_MAP[ themeName ]; return render( @@ -61,7 +61,7 @@ describe( 'LineChart', () => { ); }; - const renderUnwrappedWithTheme = ( props = {}, themeName = 'jetpack', ref = undefined ) => { + const renderUnwrappedWithTheme = ( props = {}, themeName = 'default', ref = undefined ) => { const theme = THEME_MAP[ themeName ]; return render( @@ -792,7 +792,7 @@ describe( 'LineChart', () => { describe( 'Chart Ref Interface', () => { test( 'exposes getScales method via ref', () => { const ref = createRef< SingleChartRef >(); - renderUnwrappedWithTheme( {}, 'jetpack', ref ); + renderUnwrappedWithTheme( {}, 'default', ref ); expect( ref.current?.getScales() ).toBeDefined(); expect( ref.current?.getScales()?.xScale ).toBeDefined(); @@ -801,7 +801,7 @@ describe( 'LineChart', () => { test( 'exposes getChartDimensions method via ref', () => { const ref = createRef< SingleChartRef >(); - renderUnwrappedWithTheme( { width: 800, height: 400 }, 'jetpack', ref ); + renderUnwrappedWithTheme( { width: 800, height: 400 }, 'default', ref ); const dimensions = ref.current?.getChartDimensions(); expect( dimensions?.width ).toBe( 800 ); @@ -813,7 +813,7 @@ describe( 'LineChart', () => { const renderWithAnnotations = ( children: React.ReactNode, props = {}, - themeName = 'jetpack' + themeName = 'default' ) => { const theme = THEME_MAP[ themeName ]; diff --git a/projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx b/projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx index dd1bceb49343c..b708c1d215b99 100644 --- a/projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx +++ b/projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx @@ -392,7 +392,7 @@ export const CustomLegendPositioning: Story = { }, }; -const WooPieLegend = ( { +const CustomPieLegend = ( { chartItems, items, withComparison, @@ -443,7 +443,7 @@ export const CustomLegend: Story = { ( - + ); @@ -84,7 +84,7 @@ Great for showing parts of a whole, with customizable thickness and gap spacing. Charts expect data in a standardized format with `date` (for time-series) or category values and numeric `value` properties. ### Theme System -Use the `GlobalChartsProvider` component to apply consistent styling across all charts. Supports Jetpack and WooCommerce themes out of the box. +Use the `GlobalChartsProvider` component to apply consistent styling across all charts with support for custom themes. ### Responsive Design All charts automatically adapt to their container size using the `withResponsive` higher-order component. From a2463769df9992f9c5c33e11c22c1cb679f58581 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 27 Nov 2025 17:25:05 +1300 Subject: [PATCH 3/4] Update docs, template and guidelines --- .../charts/docs/ai-documentation-guide.md | 9 +++++++- .../docs/feature-documentation.mdx.template | 22 ++++++++++++++++++- .../bar-chart/stories/index.docs.mdx | 15 ++++++++----- .../leaderboard-chart/stories/index.docs.mdx | 14 +++++++----- .../line-chart/stories/annotation.docs.mdx | 1 - .../line-chart/stories/index.docs.mdx | 15 ++++++++----- .../pie-chart/stories/index.docs.mdx | 14 +++++++++--- .../charts/src/stories/index.docs.mdx | 2 +- 8 files changed, 67 insertions(+), 25 deletions(-) diff --git a/projects/js-packages/charts/docs/ai-documentation-guide.md b/projects/js-packages/charts/docs/ai-documentation-guide.md index fb111331cadd7..3efb29955aa07 100644 --- a/projects/js-packages/charts/docs/ai-documentation-guide.md +++ b/projects/js-packages/charts/docs/ai-documentation-guide.md @@ -176,7 +176,14 @@ Controls [what this category affects]: ### Theme Integration -Explanation of how feature integrates with chart themes. +For the Theme Integration section, use the standardized format from the `feature-documentation.mdx.template`. This section should: + +- Show how to create a custom theme by defining properties to override +- Include a code example with `GlobalChartsProvider` +- List available themes (Default and Custom) +- Include a note explaining that the provider automatically merges properties + +See the template for the complete section structure. ``` ### 8. Advanced Usage diff --git a/projects/js-packages/charts/docs/feature-documentation.mdx.template b/projects/js-packages/charts/docs/feature-documentation.mdx.template index fff3785fe5d14..048040a58374e 100644 --- a/projects/js-packages/charts/docs/feature-documentation.mdx.template +++ b/projects/js-packages/charts/docs/feature-documentation.mdx.template @@ -135,7 +135,27 @@ Controls [what this affects]: ### Theme Integration -[Explanation of how feature integrates with chart themes and any theme-specific styling]. +The [component] integrates with the global charts theming system. Create a custom theme by defining the properties you want to override: + + + <[Component] data={data} /> + ` } +/> + +**Available themes:** +- **Default**: Neutral colors and styling +- **Custom**: Define your own theme object with properties to override + +**Note**: The `GlobalChartsProvider` automatically merges custom theme properties with the default theme, so you only need to specify the properties you want to override. ## Custom [Feature Name] diff --git a/projects/js-packages/charts/src/components/bar-chart/stories/index.docs.mdx b/projects/js-packages/charts/src/components/bar-chart/stories/index.docs.mdx index 8571531fdacdc..96ff6cd078bc9 100644 --- a/projects/js-packages/charts/src/components/bar-chart/stories/index.docs.mdx +++ b/projects/js-packages/charts/src/components/bar-chart/stories/index.docs.mdx @@ -539,21 +539,24 @@ Full functionality in all modern browsers supporting: ## Theming Integration -Bar Charts integrate seamlessly with the chart theming system: +Bar Charts integrate seamlessly with the chart theming system. Create a custom theme by defining the properties you want to override: + const customTheme = { + colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'], + gridColor: '#E0E0E0', + }; + + ` } /> **Available themes:** - **Default**: Neutral colors and styling -- **Jetpack**: Jetpack brand colors and styling -- **Woo**: WooCommerce brand colors and styling -- **Custom**: Define your own theme object with custom color schemes +- **Custom**: Define your own theme object with properties to override The component automatically adapts bar colors, patterns, and styling based on the active theme while maintaining accessibility standards. diff --git a/projects/js-packages/charts/src/components/leaderboard-chart/stories/index.docs.mdx b/projects/js-packages/charts/src/components/leaderboard-chart/stories/index.docs.mdx index 1f0cbaa7cefec..1fe98faad68d3 100644 --- a/projects/js-packages/charts/src/components/leaderboard-chart/stories/index.docs.mdx +++ b/projects/js-packages/charts/src/components/leaderboard-chart/stories/index.docs.mdx @@ -461,22 +461,24 @@ The component supports CSS custom properties for advanced styling: ### Theme Integration -The chart integrates with the global charts theming system: +The chart integrates with the global charts theming system. Create a custom theme by defining the properties you want to override: + const customTheme = { + colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'], + }; + + ` } /> **Available themes:** - **Default**: Neutral colors and styling -- **Jetpack**: Jetpack brand colors and styling -- **Woo**: WooCommerce brand colors and styling -- **Custom**: Define your own theme object +- **Custom**: Define your own theme object with properties to override ## Accessibility diff --git a/projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx b/projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx index 660cbe7f94352..4ffc6dd40ac3c 100644 --- a/projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx +++ b/projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx @@ -203,7 +203,6 @@ Annotations inherit styling from your chart theme. You can customize annotation + const customTheme = { + colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'], + gridColor: '#E0E0E0', + }; + + ` } /> **Available themes:** - **Default**: Neutral colors and styling -- **Jetpack**: Jetpack brand colors and styling -- **Woo**: WooCommerce brand colors and styling -- **Custom**: Define your own theme object +- **Custom**: Define your own theme object with properties to override diff --git a/projects/js-packages/charts/src/components/pie-chart/stories/index.docs.mdx b/projects/js-packages/charts/src/components/pie-chart/stories/index.docs.mdx index a582c2f8fa82e..8f7c4f4a894f1 100644 --- a/projects/js-packages/charts/src/components/pie-chart/stories/index.docs.mdx +++ b/projects/js-packages/charts/src/components/pie-chart/stories/index.docs.mdx @@ -282,14 +282,22 @@ const customTheme = { ### Theme Integration -Pie Charts automatically integrate with the chart theme system, inheriting colors, typography, and styling from the active theme. Custom themes can be applied using the `GlobalChartsProvider`: +Pie Charts automatically integrate with the chart theme system, inheriting colors, typography, and styling from the active theme. Create a custom theme by defining the properties you want to override: + ` } /> + +**Available themes:** +- **Default**: Neutral colors and styling +- **Custom**: Define your own theme object with properties to override diff --git a/projects/js-packages/charts/src/stories/index.docs.mdx b/projects/js-packages/charts/src/stories/index.docs.mdx index 8b4b9b3f200a0..ddd12f2d1dc69 100644 --- a/projects/js-packages/charts/src/stories/index.docs.mdx +++ b/projects/js-packages/charts/src/stories/index.docs.mdx @@ -84,7 +84,7 @@ Great for showing parts of a whole, with customizable thickness and gap spacing. Charts expect data in a standardized format with `date` (for time-series) or category values and numeric `value` properties. ### Theme System -Use the `GlobalChartsProvider` component to apply consistent styling across all charts with support for custom themes. +Use the `GlobalChartsProvider` component to apply consistent styling across all charts. Create custom themes by defining the properties you want to override, such as colors, grid styling, and typography. ### Responsive Design All charts automatically adapt to their container size using the `withResponsive` higher-order component. From b0ede8b7876c1131f4eee447809e100b3a581390 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Mon, 8 Dec 2025 16:09:16 +1300 Subject: [PATCH 4/4] Fix deltaColors comment order in chart theme configuration --- .../js-packages/charts/src/providers/chart-context/themes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/charts/src/providers/chart-context/themes.ts b/projects/js-packages/charts/src/providers/chart-context/themes.ts index 2b1dc7015c84e..f922155011822 100644 --- a/projects/js-packages/charts/src/providers/chart-context/themes.ts +++ b/projects/js-packages/charts/src/providers/chart-context/themes.ts @@ -43,7 +43,7 @@ const defaultTheme: CompleteChartTheme = { rowGap: 12, columnGap: 4, labelSpacing: 1.5, - deltaColors: [ '#FF8C8F', '#757575', '#1F9828' ], // [negative, neutral, positive] + deltaColors: [ '#FF8C8F', '#757575', '#1F9828' ], // [ positive, negative, neutral ] }, conversionFunnelChart: { backgroundColor: '#F3F4F6',