# Realtime (Line example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/line/realtime/ · Index for agents: https://westcoast-charts.com/llms.txt

A line that appends a point every second and slides.

- Chart type: `line` (Line)
- Collection: Line · Line
- Raw configuration: https://westcoast-charts.com/gallery-src/line/realtime.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/line/realtime.html

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
```

## Options

```js
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "line",
    animations: {
      enabled: true,
      easing: "linear",
      dynamicAnimation: {
        speed: 900
      }
    },
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "CPU %",
      data: [
        [1767571201000, 45.88526766163132],
        [1767571202000, 49.21870465894445],
        [1767571203000, 50.42753135613502],
        [1767571204000, 56.48797627116417],
        [1767571205000, 54.86966628987896],
        [1767571206000, 55.66526265002502],
        [1767571207000, 57.751422360529],
        [1767571208000, 51.464590659154254],
        [1767571209000, 48.30056052893074],
        [1767571210000, 51.405211155290814],
        [1767571211000, 55.16820211084658],
        [1767571212000, 57.922622372968455],
        [1767571213000, 53.3762716197672],
        [1767571214000, 56.46473185169229],
        [1767571215000, 59.07734134356244],
        [1767571216000, 61.44423228672916],
        [1767571217000, 60.008904345710704],
        [1767571218000, 68.09374108730209],
        [1767571219000, 71.25968498724752],
        [1767571220000, 71.7546405465828],
        [1767571221000, 67.26325156723229],
        [1767571222000, 68.27074495417753],
        [1767571223000, 64.68862426868846],
        [1767571224000, 69.34330439141632],
        [1767571225000, 60.7381141868099],
        [1767571226000, 60.77448437636397],
        [1767571227000, 53.356803786813856],
        [1767571228000, 54.25668771372547],
        [1767571229000, 57.2950600300195],
        [1767571230000, 56.62619021225344]
      ]
    }
  ],
  xaxis: {
    type: "datetime",
    range: 29000
  },
  yaxis: {
    min: 0,
    max: 100
  },
  stroke: {
    curve: "smooth",
    width: 2
  },
  markers: {
    size: 0
  },
  title: {
    text: "CPU load, live"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export line-realtime.json --out line-realtime.svg --with-table` (save the options above as JSON first)