JSFiddle - React, Tailwind, and code Playground

HTML

<!-- You may set style: "width: ...; height: ..." to size the chart -->
<div id="graph"></div>

CSS

/*
Relevant CSS classes include:

Labels on the X & Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2

Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label

The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/
.dygraph-title {
    color: gray;
}

JavaScript

function barChartPlotter(e) {
  var ctx = e.drawingContext;
  var points = e.points;
  var y_bottom = e.dygraph.toDomYCoord(0);  // see <a href="http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord">jsdoc</a>

  // This should really be based on the minimum gap
  var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx);
  ctx.fillStyle = e.color;  // a lighter shade might be more aesthetically pleasing

  // Do the actual plotting.
  for (var i = 0; i < points.length; i++) {
    var p = points[i];
    var center_x = p.canvasx;  // center of the bar

    ctx.fillRect(center_x - bar_width / 2, p.canvasy, bar_width, y_bottom - p.canvasy);
    ctx.strokeRect(center_x - bar_width / 2, p.canvasy, bar_width, y_bottom - p.canvasy);
  }
}

g = new Dygraph(document.getElementById("graph"),
                 "X,Late Arrivals,Cumulative\n" +
                 "1,10,10\n" +
                 "2,7,17\n" +
                 "3,6,23\n" +
                 "4,4,27\n" +
                 "5,3,30\n" +
                 "6,2,32\n" +
                 "7,1,33\n",
                 {
                     // options go here. See http://dygraphs.com/options.html
                     legend: 'always',
                     animatedZooms: true,
                     dateWindow: [0, 8],
                     "Late Arrivals": {
                         plotter: barChartPlotter
                     },
                     title: 'Pareto-like chart'
                 });