JSFiddle - React, Tailwind, and code Playground

by Ari Zelanko

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"),
                 // For possible data formats, see http://dygraphs.com/data.html
                 // The x-values could also be dates, e.g. "2012/03/15"
                 "Month, Charge, Charge Percentile\n" +
                 "2012/03,900000,-0.9\n" +
                 "2012/04,100000,0.21\n" +
                 "2012/05,400000,.8\n" +
                 "2012/06,500000,.5\n" +
                 "2012/07,800000,.79\n" +
                 "2012/08,1000000,.96\n" +
                 "2012/09,98511,.09\n",
                 {
                     // options go here. See http://dygraphs.com/options.html
                     legend: 'always',
                     animatedZooms: true,
                     title: 'dygraphs chart template',
                     series: {
                         "Charge Percentile": {axis:"y2"}
                     },
                     axis: {y2: {drawAxis: true}}
                     
                 });