JSFiddle - React, Tailwind, and code Playground

by Milomir Topic

HTML

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

<div class="container">
  <div class="col" id="container" style="width: 50%; height: 200px; margin: 0 auto"></div>
  <div class="col" id="container1" style="width: 50%; height: 200px; 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 5px;
  box-sizing: border-box;
  position: relative;
}

#container g.highcharts-axis-labels.highcharts-xaxis-labels {
      /* transform: translateX(100%);
      transform: translateY(-20px); */
          transform: translate(100%, -18px);   
}
.highcharts-axis-labels.highcharts-xaxis-labels {
  position: absolute;
  left: inherit!important;
  right: 70px!important;
  top: -15px!important;
  
}

JavaScript

$(function () {
		var offerLinks = {
        'Mens Health': 'http://www.bing.com/search?q=foo',
        'Beauty Some': 'http://www.bing.com/search?q=foo+bar',
        'Other Offer': 'http://www.bing.com/serach?q=foobar',
        'Books': 'http://www.bing.com/serach?q=foobar',
        'Games': 'http://www.bing.com/serach?q=foobar'
    };
    var chart1;
    var chart2;
    
    $(document).ready(function() {
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar',
                /* margin: [-40, 0, 0, 0] */
                marginBottom: 0,
                /* marginLeft: 0, */
                spacingTop: 20,
                spacingRight: 0,
                spacingBottom: 20,
                spacingLeft: 0
            },
            title: {
                text: false,
            },
            exporting: { enabled: false },
    
            xAxis: {
                reversed:true,
                categories: ['Mens Health', 'Beauty Some', "Other Offer", "Books", "Games"],
                labels: {
                useHTML: true,
                    align: 'right',
                    x: 0,
                    formatter: function () {
                      return '<a target="_blank" href="' + offerLinks[this.value] + '">' +
                        this.value + '</a>';
                    },
                },
                title: {
                    text: null
                }
            },
            yAxis: {
                reversed:true,
                min: 0,
								/*max:6, */
                gridLineWidth: 0,
           
     
                title: {
                    text: false,
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
          
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                ...