jQuery Sparklines

Installation

Creating a Chart

simple-sparkline/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/master.css">
</head>
<body>
  <div id="sparklinedash">
    <span class="bar"></span>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

simple-sparkline/js/main.js:

const data = [0, 5, 6, 10, 9, 12, 4, 9]
const config = {
  type: 'bar',
  height: '50',
  barWidth: '10',
  resize: true,
  barSpacing: '5',
  barColor: '#7ace4c'
}
$('#sparklinedash').sparkline(data, config)

simple-sparkline/css/master.css:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Output: