Charts: Improve Storybook organization, add configuration stories and fix control issues

[annacmc]

fixes: #CHARTS-37

Proposed changes:

This PR improves Storybook organization by adding Configuration stories with interactive controls and fixing control visibility issues across all chart components.

Configuration Stories with Interactive Controls

• Bar Chart: Add Configuration story with controls for data series count (single/multiple/many), orientation (vertical/horizontal), grid visibility, and pattern fills
• Bar List Chart: Add Configuration story with seriesCount control (single/multiple)
• Leaderboard Chart: Add Configuration story with dataVariant control (default/small/large-values/negative-growth/empty) plus comparison, overlay label, and loading toggles
• Line Chart: Add Configuration story with seriesCount control (single/multiple/many), dimension mode (responsive/fixed), smoothing, curve type, and gradient fill controls
• Pie Chart: LegendConfiguration story already exists with comprehensive legend controls
• Donut Chart: Configuration story already exists with thickness, gap, corner, and center content controls

Control Visibility Improvements

• Hide inapplicable controls from stories that don't use them:
  • Bar Chart: Hide seriesCount and withPatterns controls from non-Configuration stories (Default, HorizontalOrientation, ManySeriesWithLegend, legends, patterns, error states)
  • Bar List Chart: Hide seriesCount control from Default, CustomLabelComponent, and CustomValueComponent stories
  • Leaderboard Chart: Hide dataVariant control from all non-Configuration stories (12 stories)
  • Line Chart: Hide seriesCount and dimensionMode controls from Default, LegendConfiguration, WithCompositionLegend, and ErrorStates stories
  • Pie Chart: Hide hardcoded visual style controls (size, thickness, labelColors) from CompositionAPI story; hide all visual controls from ErrorStates story

Bug Fixes

• Fix Bar Chart gridVisibility control: change 'both' option to 'xy' to match component's expected type
• Fix Bar Chart Configuration: increase 'many' series from 8 to 15 to make it visually distinct from 'multiple' (3 series)
• Fix Bar Chart docs: create exported stories for Horizontal Bars, Many Series, and Vertical Legend examples that weren't rendering correctly
• Fix Pie Chart CompositionAPI: allow legendValueDisplay control to work (was incorrectly hidden)

Documentation Updates

• Update all chart docs to reference consolidated Configuration stories
• Fix Bar Chart Basic Legend demo by creating proper exported LegendHorizontalBottom story
• Ensure all inline MDX examples reference correct exported stories

Control Organization

• Organize controls into logical categories for better discoverability:
  • Data: Dataset variant controls (seriesCount, dataVariant)
  • Visual Style: Chart styling (orientation, gridVisibility, smoothing, curveType, thickness, etc.)
  • Dimensions: Size and layout controls
  • Tooltips: Tooltip-related controls
  • Labels: Label styling and display
  • Legend: Legend positioning and styling
  • Theme: Theme variants

Impact

• Better UX: Configuration stories let users explore variations without cluttering the sidebar
• Cleaner controls: Inapplicable controls are hidden, reducing confusion
• More accurate: Bug fixes ensure controls work as expected and displays match documentation
• Better organized: Control categories make features easier to discover

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Does this pull request change what data or activity we track or use?

No, it does not.

Testing instructions:

Bar Chart - Configuration Story

• Go to Storybook -> Charts -> Types -> Bar Chart
• Open the Configuration story
• Test the following controls in the Data category:
  • seriesCount: Switch between single/multiple/many - verify single shows 1 country, multiple shows 3, many shows 15
• Test the following controls in the Visual Style category:
  • orientation: Switch between vertical/horizontal - verify bars change orientation
  • gridVisibility: Test none/x/y/xy - verify grid lines appear/disappear correctly (especially verify 'xy' shows both grids)
  • withPatterns: Toggle on - verify bars show pattern fills
• Verify these controls are hidden from other Bar Chart stories (Default, HorizontalOrientation, etc.)

Bar Chart - Documentation Examples

• Go to Bar Chart -> Docs tab
• Verify these sections render correctly:
  • Horizontal Bars: Should show horizontal bars (not vertical)
  • Many Data Series: Should show all 26 series with legend (not just 3)
  • Basic Legend: Should display a legend (was previously missing)
  • Vertical Legend: Should show vertically-oriented legend (not horizontal)

Bar List Chart - Configuration

• Go to Storybook -> Charts -> Types -> Bar List Chart
• Open the Configuration story
• Test seriesCount control (Data category): Switch between single/multiple
• Verify single shows 1 series, multiple shows 3 series
• Verify seriesCount control is hidden from Default, CustomLabelComponent, and CustomValueComponent stories

Leaderboard Chart - Configuration

