JSFiddle - React, Tailwind, and code Playground

by Timothy Martin

HTML

<div id="chartContainer">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</div>

CSS

rect:hover {
    fill: orange;
}
.dimple-custom-axis-line {
    stroke: black !important;
    stroke-width: 1.1;
}
.dimple-custom-axis-label {
    font-family: Arial !important;
    font-size: 11px !important;
    font-weight: 550;
}
text.dimple-tooltip {
    font-family: Arial !important;
    font-size: 12px !important;
}

JavaScript

var data = [{
    "Month": "04-2014",
        "Metric": "Transfer",
        "Calls": 550000
}, {
    "Month": "04-2014",
        "Metric": "Hold",
        "Calls": 40000
}, {
    "Month": "04-2014",
        "Metric": "External",
        "Calls": 60000
}, {
    "Month": "05-2014",
        "Metric": "Transfer",
        "Calls": 280000
}, {
    "Month": "05-2014",
        "Metric": "Hold",
        "Calls": 59000
}, {
    "Month": "05-2014",
        "Metric": "External",
        "Calls": 70000
}, {
    "Month": "06-2014",
        "Metric": "Transfer",
        "Calls": 380000
}, {
    "Month": "06-2014",
        "Metric": "Hold",
        "Calls": 48000
}, {
    "Month": "06-2014",
        "Metric": "External",
        "Calls": 60000
}];

var svg = dimple.newSvg("#chartContainer", 590, 400);

var myChart = new dimple.chart(svg, data);
myChart.setBounds(80, 30, 510, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule(Date);
var y = myChart.addMeasureAxis("y", "Calls");
y.showGridlines = true;
y.tickFormat = ',6g';
y.overrideMin = 0;
y.overrideMax = 800000;
var s = myChart.addSeries("Metric", dimple.plot.bar);

s.afterDraw = function (shape, data) {
    var s = d3.select(shape),
        rect = {
            x: parseFloat(s.attr("x")),
            y: parseFloat(s.attr("y")),
            width: parseFloat(s.attr("width")),
            height: parseFloat(s.attr("height"))
        };
    if (rect.height >= 1) {
        svg.append("text")
            .attr("x", rect.x + rect.width / 2)
            .attr("y", rect.y + rect.height / 2 + 3.5)
            .style("text-anchor", "middle")
            .style("font-size", "9px")
            .style("font-family", "sans-serif")
            .style("opacity", 0.8)
            .text(d3.format(",.1f")(data.yValue / 1000) + "k");
    }
};

myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();