JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart"></div>

CSS

.bars {
        //pointer-events: none;
    }
    .bar {
        fill: $graph-bar-color;
        @include border-radius(4px);
        @include transition-property(fill);
        @include transition-duration(.5s);
        &:hover {
            fill: $graph-highlight-color;
            cursor: pointer;
        }
    }
    .bar.sel {
        fill: $graph-highlight-color;
    }
    .bar.fade {
        fill: $graph-fade-color;
    }
    .bar.hover {
        fill: darken($graph-bar-color, 20%);
    }
    .sel.hover {
        fill: $graph-highlight-color;
    }
    .grid .tick line {
        fill: none;
        stroke: #EEE;
        shape-rendering: crispEdges;
    }

JavaScript

var data = {

    "sales": [
            [600, 1],
            [650, 2],
            [700, 3],
            [750, 2],
            [800, 1],
            [850, 2],
            [900, 3]
    ]
};

function miniColumnChart(){

    var barWidth = 20;
    var margin = {
        top: 64,
        right: 32,
        bottom: 64,
        left: 32,
        labels: 32
    };
    var height = 300; //overridden by width in call
    var width = 500; //overridden by width in call    
    var chartTitle = ["test"];
    var yAxisLabel = "y axis label";
    var xAxisLabel = "x axis label";
    var xformat = function(d){return d;};
    var focus;
    
    function chart(selection) {
        var maxBarHeight = height - (margin.top + margin.bottom);
        var chartWidth = width - margin.right - margin.left;
        
        d3.select('svg').remove();//remove old charts

        selection.each(function(data) {
            
            var xValue = function(d) { return d[0]; };
            var yValue = function(d) { return d[1]; };

            var x = d3.scale.ordinal()
                .domain(data.map(function(d) { return d[0]; }))
                .rangeRoundBands([margin.labels, chartWidth], 0);
            
            var y = d3.scale.linear()
                .domain([0, d3.max(data, function(d) { return d[1]; })])
                .range([maxBarHeight, 0])
                .nice();
            
            var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(xformat);
        
            //var yAxis = d3.svg.axis().scale(y).orient("left");
        
            var svgContainer = d3.select(this).append("svg")
                .attr("class", "chart mini-column-chart")
                .attr("width", width)
                .attr("height", height).append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        
            var xAxisG = svgContainer.append("g")
                .attr("class", "x axis")
                .attr("transform",...