JSFiddle - React, Tailwind, and code Playground

by Joshua Salwen

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px"></div>
<button id="filter">Filter</button>
<button id="unfilter">Unfilter</button>

JavaScript

$('#filter').click(function() {
    updateData(dataFiltered);
});
$('#unfilter').click(function() {
    updateData(dataOrig);
});
var dataOrig = [
    {
        "name": "Settlement",
        "color": "#006699",
        "data": [
            298,
            4
        ]
    },
    {
        "name": "Unknown",
        "color": "#FFCC33",
        "data": [
            233,
            3
        ]
    },
    {
        "name": "Defendant Verdict",
        "color": "#006666",
        "data": [
            172,
            5
        ]
    },
    {
        "name": "Plaintiff Verdict",
        "color": "#FF6600",
        "data": [
            12,
            120
        ]
    }
];
var dataFiltered = [
    {
        "name": "Unknown",
        "color": "#FFCC33",
        "data": [
            123,
            1
        ]
    },
    {
        "name": "Defendant Verdict",
        "color": "#006666",
        "data": [
            100,
            0
        ]
    }
];
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        height: 270,
        marginTop: 50,
        type: "column",
        width: 300
    },
    xAxis: {
        categories: ["Retained By Plaintiff", "Retained By Defense"]
    },
    yAxis: {
        allowDecimals: false,
        title: null,
        min: 0
    },
    legend: {
        align: "center",
        layout: "horizontal",
        verticalAlign: "bottom",
        width: 250,
        x: 0,
        y: 0,
        borderWidth: 0,
        itemHoverStyle: {},
        itemStyle: {
            color: '#333'
        }
    },
    plotOptions: {
        column: {
            enableMouseTracking: false,
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: dataOrig
});
function updateData(series) {
    var
        i, l
    ;
    // update the chart series data
    for (i = 0, l = series.length; i < l; i += 1) {
        // replace the current data, but don't redraw
        if (chart.series[i]) {
        ...