Horizon charts address the challenge of visualizing dense time-series data in limited vertical space. By dividing the value range into equal bands and layering them with increasing opacity or contrasting colors, they compress what would otherwise require multiple chart heights into a single compact row. They are ideal for monitoring dashboards, anomaly detection, and multi-series time-series comparison.

Subtype

▾

Live Preview

hour	cpu
00:00	12
01:00	8
02:00	6
03:00	5
04:00	7
05:00	11
06:00	28
07:00	52
08:00	78
09:00	85

{
  "title": {
    "text": "CPU Utilization — 24-Hour Horizon"
  },
  "data": [
    {
      "hour": "00:00",
      "cpu": 12
    },
    {
      "hour": "01:00",
      "cpu": 8
    },
    {
      "hour": "02:00",
      "cpu": 6
    },
    {
      "hour": "03:00",
      "cpu": 5
    },
    {
      "hour": "04:00",
      "cpu": 7
    },
    {
      "hour": "05:00",
      "cpu": 11
    },
    {
      "hour": "06:00",
      "cpu": 28
    },
    {
      "hour": "07:00",
      "cpu": 52
    },
    {
      "hour": "08:00",
      "cpu": 78
    },
    {
      "hour": "09:00",
      "cpu": 85
    },
    {
      "hour": "10:00",
      "cpu": 82
    },
    {
      "hour": "11:00",
      "cpu": 88
    },
    {
      "hour": "12:00",
      "cpu": 91
    },
    {
      "hour": "13:00",
      "cpu": 86
    },
    {
      "hour": "14:00",
      "cpu": 89
    },
    {
      "hour": "15:00",
      "cpu": 84
    },
    {
      "hour": "16:00",
      "cpu": 76
    },
    {
      "hour": "17:00",
      "cpu": 65
    },
    {
      "hour": "18:00",
      "cpu": 48
    },
    {
      "hour": "19:00",
      "cpu": 38
    },
    {
      "hour": "20:00",
      "cpu": 30
    },
    {
      "hour": "21:00",
      "cpu": 24
    },
    {
      "hour": "22:00",
      "cpu": 18
    },
    {
      "hour": "23:00",
      "cpu": 14
    }
  ],
  "series": [
    {
      "type": "horizon",
      "xKey": "hour",
      "yKey": "cpu",
      "bands": 4,
      "fill": "#6366f1"
    }
  ],
  "axes": [
    {
      "position": "bottom",
      "title": {
        "text": "Hour"
      }
    },
    {
      "position": "left",
      "title": {
        "text": "CPU (%)"
      }
    }
  ]
}

Edit JSON above · auto-previews after 0.9 s

CPU utilization over a 24-hour period compressed into layers. High-value spikes fold back down, fitting more data into less vertical space.

PreviousWord Clouds Next Bump Charts

Was this article helpful?