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

JavaScript

var barChart1 = new dChart.BarChart({
        elem: 'barChart1',
        width: 700,
        height: 400,
        axis: {
            x: {
                range: [0,11]
            },
            y: {
                range: [0,10],
                gridStyle: {
                    stroke: "lightgrey",
                    strokeOpacity: 0.5
                }
            }
        },
        transition: {
            duration: 250,
            delay: 150
        },
        dataSets: [
            {
                label: "Random Data",
                areaStyle: {
                    stroke: "mistyrose",
                    fill: "mistyrose",
                    fillOpacity: 0.7
                },
                dataFn: {
                    fn: function() { return Math.random()*10 },
                    min: 1,
                    max: 10,
                    step: 1
                }
            },
            {
                label: "Random Data",
                areaStyle: {
                    stroke: "moccasin",
                    fill: "moccasin",
                    fillOpacity: 0.7
                },
                dataFn: {
                    fn: function() { return Math.random()*10 },
                    min: 1,
                    max: 10,
                    step: 1
                }
            }
        ]
    });