Add support for custom legend positioning with legendHorizontalAlign and legendVerticalAlign props

[annacmc]

Proposed changes:

• This PR adds support for custom legend positioning in charts through new horizontalAlign and verticalAlign props on the legend components. This enhancement allows for more flexible legend placement and better visual control over chart layouts.

Changes:

• Added new legend positioning types: align ('left' | 'center' | 'right') and verticalAlign ('top' | 'bottom') in src/components/legend/types.ts
• Updated all chart components to support legend positioning props:
  • Bar Chart, Line Chart, Pie Chart, and Pie Semi-Circle Chart
• Enhanced BaseLegend component with positioning logic
• Created comprehensive Storybook examples demonstrating various legend positioning combinations
• Fixed pie chart rendering issue when thickness is 0

The new positioning props can be used on any chart with a legend:

// Center-aligned legend at the top
<BarChart 
  data={data} 
  legend={{
    align: 'center',
    verticalAlign: 'top'
  }}
/>

// Right-aligned legend at the bottom
<LineChart 
  data={data}
  legend={{
    align: 'right', 
    verticalAlign: 'bottom'
  }}
/>

Existing code continues to work as before for full backwards compatibility.

Other information:

• [x] 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)?

Jetpack product discussion

<!-- Chart library enhancement to improve legend positioning flexibility -->

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

No, this PR does not change what data or activity we track or use. It only adds new visual positioning options for chart legends without affecting any data collection, tracking, or privacy aspects.

Testing instructions:

• In your Jetpack local environment, navigate to the Storybook development environment:

pnpm i
cd projects/js-packages/storybook
pnpm run storybook:dev

• Find the following stories in the sidebar to test legend positioning:

  • JS Packages/Charts/BarChart/Legend Positioning
  • JS Packages/Charts/LineChart/Legend Positioning
  • JS Packages/Charts/PieChart/Legend Positioning
  • JS Packages/Charts/PieSemiCircleChart/Legend Positioning

• Test each combination of positioning options:

  • Horizontal alignment: left, center, right
  • Vertical alignment: top, bottom
  • Verify legends appear in the correct positions
  • Check that existing charts without positioning props still work correctly

• Verify backwards compatibility by checking existing chart stories still render properly

Expected behavior:

• Legends should position correctly according to horizontalAlign/verticalAlign props
• Default behavior (no positioning props) should remain unchanged
• All chart types should support the new positioning options consistently

[github-actions[bot]]

Thank you for your PR!

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

• :white_check_mark: Include a description of your PR changes.
  
• :white_check_mark: Add a "[Status]" label (In Progress, Needs Review, ...).
  
• :white_check_mark: Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• :white_check_mark: Add testing instructions.
  
• :white_check_mark: Specify whether this PR includes any changes to data or privacy.
  
• :white_check_mark: 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 :robot:

---

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[bot]]

Code Coverage Summary

Coverage changed in 2 files.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx	42/45 (93.33%)	0.31%	0 💚
projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx	44/44 (100.00%)	0.00%	0 💚

Full summary · JS report

[annacmc]

@adamwoodnz I've tried to work in with your recent storybook restructuring and get all of the stories into their relevant legend directories. But let me know if I've misunderstood anything about how you were hoping to organise! :)

[adamwoodnz]

@adamwoodnz I've tried to work in with your recent storybook restructuring and get all of the stories into their relevant legend directories. But let me know if I've misunderstood anything about how you were hoping to organise! :)

Nicely done! I wonder if we need so many stories for these states though, as it creates a lot of entries:

Perhaps we could have one story (named Alignment/Positioning?) with select controls to easily switch the alignment, rather than the existing default control where we have to type a string. What do you think?

[adamwoodnz]

Perhaps we could have one story (named Alignment/Positioning?) with select controls to easily switch the alignment, rather than the existing default control where we have to type a string. What do you think?

Example control config: https://github.com/Automattic/jetpack/pull/43994/files?diff=unified&w=1#diff-0733c2605413ac66e8e920b91e2a65bfefa30d48185e59b6fdcf1f312a09aa10R69

Hat tip: @Nikschavan

[adamwoodnz]

Perhaps we could have one story (named Alignment/Positioning?) with select controls to easily switch the alignment, rather than the existing default control where we have to type a string. What do you think?

Ah I see you've already got this on the composite Legend story. It would be great to extend that to the other chart stories.

[annacmc]

Thanks so much everyone for your feedback. I have made some of the suggested changes, and am going to iterate on @chihsuan and @adamwoodnz remaining suggested in my next PR 🙏

[adamwoodnz]

The new storybook controls are great! I noticed a couple of things though; there is still a text control for legendAlign which doesn't seem to change anything for me, and the legendAlignmentHorizontal doesn't work for me with legendOrientation: vertical and legendAlignmentVertical: bottom. It is always left aligned:

[adamwoodnz]

I noticed the legend is overlapping with pie chart when the layout is vertical:

I think this would be fixed by using a flex column, it's exactly the type of bug that is common with absolute positioning.