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;
}

.dygraph-legend {
  pointer-events: none;
  width: 100px;
  border: 1px solid #333;
  padding: 4px;
}

JavaScript

const div = document.getElementById("graph");
g = new Dygraph(
    div,
    // 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
    1,0,3
    2,2,6
    3,4,8
    4,6,9
    5,8,9
    6,10,8
    7,12,6
    8,14,3`,
    {
      // options go here. See http://dygraphs.com/options.html
      legend: 'always',
      animatedZooms: true,
      title: 'dygraphs chart template',
      legend: 'always',
    });

div.addEventListener('mouseenter', () => {
  g.updateOptions({legend: 'follow'});
});

div.addEventListener('mouseleave', () => {
  g.updateOptions({legend: 'always'});
  div.querySelector('.dygraph-legend').style.display='';
  g.plugins_[0].plugin.predraw({dygraph: g});
});