# XYAxes

> Gridlines in both directions and the x/y axes of an `xyLayout`.

Source: https://ui.jcsoftdev.com/docs/components/xy-axes

Gridlines in both directions and the x/y axes of an `xyLayout`.

## Import

```ts
import { XYAxes } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/core`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => <AxesFrame xTitle={args.xTitle} yTitle={args.yTitle} grid={args.grid} />,
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `layout` * | `XYLayout` |  |  |
| `xTitle` | `string` |  |  |
| `yTitle` | `string` |  |  |
| `grid` | `boolean` | `true` |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-xyaxes--default)
- [Without Grid](/storybook/?path=/story/charts-primitives-xyaxes--without-grid)
- [Without Titles](/storybook/?path=/story/charts-primitives-xyaxes--without-titles)

## Source

`packages/ui/src/charts/core/distribution/marks.tsx`