# ChartInkToolbar

> Buttons for the ruler and pen tools plus undo, redo and clear.

Source: https://ui.jcsoftdev.com/docs/components/chart-ink-toolbar

Buttons for the ruler and pen tools plus undo, redo and clear. Place it next to the chart.

## Import

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

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

## Usage

```tsx
export const Default: Story = {
  args: { ink: placeholder },
  render: () => <InkDemo kind="line" tool="ruler" />,
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ink` * | `ChartInk` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-inkannotations--default)
- [On Bars](/storybook/?path=/story/charts-inkannotations--on-bars)
- [On Horizontal Bars](/storybook/?path=/story/charts-inkannotations--on-horizontal-bars)
- [Narrow](/storybook/?path=/story/charts-inkannotations--narrow)
- [Brutal Preset](/storybook/?path=/story/charts-inkannotations--brutal-preset)
- [Keyboard](/storybook/?path=/story/charts-inkannotations--keyboard)
- [Downsampled](/storybook/?path=/story/charts-inkannotations--downsampled)

## Source

`packages/ui/src/charts/core/cartesian/ink-layer.tsx`