feat: Charts package continued

[leofarias-cpu]

Summary

The @vtex/shoreline-charts library wraps echarts in a react component with consistent theming and features.
This is a work-in-progress continuation of Natan's work by VTEX lab@UFCG, with new features, types of charts, documentation, testing and fixes.

Default styles for line and bar charts

Mostly improvements and fixes from the original PR. In the future more chart types will be supported, such as area charts.

Composite charts

Previously it was possible to make i.e. a bar chart with a line, but only one of the two would be properly themed. With the new <ChartCompositor> component all possible combinations of chart types and variant can be used together, all with shoreline-charts styling.

Custom legend selection behavior

Screencast.from.2025-04-16.11-47-52.webm

Pre-processing

Implemented with the 'seriesHooks' prop, allows for more fine grained data control at a series level. Users can pass functions and some chart types have default ones, which allows us to, for instance, make negative bars have proper rounded corners, which Echarts by itself does not do.

Examples

Composite chart with bars and lines

const data1: number[] = []
const data2: number[] = []
const data3: number[] = []

for (let i = 0; i < 25; i++) {
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
  data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5)
  data3.push((data1[i] + data2[i]) / 2)
}

return (
  <ChartCompositor
    charts={[
      {
        series: { data: data1, name: 'Bar 1' },
        chartConfig: { type: 'bar' },
      },
      {
        series: { data: data2, name: 'Bar 2' },
        chartConfig: { type: 'bar' },
      },
      {
        series: { data: data3, name: 'Average' },
        chartConfig: { type: 'line' },
      },
    ]}
    tooltip={{ type: 'line' }}
    zoom
  />
)

Line chart

<Chart 
  option={{
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: {
		data: [820, 932, 901, 934, 1290, 1330, 1320],
    }
  }} 
  chartConfig={type: "bar" 
/>

[vercel]

@leofarias-cpu is attempting to deploy a commit to the VTEX Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
shoreline-docs	Error		Sep 8, 2025 1:24pm

[beatrizmilhomem]

Hello!

Design QA – Bia Oliveira documented what needs to be adjusted here.

Information Architecture – There are some necessary adjustments to be made in the architecture of the documentation, they are here. Please reach out if you have any questions.