JSFiddle - React, Tailwind, and code Playground

by atype

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="chart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var links = {
        'MySuper balanced': 'MySuper balanced SuperRatings benchmark',
        'Cash': 'Cash SuperRatings benchmark',
				'Enhanced cash': 'Enhanced cash SuperRatings benchmark',
        'Conservative': 'Conservative SuperRatings benchmark'
    };
    $('#chart').highcharts({
        chart: {
            type: 'column'
        },
        legend: {
	        title: {
                text: 'Choose investment option'
            },
            itemHiddenStyle: {
                color: '#aaa'
            },
            itemWidth: 200,
            align: 'bottom',
            verticalAlign: 'bottom',
            layout: 'horizontal',
            itemMarginTop: 2,
            itemMarginBottom: 2,
            x: 0,
            y: 0
        },
        title: {
            text: ''
        },
        tooltip: {
				backgroundColor: '#e2f2f9',
    		borderColor: 'none',
    		borderRadius: 0,
    		borderWidth: 0
				},
        yAxis: {
            min: 0
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                events: {
                    legendItemClick: function (event) {
                        var sisterSeries = this.chart.get(links[this.name]);
                        if (this.visible) {
                            sisterSeries.hide();
                        } else {
                            sisterSeries.show();
                        }
                    }
                }
            }
        },
        series: [{
            id: 'MySuper balanced',
            name: 'MySuper balanced',
            color: 'rgba(0,167,184,1)',
            data: [3.8, 8.9, 8.4],
            pointPadding: 0.3,
            pointPlacement: 0.2

        }, {
            id: 'MySuper balanced SuperRatings benchmark',
            name: 'MySuper balanced SuperRatings benchmark',
            color: 'rgba(135,28,90,1)',
            data: [2.7, 8.1, 7.9],
           ...