JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.js"></script>
<!-- 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

g = new Dygraph(
    document.getElementById("graph"),
    // For possible data formats, see http://dygraphs.com/data.html
    // The x-values could also be dates, e.g. "2012/03/15"
    `X,Y,Z
    2012/01/10,0,3
    2012/02/10,2,6
    2012/03/10,4,8
    2012/04/10,6,9
    2012/05/10,8,9
    2012/06/10,10,8
    2012/07/10,12,6
    2012/08/10,14,3
    2012/09/10,23,7
    2012/10/10,18,8
    2012/11/10,17,4
    2012/12/18,14,7
`,
    {
      // options go here. See http://dygraphs.com/options.html
      legend: 'always',
      animatedZooms: true,
      title: 'Monthly ticks',
      axes: {
      	x: {
        	ticker: function(min, max, pixels, opts) {
          	return Dygraph.getDateAxis(min, max, Dygraph.Granularity.MONTHLY, opts, this);
          },
          axisLabelFormatter: function(d){
               var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
               return monthNames[d.getMonth()];
               }
        }
      }
    });