JSFiddle - React, Tailwind, and code Playground

by AbhishekRohan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

// found @ https://stackoverflow.com/questions/47796990/highcharts-xaxis-labelformatter

var categoryLinks = {
    'Foo': 'http://www.bing.com/search?q=foo',
    'Bar': 'http://www.bing.com/search?q=foo+bar',
    'Foobar': 'http://www.bing.com/serach?q=foobar'
};

Highcharts.chart('container', {

    title: {
        text: 'Click categories to search'
    },

    xAxis: {
        categories: ['Foo', 'Bar', 'Foobar'],

        labels: {
            useHTML: true,
            formatter: function () {
                function escapeAttr(str) {
                    var div = document.createElement('div');
                    div.setAttribute('data-dummy', str);
                    return /\"(.*)\"/.exec(div.outerHTML)[1];
                }

            		var options = { type: 'iframe'},
                		optionsAttr = escapeAttr(JSON.stringify(options));
                
                return '<div class="label">'
                     +     '<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options="' + optionsAttr + '">ICON</a>'
                     + '</div>';
            },
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    }]
});