• Go to Storybook -> Charts -> Types -> Leaderboard Chart
• Open the Configuration story
• Test dataVariant control (Data category): Switch between default/small/large-values/negative-growth/empty
• Verify each variant shows different data appropriately
• Test other controls: withComparison, withOverlayLabel, loading
• Verify dataVariant control is hidden from all other Leaderboard Chart stories (12 stories including Default, WithoutComparison, WithOverlayLabel, etc.)

Line Chart - Configuration

• Go to Storybook -> Charts -> Types -> Line Chart
• Open the Configuration story
• Test the following controls:
  • seriesCount (Data category): Switch between single/multiple/many
  • dimensionMode (Dimensions category): Switch between responsive/fixed
  • smoothing (Visual Style): Toggle on/off
  • curveType (Visual Style): Switch between linear/smooth/monotone
  • withGradientFill (Visual Style): Toggle gradient fill under lines
• Verify seriesCount and dimensionMode controls are hidden from Default, LegendConfiguration, WithCompositionLegend, and ErrorStates stories

Pie Chart - Controls

• Go to Storybook -> Charts -> Types -> Pie Chart
• Open the CompositionAPI story
• Verify legendValueDisplay control still works (can switch between percentage/value/valueDisplay/none)
• Verify size, thickness, labelTextColor, labelBackgroundColor, and showLabels controls are hidden (they're hardcoded)
• Open the ErrorStates story
• Verify all visual style controls are hidden (story uses hardcoded values)

Overall Verification

• Confirm Configuration stories provide a comprehensive way to explore chart variations
• Verify control categories (Data, Visual Style, etc.) make features easier to find
• Ensure hidden controls don't appear where they shouldn't
• Check that all documentation examples render correctly
• Verify no TypeScript errors or visual regressions

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the charts-37-use-the-controls-to-put-similar-stories-together branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack charts-37-use-the-controls-to-put-similar-stories-together

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

[Copilot]

Pull Request Overview

This PR consolidates redundant Storybook stories into interactive configuration stories with controls, reducing story count while improving discoverability. The changes replace multiple static stories with single stories featuring interactive controls for tooltips, annotations, glyphs, legends, and chart orientations.

Key Changes:

• Replaces 5 Line Chart tooltip stories with 1 interactive TooltipConfiguration story
• Replaces 4 Line Chart annotation stories with 1 AnnotationConfiguration story
• Adds comprehensive GlyphConfiguration story with glyph positioning and type controls
• Consolidates legend stories for both Line and Pie charts into unified LegendConfiguration stories
• Enhances Bar Chart Default story with orientation and grid visibility controls

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pie-chart/stories/index.stories.tsx	Replaces separate legend stories with unified LegendConfiguration featuring 8 interactive controls
line-chart/stories/tooltip.stories.tsx	Consolidates 5 tooltip stories into single TooltipConfiguration with crosshair controls
line-chart/stories/index.stories.tsx	Replaces legend stories with comprehensive LegendConfiguration story
line-chart/stories/glyph.stories.tsx	Adds new GlyphConfiguration story with positioning, type, and size controls
line-chart/stories/annotation.stories.tsx	Consolidates 4 annotation stories into AnnotationConfiguration with subject type controls
bar-chart/stories/index.stories.tsx	Enhances Default story with orientation and grid visibility controls
changelog/charts-37-use-the-controls-to-put-similar-stories-together	Documents the consolidation changes

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (2)

projects/js-packages/charts/src/components/line-chart/stories/glyph.stories.tsx:1

• The GlyphStar component expects size * size for the size property, but this is passing the raw size value. This inconsistency with the visx API could cause glyphs to render incorrectly.

import { GlobalChartsProvider } from '../../../providers';

projects/js-packages/charts/src/components/line-chart/stories/glyph.stories.tsx:1

• The GlyphStar component expects size * size for the size property. The raw size value being passed could result in smaller than expected glyphs.

import { GlobalChartsProvider } from '../../../providers';

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated no new comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[kangzj]

I'm still testing out some of the stories, but it seems most of the Docs are broken:

[kangzj]

Bar chart -> Configuration

Multiple and many have the same number of bars:

[kangzj]

Bar List Chart -> Default (and the ones below Default)

When set to multiple, it still shows one set of bars. We need to hide the control if not applicable.

[kangzj]

We need to double check whether some controls are applicable for all the stories - if a control doesn't work, then we should either remove it or make it work.

[annacmc]

We need to double check whether some controls are applicable for all the stories - if a control doesn't work, then we should either remove it or make it work.

I agree! Sorry I got this ready then made some changes on Friday evening, I should've marked it back as a draft while I fixed it up 🙈 I'm working on it right now though and will let you know once it's actually ready for review this time.

[annacmc]

This got out of control! Closing up in favour of the much cleaner & simplified #45503