JSFiddle - React, Tailwind, and code Playground

by Emre Bolat

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    xAxis: {
      categories: true
    },

    series: [{
      data: [10, 20, 40, 10]
    }, {
      type: 'line',
      dashStyle: 'dash',
      data: [
        [0, 10],
        [0, 50],
        [0.3, 50], null, [0.7, 50],
        [1, 50],
        [1, 20]
      ],
      enableMouseTracking: false,
      showInLegend: false
    }]
  }, function(chart) {
    var series = chart.series[0],
      data = series.data,
      xAxis = series.xAxis,
      yAxis = series.yAxis;
    chart.renderer.text((100 * (data[0].y - data[1].y) / data[0].y).toFixed(1) + '%', xAxis.toPixels(0.5), yAxis.toPixels(50)).attr({
      zIndex: 10,
      align: 'center'
    }).add();
  });
});