Automattic / Automattic/jetpack

Allow specifying `curve` and other props on LineSeries in LineChart component

Open
#41,253 2 comments 0 reactions 0 assignees View on GitHub
[Experiment] AI labels added [JS Package] Charts [Pri] Normal Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

None / Other

### What

I would like to have different curve property for the line series when I use the LineChart component.

### How

Currently the line series in the LineChart component is built like this:

https://github.com/Automattic/jetpack/blob/92cd80bda476cd6f3f63eae1b81aca60fa68a40c/projects/js-packages/charts/src/components/line-chart/line-chart.tsx#L150-L157

The LineChart uses the default curveLinear factory (see https://airbnb.io/visx/docs/xychart#AnimatedLineSeries_curve). There isn't a way to specify a different curve factory.

In WooCommerce Analytics, we would like to have a different curve - see design screenshot below:

![Image](https://github.com/user-attachments/assets/2d015fe2-c3d7-45af-83c7-7cbed2fd8df5)

The above can be done manually by doing something like this:

```js
import { curveNatural } from '@visx/curve';

```

It would be good if the LineChart component can support different curves. Even better if it can support other LineSeries properties (not just `curve`), such as `strokeWidth` which is currently hardcoded with the value `2`.

Contributor guide

Open the contributing guide

Research direction

Start in projects/js-packages/charts/src/components/line-chart/line-chart.tsx at the linked LineSeries construction and inspect how LineChart props are defined and passed through. Compare the available visx LineSeries props, including curve and strokeWidth, with the current hardcoded behavior. Done means LineChart consumers can specify a different curve and other supported LineSeries properties without losing the existing defaults.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.