# `PhiaUi.Components.Data.ResponsiveChart`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/responsive_chart.ex#L1)

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>

# `responsive_chart`

## 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 to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*