Failed to put the legend in the bottom position

[baurine]

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:

1. open the demo app: https://bolt.new/~/sb1-cgcnmq
2. 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>
  );
}

3. 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.

[baurine]

@markov00 can you help have a look, I'm blocking by this bug (maybe not a bug, but I just don't know where is the problem), thanks!

[markov00]

I'm investigating this a bit, but I'm on a couple of more priorities right now. I hope I can give you an update today

[markov00]

@baurine The problem is that the library still has some issues with React StrictMode that are not solved yet. If you run you app without the <React.StrictMode> wrapper it will work as expected

[markov00]

cc @nickofthyme we need to definitely work on that.
I've also tested locally with React 18 and StrictMode but I got a different results then in the demo above. In this demo mouse events are at least correctly picked up.

[baurine]

@markov00 big thanks for your help!

[baurine]

btw, because StrictMode only affect the development mode, so this issue doesn't exist in the production build, I have tested.