JSFiddle - React, Tailwind, and code Playground

by chaosmail

HTML

<script src="https://rawgithub.com/mbostock/d3/v3.2.8/d3.min.js"></script>
<script src="https://rawgithub.com/chaosmail/dchart/master/dist/dchart.min.js"></script>

<div id="areaChart1">

JavaScript

var areaChart1 = new dChart.AreaChart({
        elem: 'areaChart1',
        width: 700,
        height: 400,
        label: "Area Chart",
        axis: {
            x: {
                label: "x-Axis"
            },
            y: {
                label: "y-Axis",
                range:[0,1.5],
                gridStyle: {
                    stroke: "black",
                    strokeOpacity: 0.25
                }
            }
        },
        transition: {
            duration: 1500,
            delay: 250
        },
        dataSets:[
            {
                label: "Dataset: Function",
                areaStyle: {
                    stroke: "steelblue",
                    strokeWidth: 2,
                    fill: "steelblue",
                    fillOpacity: 0.4
                },
                interpolate:'cardinal',
                dataFn: {
                    fn: function() { return Math.random() },
                    min: 0,
                    max: 5,
                    step: 0.25
                }
            }
        ]
    });