# LineGraph

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



Line charts are commonly used for data trends visualization. The `LineGraph` widget renders a series of data points connected by line segments, with optional area fill, smoothing, and stacking capabilities.

```tsx
import { createModel } from "cx/data";
import {
  bind,
  Controller,
  expr,
  LabelsTopLayout,
  LabelsTopLayoutCell,
} from "cx/ui";
import { Slider, Switch } from "cx/widgets";
import { Svg } from "cx/svg";
import { Chart, Gridlines, Legend, LineGraph, NumericAxis } from "cx/charts";

interface DataPoint {
  x: number;
  y: number | null;
  y2: number;
  y2l: number;
  y2h: number;
}

interface Model {
  points: DataPoint[];
  pointsCount: number;
  showArea: boolean;
  showLine: boolean;
  smooth: boolean;
  smoothingRatio: number;
  line1: boolean;
  line2: boolean;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.init(m.pointsCount, 50);
    this.store.init(m.showArea, true);
    this.store.init(m.showLine, true);
    this.store.init(m.smooth, true);
    this.store.init(m.smoothingRatio, 0.07);

    this.addTrigger(
      "on-count-change",
      [m.pointsCount],
      (cnt) => {
        let y1 = 250,
          y2 = 350;
        this.store.set(
          m.points,
          Array.from({ length: cnt }, (_, i) => ({
            x: i * 4,
            y: i % 20 === 3 ? null : (y1 = y1 + (Math.random() - 0.5) * 30),
            y2: (y2 = y2 + (Math.random() - 0.5) * 30),
            y2l: y2 - 50,
            y2h: y2 + 50,
          })),
        );
      },
      true,
    );
  }
}

export default (
  <div controller={PageController}>
    <Legend />
    <Svg style="width: 100%; height: 300px;">
      <Chart
        offset="20 -10 -40 40"
        axes={{
          x: { type: NumericAxis, lineStyle: "stroke: transparent" },
          y: { type: NumericAxis, vertical: true },
        }}
      >
        <Gridlines />
        <LineGraph
          name="Series 2"
          data={m.points}
          colorIndex={8}
          yField="y2h"
          y0Field="y2l"
          active={bind(m.line2, true)}
          line={false}
          area={m.showArea}
          smooth={m.smooth}
          smoothingRatio={m.smoothingRatio}
        />
        <LineGraph
          name="Series 1"
          data={m.points}
          colorIndex={0}
          area={m.showArea}
          active={bind(m.line1, true)}
          smooth={m.smooth}
          smoothingRatio={m.smoothingRatio}
          line={m.showLine}
        />
        <LineGraph
          name="Series 2"
          data={m.points}
          colorIndex={8}
          yField="y2"
          active={bind(m.line2, true)}
          smooth={m.smooth}
          smoothingRatio={m.smoothingRatio}
          line={m.showLine}
        />
      </Chart>
    </Svg>

    <LabelsTopLayout columns={4} mod="stretch">
      <LabelsTopLayoutCell colSpan={2}>
        <Slider
          label="Data points count"
          maxValue={200}
          minValue={5}
          step={1}
          value={bind(m.pointsCount, 50)}
          help={expr(m.pointsCount, (v) => `${v} points`)}
        />
      </LabelsTopLayoutCell>
      <Switch label="Area" value={m.showArea} />
      <Switch label="Line" value={m.showLine} />

      <Switch label="Smooth" value={m.smooth} style="margin-right: 20px" />
      <Slider
        label="Smoothing ratio"
        enabled={m.smooth}
        value={bind(m.smoothingRatio, 0.07)}
        maxValue={0.4}
        minValue={0}
        step={0.01}
        help={expr(m.smoothingRatio, (v) => v?.toFixed(2) ?? "")}
      />
    </LabelsTopLayout>
  </div>
);

```

The example above demonstrates multiple line series with area fill, smooth curves, and a range band (using `y0Field` and `yField` to define upper and lower bounds). Use the controls to adjust the number of data points, toggle area/line visibility, and modify the smoothing effect.

## Configuration

### Data Properties

| Property  | Type            | Default | Description                                                                                                                     |
| --------- | --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `data`    | `array`         |         | Data for the graph. Each entry should be an object with at least two properties whose names should match `xField` and `yField` |
| `xField`  | `string`        | `"x"`   | Name of the property which holds the x value                                                                                    |
| `yField`  | `string`        | `"y"`   | Name of the property which holds the y value                                                                                    |
| `y0Field` | `string/false`  | `false` | Name of the property which holds the y0 (base) value. Used for range/band charts                                               |
| `y0`      | `number`        | `0`     | Base value used for area charts when `y0Field` is not specified                                                                 |

### Appearance

| Property         | Type            | Default | Description                                                                              |
| ---------------- | --------------- | ------- | ---------------------------------------------------------------------------------------- |
| `colorIndex`     | `number`        |         | Index of a color from the standard palette (0-15)                                        |
| `colorMap`       | `string`        |         | Used to automatically assign a color based on `name` and the contextual `ColorMap` widget |
| `colorName`      | `string`        |         | Name used to resolve the color. If not provided, `name` is used instead                  |
| `line`           | `boolean`       | `true`  | Show the line connecting data points. Set to `false` to hide                             |
| `lineStyle`      | `string/object` |         | Additional styles applied to the line element                                            |
| `area`           | `boolean`       | `false` | Fill the area under the line                                                             |
| `areaStyle`      | `string/object` |         | Additional styles applied to the area element                                            |
| `hiddenBase`     | `boolean`       | `false` | If `true`, clips the base of the graph to show only the value range                      |

### Smoothing

| Property         | Type      | Default | Description                                                                                    |
| ---------------- | --------- | ------- | ---------------------------------------------------------------------------------------------- |
| `smooth`         | `boolean` | `false` | Set to `true` to draw smoothed lines using cubic Bézier curves                                 |
| `smoothingRatio` | `number`  | `0.05`  | Controls the intensity of smoothing (0 to 0.4). Higher values create more curved lines         |

### Stacking

| Property  | Type      | Default   | Description                                                                        |
| --------- | --------- | --------- | ---------------------------------------------------------------------------------- |
| `stacked` | `boolean` | `false`   | Stack values on top of other series sharing the same stack                         |
| `stack`   | `string`  | `"stack"` | Name of the stack. Use different names for multiple independent stacks             |

### Axes

| Property | Type     | Default | Description                         |
| -------- | -------- | ------- | ----------------------------------- |
| `xAxis`  | `string` | `"x"`   | Name of the horizontal axis to use  |
| `yAxis`  | `string` | `"y"`   | Name of the vertical axis to use    |

### Legend

| Property       | Type           | Default    | Description                                                                   |
| -------------- | -------------- | ---------- | ----------------------------------------------------------------------------- |
| `name`         | `string`       |            | Name of the series as it will appear in the legend                            |
| `active`       | `boolean`      | `true`     | Indicates if the series is active. Inactive series are shown only in legend   |
| `legend`       | `string/false` | `"legend"` | Name of the legend to use. Set to `false` to hide from legend                 |
| `legendAction` | `string`       | `"auto"`   | Action to perform on legend item click                                        |
| `legendShape`  | `string`       | `"rect"`   | Shape to display in the legend entry                                          |