Basic line

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

let utilization = [],
  getUtilization = function() {
    for (let i = 0; i < 90; i++) {
      utilization.push(Math.ceil(Math.random() * 100));
    }
    return utilization
  }()

Highcharts.chart('container', {
  chart: {
    marginTop: 80
  },
  legend: {
    enabled: false
  },
  title: {
    text: 'CPU utilization during time.'
  },
  xAxis: {
    title: {
      text: 'Time'
    },
    type: 'datetime'
  },
  yAxis: {
    labels: {
      format: '{value}%'
    },
    max: 100,
    title: {
      text: 'Utilization'
    }
  },
  series: [{
    data: utilization,
    name: 'CPU utilization',
    pointInterval: 10 * 60 * 1000, // ten minutes
    zones: [{
      value: 25,
      color: 'blue'
    }, {
      value: 75,
      color: 'green'
    }, {
      value: 100,
      color: 'red'
    }]
  }],
});