JSFiddle - React, Tailwind, and code Playground

by Eduard Dyckman

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.css" rel="stylesheet">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.js"></script>

<div id="container" style="height: 400px"></div>
<div id="slider"></div>

CSS

#slider {
  width: 80%;
  margin: 30px auto;
}

JavaScript

function convertCpuPercentageToUnits(percentage) {
  // Assuming 100% CPU usage corresponds to 7 CPU units
  var maxCpuUnits = 7;
  return (percentage / 100) * maxCpuUnits;
}

function convertRamPercentageToUnits(percentage) {
  // Assuming 100% RAM usage corresponds to 28 CPU units
  var maxRamUnits = 28;
  return (percentage / 100) * 28;
}

var yourCpuDataArray = [
  25.11, 12, 34.33, 24.43, 21.32, 23.29, 22.53, 21.82, 21.8, 22.01, 21.94, 20.76, 22.02, 22.17, 24.1, 23.52, 20.33, 22.22, 24.89, 21.62, 24.29, 24.64, 20.4, 19.68, 20.19, 20.76, 21.97, 22.79, 21.32, 21.53, 22.33, 19.82, 21.91, 20.38, 21.48, 21.23, 22.88, 22.11, 24.16, 22.95, 22.67, 26.21, 22.84, 24.24, 22.22, 23.69, 24.23, 6.47,

];

var yourRamDataArray = [
  9.9, 9.16, 9.33, 12.43, 13.32, 13.29, 12.53, 11.82, 11.8, 12.01, 11.94, 11.76, 12.02, 12.17, 13.1, 13.52, 13.33, 13.22, 13.89, 13.62, 13.29, 13.64, 13.4, 13.68, 13.19, 13.76, 13.97, 11.79, 10.32, 10.53, 10.33, 10.82, 10.91, 10.38, 10.18, 10.23, 10.88, 9.11, 9.16, 9.95, 9.67, 9.21, 9.84, 8.24, 9.22, 11.69, 12.23, 12.47,

];

var convertedCpuData = yourCpuDataArray.map(function(dataPoint) {
  return [convertCpuPercentageToUnits(dataPoint)]
});

var convertedRamData = yourRamDataArray.map(function(dataPoint) {
  return [convertRamPercentageToUnits(dataPoint)]
});


var chart = Highcharts.chart('container', {
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  chart: {
    zoomType: 'xy',
  },


  title: {
    text: null
  },

  xAxis: {
    title: {
      text: 'Last 7 Days'
    },

    startOnTick: false,
    endOnTick: false,

    labels: {
      enabled: false,
    },
    tickWidth: 0,
  },


  yAxis: [{
      lineWidth: 0,
      tickPositions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],

      labels: {
        formatter: function() {
          return ['0', '1', '2', '4', '8', '12', '16', '20', '24', '28'][this.value];
        }
      },
      title: {
        text: 'RAM (GB)'
      },

    },
    {
      title: {
        text:...