Must Read: Easy Interface Javascript Chart Library Based on D3.js | billboard.js

How to make use of it:

1. Download and import the μPlot library.

<link rel="stylesheet" href="uPlot.css">
<script src="uPlot.iife.min.js"></script>

2. Prepare the time collection data.

const data = [

      // x-values (Unix timestamps)
      [1566458800, 1566452560, 1566460860, 1538464460], 

      // data series 1  
      [0.54, 0.15, 3.27, 7.51],

      // data series 2
      [12.85, 13.21, 13.65, 14.01],

      // data series 3
      [0.52, 1.25, 0.75, 3.62]

];

3. The instance JS to initialize the μPlot Library.

let myChart = new uPlot({

    // width/height in pixels
    width: 960,
    height: 400,

    // chart title
    title: "My Chart",

    // unique chart ID
    id: "chart1",

    // additional CSS class(es)
    class: "my-chart",

    // determines how to present your data
    series: [
      {},
      {
        // initial toggled state (optional)
        show: true,
        spanGaps: false,
        // in-legend display
        label: "RAM",
        value: (self, rawValue) => "$" + rawValue.toFixed(2),
        // series style
        stroke: "red",
        width: 1,
        fill: "rgba(255, 0, 0, 0.3)",
        dash: [10, 5],
      }
    ],

    // customize the x, y axis
    axes: {
      y: [
        {
          scale: '%',
          values: (vals, space) => vals.map(v => +v.toFixed(1) + "%"),
        },
        {
          side: 3,
          scale: 'mb',
          values: (vals, space) => vals.map(v => +v.toFixed(2) + "MB"),
          grid: null,
        },
      ],
    }
}, data, document.body);

4. Default x-axis options.

scale: 'x',
space: 40,
height: 30,
side: 0,
class: "x-time",
incrs: timeIncrs,
values: (vals, space) => {
  let incr = vals[1] - vals[0];

  let stamp = (
    incr >= d ? fmtDate('{M}/{D}') :
    // {M}/{DD}/{YY} should only be prepended at 12a?   // {YY} only at year boundaries?
    incr >= h ? fmtDate('{M}/{DD}\n{h}{aa}') :
    incr >= m ? fmtDate('{M}/{DD}\n{h}:{mm}{aa}') :
    fmtDate('{M}/{DD}\n{h}:{mm}:{ss}{aa}')
  );

  return vals.map(val => stamp(new Date(val * 1e3)));
},
grid: {
  color: "#eee",
  width: 2
}

5. Default y-axis options.

scale: 'y',
space: 30,
width: 50,
side: 1,
class: "y-vals",
incrs: numIncrs,
values: (vals, space) => vals,
grid: {
  color: "#eee",
  width: 2
}

6. Default options for the time series data on the x-axis.

label: "Time",
scale: "x",
value: v => stamp(new Date(v * 1e3))

7. Default options for the time series data on the y-axis.

shown: true,
label: "Value",
scale: "y",
value: v => v