JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dygraphs.com/dygraph-dev.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"),
     "X,R,S,T\n" +
     "1,0,3,18\n" +
     "2,2,6,16\n" +
     "3,4,8,14\n" +
     "4,6,9,12\n" +
     "5,8,9,13\n" +
     "6,10,8,14\n" +
     "7,12,6,15\n" +
     "8,14,3,16\n",
     {
       drawPoints : true,
       pointSize : 5,
       legend : 'always',
       series : {
         T : {
           axis : 'y2',
           pointSize : 10
         },
         S : {
           axis : 'y2'
         }
       },
       axes : {
         'y2' : {
           drawPointCallback: Dygraph.Circles.PENTAGON
         }
       }
     });