Open
Description
Describe the issue
I want to show the legend in the bottom position for line series chart but failed, it shows in the right position
To Reproduce
Steps to reproduce the behavior:
- open the demo app: https://bolt.new/~/sb1-cgcnmq
- view the demo code:
import React from 'react';
import {
Chart,
Settings,
Axis,
LineSeries,
ScaleType,
Position,
} from '@elastic/charts';
interface DataPoint {
x: string;
y: number;
}
interface LineChartProps {
data: DataPoint[];
title: string;
}
export function LineChart({ data, title }: LineChartProps) {
return (
<Chart size={{ height: 300 }}>
<Settings
theme={{
chartMargins: { left: 40, right: 40, top: 20, bottom: 40 },
}}
showLegend={true}
legendPosition={Position.Bottom}
/>
<Axis
id="bottom"
position={Position.Bottom}
title="Time"
tickFormat={(d) => d}
/>
<Axis
id="left"
title="Value"
position={Position.Left}
tickFormat={(d) => d}
/>
<LineSeries
id={title}
name={title}
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={["y"]}
data={data}
/>
</Chart>
);
}
- preview result:
Expected behaviour
I expect to see the legend is put in the bottom instead of right.
Version (please complete the following information):
- OS: macOS 12.5
- Browser: chrome 131.0.6778.86
- Elastic Charts: 68.0.3
Additional context
it seems the echChartContent--column class is not added.
