[Feature]: Enable multiple X-Axis and Y-Axis for AreaCharts, LineCharts & BarCharts #1102
Description
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;
}