Linie mit fehlenden Daten

Sensormessungen mit Lücken (null), an denen die Linie unterbrochen wird.

Chart type
Line line
Tier
Kostenloser Core
Collection
Line
Zeichnen
Live im Website-Design
.md ansehen Agenten einrichten
LIVE/line/line-with-missing-data9 of 14 in Line

Configuration

Original 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()