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

Composable SVG grid components for charts.

Render horizontal, vertical, or polar grid lines as background guides.
Accept scale functions and tick values for positioning.

## Examples

    <svg viewBox="0 0 400 300">
      <.y_grid ticks={[0, 50, 100]} scale={y_scale} x={44} width={340} />
      <.x_grid ticks={["Jan", "Feb", "Mar"]} scale={x_scale} y={16} height={244} />
    </svg>

# `polar_grid`

Renders concentric circles and optional radial spoke lines for polar charts.

## Attributes

* `rings` (`:list`) (required) - List of radius values in pixels.
* `spokes` (`:integer`) - Number of radial lines (0 = none). Defaults to `0`.
* `cx` (`:any`) (required)
* `cy` (`:any`) (required)
* `dash_array` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.

# `x_grid`

Renders vertical grid lines at each tick position.

## Attributes

* `ticks` (`:list`) (required) - List of tick values.
* `scale` (`:any`) (required) - Scale function `fn(value) -> pixel_x`.
* `y` (`:any`) (required) - Top Y position.
* `height` (`:any`) (required) - Height of grid lines.
* `dash_array` (`:string`) - SVG stroke-dasharray (e.g. "4 2"). Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.

# `y_grid`

Renders horizontal grid lines at each tick position.

## Attributes

* `ticks` (`:list`) (required)
* `scale` (`:any`) (required) - Scale function `fn(value) -> pixel_y`.
* `x` (`:any`) (required) - Left X position.
* `width` (`:any`) (required) - Width of grid lines.
* `dash_array` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.

---

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