JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar-chart-container">
    <button class="user-option save-as-image">Save As PNG</button>
    <div class="svg-container">
        <svg width="839" height="629" viewBox="0 0 839 629" preserveAspectRatio="xMidYMid">
            <g class="canvas" transform="translate(40,10)">
                <g class="bair" transform="translate(23,0)">
                    <rect width="24" y="410.569416498994" height="8.430583501006026" style="fill: rgb(31, 119, 180);"></rect>
                    <rect width="24" y="410.569416498994" height="0" style="fill: rgb(255, 127, 14);"></rect>
                    <rect width="24" y="7.087935017512507" height="403.48148148148147" style="fill: rgb(44, 160, 44);"></rect>
                </g>
                <g class="bar" transform="translate(48,0)">
                    <rect width="24" y="335.73717948717945" height="83.26282051282055" style="fill: rgb(31, 119, 180);"></rect>
                    <rect width="24" y="330.3653846153846" height="5.371794871794862" style="fill: rgb(255, 127, 14);"></rect>
                    <rect width="24" y="22.044629898403457" height="308.3207547169811" style="fill: rgb(44, 160, 44);"></rect>
                </g>
                <g class="bar" transform="translate(73,0)">
                    <rect width="24" y="290.97222222222223" height="128.02777777777777" style="fill: rgb(44, 160, 44);"></rect>
                </g>
                <g class="bar" transform="translate(98,0)">
                    <rect width="24" y="321.01006512729424" height="97.98993487270576" style="fill: rgb(31, 119, 180);"></rect>
                    <rect width="24" y="317.28892835997635" height="3.721136767317887" style="fill: rgb(255, 127, 14);"></rect>
                    <rect width="24" y="302.84065249790734" height="14.44827586206901" style="fill: rgb(44, 160, 44);"></rect>
                </g>
                <g class="bar" transform="translate(123,0)">
                    <rect width="24" y="409.1742043551089"...

CSS

.bar-chart-container {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.bar-chart-container rect {
    shape-rendering: crispEdges;
}
.bar-chart-container .bar rect {
    fill-opacity: .9;
}
.bar-chart-container .bar rect:hover {
    fill-opacity: 1.0;
}
.bar-chart-container .summary-tooltip {
    position: absolute;
    box-shadow: 4px 4px 10px 1px gray;
    padding: 20px;
    font-size: 14px;
    background: white;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}
.bar-chart-container .summary-tooltip-title {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}
.bar-chart-container .summary-tooltip-stack {
    display: block;
    text-transform: capitalize;
}
.bar-chart-container .x-axis text {
    text-rendering: optimizeLegibility;
    font-size: 12px;
}
.bar-chart-container .y-axis text {
    font-size: 10px;
}
.bar-chart-container .axis path, .bar-chart-container .axis line {
    shape-rendering: crispEdges;
    fill: none;
    stroke: black;
}
.bar-chart-container .legend-item text {
    font-size: 14px;
}
.bar-chart-container .user-option {
    display: block;
    margin: 10px 0px 10px 20px;
}

JavaScript

// Hook up button to save
d3.select(".save-as-image").on("click.saveAsImage", function () {
    saveSvgAsPng(d3.select('.bar-chart-container .svg-container svg').node(), 'blah.png');
});

/**
 * Lazy copy-paste of saveSvgAsPng (6c25e57e6e9e5afae927d68ec663c4a0fe13abb2)
 */
(function () {
    var out$ = typeof exports != 'undefined' && exports || this;

    var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';

    function inlineImages(callback) {
        var images = document.querySelectorAll('svg image');
        var left = images.length;
        if (left == 0) {
            callback();
        }
        for (var i = 0; i < images.length; i++) {
            (function (image) {
                if (image.getAttribute('xlink:href')) {
                    var href = image.getAttribute('xlink:href').value;
                    if (/^http/.test(href) && !(new RegExp('^' + window.location.host).test(href))) {
                        throw new Error("Cannot render embedded images linking to external hosts.");
                    }
                }
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var img = new Image();
                img.src = image.getAttribute('xlink:href');
                img.onload = function () {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    image.setAttribute('xlink:href', canvas.toDataURL('image/png'));
                    left--;
                    if (left == 0) {
                        callback();
                    }
                }
            })(images[i]);
        }
    }

    function styles(dom) {
        var css = "";
        var sheets = document.styleSheets;
        for (var i = 0; i < sheets.length; i++) {
            var rules =...