Responsiveness

By default, visualisations will reflow horizontally to fill their available space on smaller screens, however, if you would prefer the visualisation to overflow horizontally, you should wrap the chart in a Container element with a fixed width and overflow set, which will enable the chart to scroll on the x-axis, rather than reflowing.

<Container width={550} overflowX="auto">
    <CoralAreaChart {...args} />,
</Container>

Refs

The charts also accept a ref property, enabling you to fetch the rendered with of the chart, rather than the rendered width of the parent, for use in custom tooltip calculations.

const myRef = useRef<HTMLDivElement>(null);
 
<Container width={550}>
    <CoralAreaChart {...args} ref={myRef} />,
</Container>