Irregular time series

Three series sampled at different, uneven timestamps.

Chart type
Area area
Tier
Free Core
Collection
Area
Render
Live, site theme
View .md Agent setup
LIVE/area/timeseries-with-irregular-data8 of 8 in Area

Configuration

Raw Standalone
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "area",
    stacked: false,
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Probe A",
      data: [
        [1767830400000, 58],
        [1768435200000, 64],
        [1768521600000, 56],
        [1769126400000, 58],
        [1769212800000, 61],
        [1769299200000, 65],
        [1769472000000, 69],
        [1769817600000, 57],
        [1769990400000, 72],
        [1770076800000, 48],
        [1770854400000, 53],
        [1771113600000, 60],
        [1771718400000, 55],
        [1772496000000, 55],
        [1773187200000, 59],
        [1773964800000, 65],
        [1774310400000, 75],
        [1774828800000, 68],
        [1775433600000, 55],
        [1776211200000, 68],
        [1776988800000, 48],
        [1777334400000, 56],
        [1777939200000, 54],
        [1778544000000, 59],
        [1778889600000, 59],
        [1778976000000, 67],
        [1779148800000, 57],
        [1779580800000, 57]
      ]
    },
    {
      name: "Probe B",
      data: [
        [1768003200000, 49],
        [1768694400000, 42],
        [1768867200000, 45],
        [1769472000000, 42],
        [1770249600000, 45],
        [1770508800000, 50],
        [1770681600000, 42],
        [1771286400000, 41],
        [1771632000000, 46],
        [1771804800000, 42],
        [1771891200000, 48],
        [1772236800000, 45],
        [1772323200000, 45],
        [1772496000000, 54],
        [1773100800000, 45],
        [1773878400000, 48],
        [1774396800000, 42],
        [1774915200000, 45],
        [1775347200000, 46],
        [1775952000000, 40]
      ]
    },
    {
      name: "Probe C",
      data: [
        [1768348800000, 29],
        [1768867200000, 32],
        [1769558400000, 33],
        [1769731200000, 31],
        [1770249600000, 27],
        [1770422400000, 31],
        [1770940800000, 29],
        [1771632000000, 30],
        [1771718400000, 27],
        [1771891200000, 33],
        [1772582400000, 29],
        [1772841600000, 32],
        [1773100800000, 29],
        [1773446400000, 32],
        [1773532800000, 35],
        [1774224000000, 29],
        [1774310400000, 31],
        [1775001600000, 33],
        [1775606400000, 27],
        [1776038400000, 30],
        [1776470400000, 30],
        [1776816000000, 30],
        [1777248000000, 32],
        [1777766400000, 23],
        [1778112000000, 32],
        [1778803200000, 29],
        [1779235200000, 27],
        [1779926400000, 31],
        [1780617600000, 31],
        [1780963200000, 29],
        [1781049600000, 29],
        [1781308800000, 23],
        [1782000000000, 28],
        [1782432000000, 27],
        [1782950400000, 32]
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  dataLabels: {
    enabled: false
  },
  fill: {
    opacity: 0.25,
    type: "solid"
  },
  stroke: {
    width: 2
  },
  markers: {
    size: 2
  },
  title: {
    text: "Water quality readings (uneven intervals)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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