JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://kbychkov.github.io/dailychart/dist/dailychart.min.js"></script>
<div class="row">
      <div class="fig">
        <div class="chart" id="chart-default" data-dailychart-values="1292.2,1292.0,1292.1,1291.8,1291.8,1292.1,1291.9,1291.6,1291.7,1291.7,1291.6,1291.8,1291.6,1291.7,1292.0,1291.6,1291.4,1291.2,1290.5,1290.5,1290.6,1290.5,1290.4,1289.8,1289.5,1290.0,1289.6,1289.7,1289.1,1288.8,1289,1289.2,1289.4,1289.7,1289.7,1289.6,1289.2,1290.1,1290.3,1290.5,1290.7,1292.3,1292.5,1291.7,1292.1,1292.1,1292.6,1292.7,1292.8,1292.7,1292.2,1291.7,1292.1,1292.1,1291.7,1291.2,1291.7,1291.9,1291.6,1292.1,1292.5,1293.6,1293.3,1293.8,1293.9,1293.5,1293.7,1293.6,1294.1,1295.0,1296.9,1297.0,1296.3,1296.5,1296.6,1296.6,1296.1,1296.4,1296.1,1296.5,1296.7,1296.0,1296.1,1296.7,1296.1,1294.9,1296.2,1296.0,1296.1,1295.9,1295.7,1296.0,1296.4" data-dailychart-close="1292.0" data-dailychart-length="93"></div>
        
      </div>
    </div>

CSS

html {
      font-family: 'Open Sans', sans-serif;
    }
    body {
      margin: 40px;
    }
    h1 {
      font-size: 2rem;
      font-weight: 600;
    }
    h2 {
      margin-top: 2em;
      margin-bottom: 1em;
      font-size: 1.5rem;
      font-weight: 400;
    }
    .page {
      max-width: 960px;
      margin: 0 auto;
    }
    .head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin: 2rem 0;
    }
    .head-title {
      margin: 0;
    }
    .row {
      display: flex;
      flex-wrap: wrap;
      margin: 2em -20px;
    }
    .fig {
      box-sizing: border-box;
      width: 250px;
      padding: 20px;
    }
    .fig-title {
      margin-top: 1em;
      font-size: 14px;
      font-style: italic;
    }
    .chart {
      height: 50px;
      background: #fff;
    }
    @media (max-width: 399px) {
      .head {
        display: block;
      }
      .head-social {
        margin-top: 1rem;
      }
    }

JavaScript

new Dailychart(document.getElementById('chart-default'));

    new Dailychart(document.getElementById('chart-line'), {
      lineWidth: 2
    });

    new Dailychart(document.getElementById('chart-color'), {
      lineWidth: 2,
      colorPositive: '#3d3d3d',
      colorNegative: '#3d3d3d'
    });

    new Dailychart(document.getElementById('chart-close'), {
      lineWidth: 2,
      colorPositive: '#3d3d3d',
      colorNegative: '#3d3d3d',
      closeColor: ''
    });

    new Dailychart(document.getElementById('chart-fill'), {
      fillPositive: '#d6efda',
      fillNegative: '#fbdddd',
      closeColor: ''
    });

    new Dailychart(document.getElementById('chart-intraday'), {
      fillPositive: '#d6efda',
      fillNegative: '#fbdddd'
    });