JSFiddle - React, Tailwind, and code Playground

by Milomir Topic

HTML

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

<div class="container">
  <div class="col" id="container1" style="width: 50%; height: 240px; margin: 0 auto"></div>
  <div class="col" id="container" style="width: 50%; height: 240px; margin: 0 auto"></div>
</div>

CSS

.container {
  float: left;
  width: 100%;
  max-width: 100%;
  margin: auto;
  border:1px solid;
}
.col {
  display: inline-block;
  float: left;
  padding: 0 3px;
  box-sizing: border-box;
  position: relative;
}
#container .highcharts-axis-labels.highcharts-xaxis-labels {
  position: absolute;
  right: auto!important;
  left: 0px!important;
  top: -20px!important;
}
#container .highcharts-axis-labels.highcharts-xaxis-labels  span {
  width: auto!important;
  white-space: no-wrap;
}
#container .highcharts-axis-labels.highcharts-xaxis-labels  span a {
  white-space: nowrap;
  text-decoration: none;
}

#container1 .highcharts-axis-labels.highcharts-xaxis-labels {
  position: absolute!important;
  left: auto!important;
  right: 0px!important;
  top: -20px!important;
}

#container1 .highcharts-axis-labels.highcharts-xaxis-labels  span {
  width: auto!important;
}

#container1 .highcharts-axis-labels.highcharts-xaxis-labels  span a {
  white-space: nowrap;
  text-decoration: none;
}

JavaScript

$(function () {
		var offerLinksTop = {
        'Mens Health': 'http://www.google.com/search?q=Mens Health',
        'Beauty Some': 'http://www.google.com/search?q=Beauty Some',
        'Other Offer': 'http://www.google.com/serach?q=Other Offer',
        'Books': 'http://www.google.com/serach?q=Books',
        'Games': 'http://www.google.com/serach?q=Games'
    };
	var offerLinksBottom = {
        'Mens Health 1': 'http://www.google.com/search?q=Mens Health 1',
        'Beauty Some 1': 'http://www.google.com/search?q=Beauty Some 1',
        'Other Offer 1': 'http://www.google.com/serach?q=Other Offer 1',
        'Books 1': 'http://www.google.com/serach?q=Books 1',
        'Games 1': 'http://www.google.com/serach?q=Games 1'
    };    
    var offerChartTop;
    var offerChartBottom;
   
    
    $(document).ready(function() {
        offerChartTop = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar',
                marginBottom: 0,
                marginLeft: 0,
                spacingTop: 10,
                spacingRight: 0,
                spacingBottom: 0,
                spacingLeft: 0
            },
            title: {
                text: false,
            },
            exporting: { enabled: false },
    
            xAxis: {
                reversed: true,
                categories: ['Mens Health', 'Beauty Some', "Other Offer", "Books", "Games"],
                labels: {
                		useHTML: true,
                    x: 0,
                    align: 'left',
                    formatter: function () {
                      return '<a target="_blank" href="' + offerLinksTop[this.value] + '">' +
                        this.value + '</a>';
                    },
                },
                title: {
                    text: null
                }
            },
            yAxis: {
                reversed: false,
                gridLineWidth: 0,
                title: {
        ...