tremorlabs / tremor

React components to build charts and dashboards
https://npm.tremor.so
Apache License 2.0
16.22k stars 467 forks source link

[Feature]: Enable multiple X-Axis and Y-Axis for AreaCharts, LineCharts & BarCharts #1102

Open alexbalonperin opened 4 months ago

alexbalonperin commented 4 months ago

What problem does this feature solve?

Multiple Y-Axis allow showing multiple data series with different data ranges while keeping both series nicely visible and comparable. Multiple X-Axis can be used to compare timeseries at different times or show multiple axis for different granularities of the timeseries (e.g. month & quarter).

What does the proposed API look like?

Add two fields to the BaseChartProps:

interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<HTMLDivElement> {
   ...other fields
   xAxisConfigs?: XAxisConfig[];
   yAxisConfigs?: YAxisConfig[];
}

interface XAxisConfig {
  orientation: VerticalPosition;
  series?: string[];
  valueFormatter?: ValueFormatter;
}

export interface YAxisConfig {
  autoMinValue?: boolean;
  minValue?: number;
  maxValue?: number;
  orientation: HorizontalPosition;
  categories?: string[];
  valueFormatter?: ValueFormatter;
}