Allow specifying curve and other props on LineSeries in LineChart component

[ecgan]

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:

jetpack/projects/js-packages/charts/src/components/line-chart/line-chart.tsx

Lines 150 to 157 in 92cd80b

	<AnimatedLineSeries
	key={ seriesData?.label }
	dataKey={ seriesData?.label }
	data={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart
	{ ...accessors }
	stroke={ stroke }
	strokeWidth={ 2 }
	/>

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:

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

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

<LineSeries
	curve={ curveNatural }
/>

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.

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] WooCommerce Analytics: The issue specifically relates to the WooCommerce Analytics plugin and its use of the LineChart component.
• [Feature] WooCommerce Analytics: The enhancement being requested directly impacts the functionality and flexibility of the WooCommerce Analytics data visualization.
• [Feature] Custom CSS: Allowing customization options such as setting different curves and stroke widths implies a need for additional styling capabilities, often achieved through custom CSS.

[github-actions]

This issue could use some more labels, to help prioritize and categorize our work. Could you please add at least a [Type], a [Feature], and a [Pri] label?