JSFiddle - React, Tailwind, and code Playground

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="lineChart1">

JavaScript

var lineChart1 = new dChart.BarChart({
    elem: 'lineChart1',
    width: 700,
    height: 400,
    label: "My awesome Chart",
    description: "This awesome chart lib is using D3.js",
    axis: {
        x: {
        		range: [0,5],
            label: "x-Axis",
            align: "bottom",
            labelAlign: "right"
        },
        y: {
        		range: [0,1],
            label: "y-Axis",
            align: "left",
            labelAlign: "top",
            gridStyle: {
                stroke: "black",
                strokeOpacity: 0.25
            }
        }
    },
    transition: {
        duration: 200,
        delay: 100
    },
    dataSets:[
        {
            label: "Dataset 1",
            areaStyle: {
                		stroke: "gray",
                    fill: "mistyrose",
                    fillOpacity: 0.9
            },
            symbolStyle: {
                stroke: "mediumslateblue",
                strokeWidth: 2,
                fill: "#fff",
                size: 1.2
            },
            interpolate: "linear",
            data: [
                {x:0,y:0},
                {x:1,y:0.5},
                {x:2,y:0.7},
                {x:3,y:0.85},
                {x:4,y:0.9},
                {x:5,y:0.92}
            ]
        },
        {
            label: "Dataset 2: Function",
            areaStyle: {
                stroke: "darkgoldenrod",
                fill: "darkgoldenrod",
                fillOpacity: 0.7
            },
            interpolate:'cardinal',
            dataFn: {
                fn: function() { return Math.random() },
                min: 0,
                max: 5,
                step: 0.25
            }
        }
    ]
});