Download Core

Line with missing data

Sensor readings with gaps (null) that break the line.

Chart type
Line line
Tier
Free Core
Collection
Line
Render
Live, site theme
View .md Agent setup
LIVE/line/line-with-missing-data9 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",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Sensor A",
      data: [21.9, 21.8, 21.5, 21.6, 21.7, null, null, null, 21.5, 21, 20.5, 20.5, 20.8, 20.5, 20.8, 21.3, 20.7, 21.1, null, null, 23.4, 22.3, 21.9, 20.9, 21.2, 20.1, 19.8, 21.2, 20.4, 19.6]
    },
    {
      name: "Sensor B",
      data: [17.5, 17.8, 16.8, 16.4, 17.1, 17.1, 18.6, 18.6, 18.8, 19.8, 19.1, 17.8, null, null, null, null, 19.3, 18, 18, 17.9, 18.4, 19.9, 19.9, 20.3, 20.5, 20.6, 21.1, 21.4, 21.2, 20]
    }
  ],
  xaxis: {
    categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"]
  },
  stroke: {
    width: 2
  },
  markers: {
    size: 3,
    hover: {
      sizeOffset: 3
    }
  },
  title: {
    text: "Room temperature, gaps where sensors were offline"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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