# Charts Overview

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



Charts are an important part of CxJS, extending the SVG package. Rather than providing pre-built chart widgets for each type, CxJS focuses on low-level components that can be assembled into any chart. This gives developers full control over appearance and behavior.

- **Line, bar, and scatter charts** are defined inside a `Chart` widget
- **Pie charts** use the `PieChart` widget

## Basic Chart

The `Chart` widget defines axes and bounds for two-dimensional charts.

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

export default (
  <div>
    <Legend.Scope>
      <Svg style="height: 200px;">
        <Chart
          margin="10 20 30 50"
          axes={{
            x: { type: NumericAxis },
            y: { type: NumericAxis, vertical: true },
          }}
        >
          <Gridlines />
          <LineGraph
            name="Line 1"
            colorIndex={5}
            data={[
              { x: 0, y: 0 },
              { x: 100, y: 100 },
              { x: 200, y: 150 },
            ]}
          />
          <LineGraph
            name="Line 2"
            colorIndex={10}
            data={[
              { x: 0, y: 50 },
              { x: 100, y: 150 },
              { x: 200, y: 100 },
            ]}
          />
        </Chart>
      </Svg>
      <Legend class="mt-4" />
    </Legend.Scope>
  </div>
);

```

The most important part is **axis configuration**. Numeric, category, and time axis types are supported.

Charts consist of multiple child elements. In the example above:
- `Rectangle` provides a white background
- `Gridlines` adds grid lines
- `LineGraph` presents the data

Child elements inherit axis information from the chart and use it for positioning.

## Pie Charts

```tsx
import { createModel } from "cx/data";
import { bind, KeySelection, Repeater } from "cx/ui";
import { Svg } from "cx/svg";
import { ColorMap, Legend, PieChart, PieSlice } from "cx/charts";

interface SliceData {
  name: string;
  value: number;
}

interface Model {
  $record: SliceData;
  selected: string;
}

const m = createModel<Model>();

export default (
  <Legend.Scope>
    <Svg style="height: 200px">
      <ColorMap />
      <PieChart>
        <Repeater
          records={[
            { name: "A", value: 10 },
            { name: "B", value: 20 },
            { name: "C", value: 15 },
          ]}
          recordAlias={m.$record}
        >
          <PieSlice
            name={m.$record.name}
            value={m.$record.value}
            colorMap="pie"
            r={90}
            selection={{
              type: KeySelection,
              bind: m.selected,
              keyField: "name",
              record: m.$record,
            }}
          />
        </Repeater>
      </PieChart>
    </Svg>
    <Legend />
  </Legend.Scope>
);

```

The `Repeater` widget iterates over an array and maps it to chart elements. A selection model enables interaction with other widgets on the page.

## Legends

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

Legends are context-aware — all legend-aware widgets report information about themselves to populate the legend. Widgets can also report legend actions, making the legend a toggle or selection switch.

Key points:
- `Legend` is **not** SVG-based and should be placed **outside** the `Svg` widget
- `Legend.Scope` delimits legend scopes when using multiple charts
- Use unique legend names to separate multiple legends

## Color Palettes

CxJS includes a standard palette of 16 colors based on [Google Material Design](https://material.google.com/style/color.html). Colors support hover, selection, and disabled states.

```tsx
export default (
  <div style="position: relative; width: 240px; height: 240px; margin: 20px auto">
    {Array.from({ length: 16 }, (_, i) => {
      const angle = (i / 16) * 2 * Math.PI - Math.PI / 2;
      const radius = 100;
      const x = 120 + radius * Math.cos(angle) - 20;
      const y = 120 + radius * Math.sin(angle) - 20;
      return (
        <div
          style={`position: absolute; left: ${x}px; top: ${y}px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; text-shadow: 0 0 2px rgba(0,0,0,0.5)`}
          class={`cxs-color-${i}`}
          text={i}
        />
      );
    })}
  </div>
);

```

The `ColorMap` utility assigns different colors to chart elements with the same `colorMap` attribute, maximizing color distance between elements.

## Main Components

**Chart Types:**
- [LineGraph](/docs/charts/line-graph) — Line and area charts
- [BarGraph](/docs/charts/bar-graph) — Horizontal bar charts
- [ColumnGraph](/docs/charts/column-graph) — Vertical column charts
- [ScatterGraph](/docs/charts/scatter-graph) — Scatter plots
- [PieChart](/docs/charts/pie-chart) — Pie and donut charts

**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

**Utilities:**
- [Legend](/docs/charts/legend) — Chart legends
- [Gridlines](/docs/charts/gridlines) — Background grid
- [ColorMap](/docs/charts/color-map) — Automatic color assignment