CSS aspect-ratio wrapper for responsive charts — zero JS.
Inspired by Nivo's ResponsiveWrapper. Wraps chart content in a container that maintains a fixed aspect ratio while scaling to fill available width.
Examples
<.responsive_chart>
<.bar_chart data={data} />
</.responsive_chart>
<.responsive_chart aspect_ratio="16/9" min_height="300px">
<.line_chart series={series} />
</.responsive_chart>Summary
Functions
Attributes
aspect_ratio(:string) - CSS aspect-ratio value. Defaults to"4/3".min_height(:string) - Minimum container height. Defaults to"200px".breakpoints(:map) - CSS container-query-based responsive rules. Map of breakpoint name → style overrides:%{sm: %{aspect_ratio: "1/1"}, lg: %{aspect_ratio: "16/9"}}. Supported keys: :sm (320px), :md (480px), :lg (640px), :xl (800px).Defaults to
%{}.class(:string) - Defaults tonil.Global attributes are accepted.
Slots
inner_block(required)