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