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>Summary
Functions
Renders concentric circles and optional radial spoke lines for polar charts.
Renders vertical grid lines at each tick position.
Renders horizontal grid lines at each tick position.
Functions
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 to0.cx(:any) (required)cy(:any) (required)dash_array(:string) - Defaults tonil.class(:string) - Defaults tonil.
Renders vertical grid lines at each tick position.
Attributes
ticks(:list) (required) - List of tick values.scale(:any) (required) - Scale functionfn(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 tonil.class(:string) - Defaults tonil.
Renders horizontal grid lines at each tick position.
Attributes
ticks(:list) (required)scale(:any) (required) - Scale functionfn(value) -> pixel_y.x(:any) (required) - Left X position.width(:any) (required) - Width of grid lines.dash_array(:string) - Defaults tonil.class(:string) - Defaults tonil.