# AxisBottom

> Category or time labels under the plot.

Source: https://ui.jcsoftdev.com/docs/components/axis-bottom

Category or time labels under the plot.

## Import

```ts
import { AxisBottom } 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: () => <AxesDemo title="Ventas" rightTitle="Cortes" showRight={false} showGrid />,
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ticks` * | `readonly AxisTick[]` |  |  |
| `offset` * | `number` |  | Offset of the axis line: `y` for bottom, `x` for left/right. |
| `title` | `string` |  |  |
| `color` | `string` |  | Overrides the label color (a value axis matched to its series). |
| `rotate` | `number` |  | Tilts the labels by this many degrees (negative reads up and to the right), e.g. -45. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-axes--default)
- [Dual Axis](/storybook/?path=/story/charts-primitives-axes--dual-axis)
- [Without Grid](/storybook/?path=/story/charts-primitives-axes--without-grid)

## Source

`packages/ui/src/charts/core/axes.tsx`