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

Reusable SVG `<defs>` building blocks for chart gradients, patterns, and clip paths.

All components render inside `<defs>` — the caller wraps them in
`<svg><defs>...</defs>...</svg>` and references definitions via `url(#id)`.

## Examples

    <svg viewBox="0 0 400 300">
      <defs>
        <.chart_linear_gradient
          id="revenue-gradient"
          stops={[
            %{offset: "0%", color: "oklch(0.60 0.20 240)"},
            %{offset: "100%", color: "oklch(0.60 0.20 240 / 0.1)"}
          ]}
        />
        <.chart_clip_path id="chart-clip" x={44} y={16} width={340} height={244} />
      </defs>
      <rect fill="url(#revenue-gradient)" clip-path="url(#chart-clip)" ... />
    </svg>

# `chart_clip_path`

Renders an SVG `<clipPath>` with a rectangular clipping region.

Use to clip chart content to the viewport area.

## Attrs
- `id` — unique identifier (referenced via `clip-path="url(#id)"`)
- `x`, `y`, `width`, `height` — clip rectangle dimensions

## Attributes

* `id` (`:string`) (required)
* `x` (`:any`) - Defaults to `0`.
* `y` (`:any`) - Defaults to `0`.
* `width` (`:any`) (required)
* `height` (`:any`) (required)

# `chart_linear_gradient`

Renders an SVG `<linearGradient>` with configurable stops.

## Attrs
- `id` — unique identifier (referenced via `url(#id)`)
- `stops` — list of `%{offset, color}` or `%{offset, color, opacity}` maps
- `x1`, `y1`, `x2`, `y2` — gradient direction (default: vertical top-to-bottom)

## Attributes

* `id` (`:string`) (required)
* `stops` (`:list`) (required) - List of `%{offset, color}` maps.
* `x1` (`:string`) - Defaults to `"0%"`.
* `y1` (`:string`) - Defaults to `"0%"`.
* `x2` (`:string`) - Defaults to `"0%"`.
* `y2` (`:string`) - Defaults to `"100%"`.

# `chart_pattern`

Renders an SVG `<pattern>` definition for fills.

Built-in types: `:dots`, `:lines`, `:crosshatch`, `:diagonal`.

## Attrs
- `id` — unique identifier
- `type` — pattern type atom
- `size` — pattern tile size in px (default 8)
- `color` — stroke/fill color (default "currentColor")
- `opacity` — pattern opacity (default "0.2")

## Attributes

* `id` (`:string`) (required)
* `type` (`:atom`) - Defaults to `:dots`. Must be one of `:dots`, `:lines`, `:crosshatch`, or `:diagonal`.
* `size` (`:integer`) - Defaults to `8`.
* `color` (`:string`) - Defaults to `"currentColor"`.
* `opacity` (`:string`) - Defaults to `"0.2"`.

# `chart_radial_gradient`

Renders an SVG `<radialGradient>` with configurable stops.

## Attrs
- `id` — unique identifier
- `stops` — list of `%{offset, color}` or `%{offset, color, opacity}` maps
- `cx`, `cy` — center of the gradient (default: "50%")
- `r` — radius (default: "50%")

## Attributes

* `id` (`:string`) (required)
* `stops` (`:list`) (required)
* `cx` (`:string`) - Defaults to `"50%"`.
* `cy` (`:string`) - Defaults to `"50%"`.
* `r` (`:string`) - Defaults to `"50%"`.

---

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