JSFiddle - React, Tailwind, and code Playground

by Daniel Ha

HTML

<div style='font: 12px sans-serif;'>
    <div class="dc-data-count" style="float: left;">
         <h2 style="color:#F00">Legend with (%)
            <span style="color:#000">
            &nbsp;&nbsp;&nbsp;
            <span class="filter-count"></span>
            out of 
            <span class="total-count"></span>
            | 
            <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
                <br> Use the Date Zoom to select some time frame.
            </span>
             
        </h2>

    </div>
</div>
<div id="loadInfo_div" align="center"></div>
<table width="95%" border="0" align="center">
    <tr>
        <td id="dateZoom_div">
            <div>
                 <h4>
            Date Zoom:
            <span>
                <a class="reset"
                href="javascript:dateZoom_chart.filterAll(); dc.redrawAll(); debug('reset zoomDate');"
                style="display: none;">
                reset
                 </a>
             </span>
            </h4>

            </div>
        </td>
    </tr>
</table>
<table width="95%" border="0" align="center">
    <tr>
        <td id="alarmLevels_div" width="200" rowspan="2">
            <div>
                 <h4>
         .legend() - see line1018
            <span>
                <a class="reset"
                href="javascript:alarmLevels_chart.filterAll(); dc.redrawAll();"
                style="display: none;">
                reset
                </a>
            </span>
            </h4>

            </div>
        </td>
        <td width="20" rowspan="2"></td>
        <td id="alarmLevels_div2" width="200" rowspan="2">
            <div>
                 <h4>
            .legend2()  - see line1030
            <span>
                <a class="reset"
                href="javascript:alarmSubsystems_chart.filterAll(); dc.redrawAll();"
                style="display: none;">
                reset
                </a>
            </span>
            </h4>

           ...

CSS

div.dc-chart {
    float: left;
}
.dc-chart rect.bar {
    stroke: none;
    cursor: pointer;
}
.dc-chart rect.bar:hover {
    fill-opacity: .5;
}
.dc-chart rect.stack1 {
    stroke: none;
    fill: red;
}
.dc-chart rect.stack2 {
    stroke: none;
    fill: green;
}
.dc-chart rect.deselected {
    stroke: none;
    fill: #ccc;
}
.dc-chart .empty-chart .pie-slice path {
    fill: #FFEEEE;
    cursor: default;
}
.dc-chart .empty-chart .pie-slice {
    cursor: default;
}
.dc-chart .pie-slice {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}
.dc-chart .pie-slice.external {
    fill: black;
}
.dc-chart .pie-slice :hover {
    fill-opacity: .8;
}
.dc-chart .pie-slice.highlight {
    fill-opacity: .8;
}
.dc-chart .selected path {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}
.dc-chart .deselected path {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}
.dc-chart .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.dc-chart .axis text {
    font: 10px sans-serif;
}
.dc-chart .grid-line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}
.dc-chart .grid-line line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}
.dc-chart .brush rect.background {
    z-index: -999;
}
.dc-chart .brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
}
.dc-chart .brush .resize path {
    fill: #eee;
    stroke: #666;
}
.dc-chart path.line {
    fill: none;
    stroke-width: 1.5px;
}
.dc-chart circle.dot {
    stroke: none;
}
.dc-chart g.dc-tooltip path {
    fill: none;
    stroke: grey;
    stroke-opacity: .8;
}
.dc-chart path.area {
    fill-opacity: .3;
    stroke: none;
}
.dc-chart .node {
    font-size: 0.7em;
    cursor: pointer;
}
.dc-chart .node :hover {
    fill-opacity: .8;
}
.dc-chart .selected circle {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}
.dc-chart .deselected circle {
    stroke: none;
   ...

JavaScript

// start MOFIFIED LEGEND.JS from dc.js-2.0.0-beta.5\src //
//
/**
## Legend
Legend is a attachable widget that can be added to other dc charts to render horizontal legend
labels.

```js
chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
```

Examples:
* [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
* [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)

**/
dc.legend2 = function () {
    var LABEL_GAP = 2;

    var _legend = {},
        _parent,
        _x = 0,
        _y = 0,
        _itemHeight = 12,
        _gap = 5,
        _horizontal = false,
        _legendWidth = 560,
        _itemWidth = 70,
        _autoItemWidth = false,
		_showPercent = false,
		_percentDecimals = 1;

    var _g;

    _legend.parent = function (p) {
        if (!arguments.length) {
            return _parent;
        }
        _parent = p;
        return _legend;
    };

    _legend.render = function () {
        _parent.svg().select('g.dc-legend').remove();
        _g = _parent.svg().append('g')
            .attr('class', 'dc-legend')
            .attr('transform', 'translate(' + _x + ',' + _y + ')');
        var legendables = _parent.legendables();

        var itemEnter = _g.selectAll('g.dc-legend-item')
            .data(legendables)
            .enter()
            .append('g')
            .attr('class', 'dc-legend-item')
            .on('mouseover', function (d) {
                _parent.legendHighlight(d);
            })
            .on('mouseout', function (d) {
                _parent.legendReset(d);
            })
            .on('click', function (d) {
                d.chart.legendToggle(d);
            });

        _g.selectAll('g.dc-legend-item')
            .classed('fadeout', function (d) {
                return d.chart.isLegendableHidden(d);
            });

        if (legendables.some(dc.pluck('dashstyle'))) {
            itemEnter
                .append('line')
                .attr('x1', 0)
                .attr('y1',...