JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

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

<div id="container"></div>

JavaScript

var hideWatermark = 0;
var imageElement;
var options = {
  chart: {
    renderTo: 'container',
    events: {
      load: function() {
        if (hideWatermark === 'undefined' || hideWatermark == 0) {
          var padWidth = this.chartWidth - 170;
          var padHeight = this.chartHeight - 40;
          imageElement = this.renderer.image('https://placekitten.com/160/30', padWidth, padHeight, 160, 30).attr({
            id :'myPath'
          }).add();
        }
      }
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    type: 'column'
  }]
}

var chart = Highcharts.chart(options);
/* setTimeout(function() {
  // Change element postion
  imageElement.attr({
    x: 100,
    y: 50
  }).add();
  // Resiza chart
  chart.setSize(600, 400);
}, 1500)
 */