# Chart

```ts
import { Chart } from 'cx/charts';
```



The `Chart` widget defines axes and bounds for two-dimensional charts such as line, scatter, bar, and column charts.

```tsx
import { Svg, Rectangle } from "cx/svg";
import { Chart, NumericAxis, Gridlines } from "cx/charts";

export default (
  <Svg style="width: 300px; height: 200px; border: 1px solid #ddd">
    <Chart
      margin="10 20 30 50"
      axes={{
        x: { type: NumericAxis },
        y: { type: NumericAxis, vertical: true },
      }}
    >
      <Rectangle fill="#eee" />
      <Gridlines />
    </Chart>
  </Svg>
);

```

## Axis Configuration

The most important part is **axis configuration**. A chart typically needs two axes:

- **Horizontal axis** (x) — default orientation
- **Vertical axis** (y) — set `vertical: true`

Numeric, category, and time axis types are supported. One axis must be vertical for proper chart orientation.

## Margin and Offset

The `margin` property on the `Chart` element reserves space for axis labels and ticks. Use the format `"top right bottom left"` (e.g., `margin="10 20 30 50"`).

The `offset` property works similarly to `margin` but with different sign conventions — it always works in the top-to-bottom and left-to-right direction. For right and bottom offsets, use negative numbers.

Example: `offset="10 -20 -30 50"` is equivalent to `margin="10 20 30 50"`.

## Secondary Axes

Charts can have secondary axes displayed at the top (x2) or right (y2) side. Set `secondary: true` on the axis configuration.

```tsx
import { Svg, Rectangle } from "cx/svg";
import { Chart, NumericAxis, Gridlines } from "cx/charts";

export default (
  <Svg style="width: 400px; height: 300px; border: 1px solid #ddd">
    <Chart
      margin="60 60 60 60"
      axes={{
        x: { type: NumericAxis, min: 100, max: 500 },
        y: { type: NumericAxis, vertical: true, max: 5000 },
        x2: { type: NumericAxis, secondary: true, inverted: true },
        y2: { type: NumericAxis, vertical: true, secondary: true },
      }}
    >
      <Rectangle fill="white" margin={1} />
      <Gridlines />
      <Gridlines xAxis="x2" yAxis="y2" />
    </Chart>
  </Svg>
);

```

Key axis properties:
- `secondary` — Displays axis at top/right instead of bottom/left
- `inverted` — Reverses the axis direction (values in descending order)
- `vertical` — Required for y-axes

> Be careful with gridlines when using secondary axes — you may need separate `Gridlines` components for each axis pair.

## Main Chart Elements

### Axes

- [NumericAxis](/docs/charts/numeric-axis) — For numerical data
- [CategoryAxis](/docs/charts/category-axis) — For categorical data
- [TimeAxis](/docs/charts/time-axis) — For date/time data

### Graphs (Series)

- [LineGraph](/docs/charts/line-graph) — Line and area charts
- [BarGraph](/docs/charts/bar-graph) — Horizontal bar series
- [ColumnGraph](/docs/charts/column-graph) — Vertical column series
- [ScatterGraph](/docs/charts/scatter-graph) — Scatter plots

### Individual Elements

- [Column](/docs/charts/column) — Single column in column charts (use when columns differ)
- [Bar](/docs/charts/bar) — Single bar in bar charts (use when bars differ)
- [Marker](/docs/charts/marker) — Point markers for scatter charts, supports dragging
- [MarkerLine](/docs/charts/marker-line) — Highlight specific values (e.g., min/max)
- [Range](/docs/charts/range) — Draw rectangular areas (zones)

### SVG Elements

- [Rectangle](/docs/charts/rectangle) — Draw rectangles
- [Line](/docs/charts/line) — Draw lines

## Configuration

| Property | Type | Description |
|----------|------|-------------|
| `axes` | `object` | Axis definitions. Each key represents an axis name, each value holds axis configuration. |
| `margin` | `string` | Space reserved for axis labels in `"top right bottom left"` format. |
| `offset` | `string` | Alternative to margin using top-to-bottom, left-to-right direction. Use negative values for right/bottom. |
| `axesOnTop` | `boolean` | Set to `true` to render axes on top of the data series. |