JSFiddle - React, Tailwind, and code Playground

by endogu

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

JavaScript

var barChartHorizontal1 = new dChart.BarChartHorizontal({
    elem: 'barChartHorizontal1',
    width: 700,
    height: 400,
    marginTop:20,
    marginRight:20,
    axis: {
        x: {
            range: [0,10],
            ticks:20,
            format: "0.1f",
            gridStyle: {
                stroke: "lightgrey",
                strokeOpacity: 0.5
            },
            align:"top"
        },
        y: {
            range: [10,0],
            ticks: 9,
            format:"f"
        }
    },
    transition: {
        duration: 250,
        delay: 150
    },
    dataSets: [
        {
            label: "Dataset 1",
            areaStyle: {
                stroke: "darkgoldenrod",
                fill: "darkgoldenrod",
                fillOpacity: 0.7
            },
            data: [
                {x:1, y:1},
                {x:4, y:2},
                {x:6, y:3},
                {x:7.5, y:4},
                {x:8, y:5},
                {x:8.5, y:6},
                {x:9, y:7},
                {x:9.5, y:8},
                {x:10, y:9}
            ]
        },

        {
            label: "Dataset 2",
            areaStyle: {
                stroke: "chocolate",
                fill: "chocolate",
                fillOpacity: 0.7
            },
            data: [
                {x:10, y:1},
                {x:9.5, y:2},
                {x:9, y:3},
                {x:8.5, y:4},
                {x:8, y:5},
                {x:7.5, y:6},
                {x:6, y:7},
                {x:4, y:8},
                {x:1, y:9}
            ]
        },

{
            label: "Dataset 3",
            areaStyle: {
                stroke: "chocolate",
                fill: "green",
                fillOpacity: 0.7
            },
            data: [
                {x:10, y:1},
                {x:9.5, y:2},
                {x:9, y:3},
                {x:8.5, y:4},
                {x:8, y:5},
                {x:7.5, y:6},
                {x:6, y:7},
             ...