Skip to content

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

Open
@alexbalonperin

Description

@alexbalonperin

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;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: FeatureNew feature for existing component

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions