JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgithub.com/palantir/plottable/v0.52.0/plottable.js"></script>
<script src="http://rawgithub.com/palantir/plottable/v0.52.0/quicktests/exampleUtil.js"></script>
<div class="demo-title">Click to select / deselect</div>
<svg id="chart" width="400" height="300"></svg>

CSS

</style> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/palantir/plottable/v0.52.0/plottable.css"> <style type="text/css">
/*-- Add custom styles after this line --*/
body { background-color: #AAA; }
svg { background-color: #FFF; }
.selected {
    fill: red;
}

JavaScript

window.onload = function() {
    var xScale = new Plottable.Scale.Category();
    var xAxis = new Plottable.Axis.Category(xScale, "bottom");
    var yScale = new Plottable.Scale.Linear();
    var yAxis = new Plottable.Axis.Numeric(yScale, "left");
    var plot = new Plottable.Plot.Bar(xScale, yScale);
    plot.addDataset(data);
    plot.project("x", "name", xScale);
    plot.project("y", "value", yScale);
    
    var chart = new Plottable.Component.Table([
        [yAxis, plot ],
        [null,  xAxis]
    ]);
    chart.renderTo("#chart");
    
    var clickInteraction = new Plottable.Interaction.Click();
    clickInteraction.onClick(function(point) {
        var clickedBars = plot.getBars(point.x, point.y);
        clickedBars.classed("selected", !clickedBars.classed("selected"));
    });
    plot.registerInteraction(clickInteraction);
}
    
var data = [
    { name: "A", value: 3 },
    { name: "B", value: 8 },
    { name: "C", value: 5 },
];