Download Core

Realtime

A line that appends a point every second and slides.

Chart type
Line line
Tier
Free Core
Collection
Line
Render
Live, site theme
View .md Agent setup
LIVE/line/realtime11 of 14 in Line

Open the chart without page chrome ↗

Configuration

Raw Standalone 
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)
chart.render()