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: {
    dateTimeLabelFormats: {
      day: '%e. %b'
    },
    title: {
      text: 'Time'
    },
    type: 'datetime'
  },
  yAxis: {
    labels: {
      format: '{value}%'
    },
    max: 100,
    plotBands: [{
      color: 'rgba(0, 0, 255, 0.05)',
      from: 0,
      to: 25
    }, {
      color: 'rgba(0, 255, 0, 0.05)',
      from: 25,
      to: 75
    }, {
      color: 'rgba(250, 0, 0, 0.05)',
      from: 75,
      to: 100
    }],
    title: {
      text: 'Utilization'
    }
  },
  series: [{
    data: utilization,
    name: 'CPU utilization',
    pointInterval: 10 * 60 * 1000, // ten minutes
    color: {
      linearGradient: [0, 0, 0, 250],
      stops: [
        [0, 'red'],
        [0.7, 'green'],
        [1, 'blue']
      ]
    }
  }],
});