JSFiddle - React, Tailwind, and code Playground

by findango

HTML

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

<div id="activeprojects" style="margin: 0 auto"></div>
<div id="graph-status" style="margin: 0 auto"></div>

JavaScript

$(function() {
  $('#activeprojects').highcharts({
    chart: {
      type: 'columnrange',
      inverted: true
    },
    title: {
      text: 'todo'
    },
    xAxis: {

      categories: [{
        name: "Testing 1",
        url: "http://www.google.com"
      }, {
        name: "Testing 2",
        url: ""
      }, {
        name: "Testing 3",
        url: ""
      }, {
        name: "Testing 4",
        url: ""
      }, {
        name: "Testing 5",
        url: ""
      }, {
        name: "Testing 6",
        url: ""
      }],
      labels: {
        formatter: function() {
          return '<a href="' + this.value.url + '">' + this.value.name + '</a>'
        },
        useHTML: true
      }
    },
    yAxis: {
      type: 'datetime',
      labels: {
        formatter: function() {
          var myDate = new Date(this.value);
          var newDateMs = Date.UTC(myDate.getUTCFullYear(), myDate.getUTCMonth(), myDate.getUTCDate());
          return Highcharts.dateFormat('%m/%e', newDateMs);
        }
      },
      title: {
        text: 'Estimated End Date'
      }
    },
    tooltip: {
      shared: false,
      formatter: function() {
        var highDate = new Date(this.point.high);
        var newDateMs = Date.UTC(highDate.getUTCFullYear(), highDate.getUTCMonth(), highDate.getUTCDate());
        return '<span style="font-size: 10px">' + this.x + '</span><br /><span style="color:#2F7ED8">Estimated End Date:</span> <b>' + Highcharts.dateFormat('%m/%e', newDateMs) + '</b>';
      }
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      columnrange: {
        dataLabels: {
          //align: 'right',
          enabled: true,
          color: 'red',
          inside: false,
          xHigh: -45,
          xLow: -9999999,
          style: {
            textOutline: '0 contrast'
          },
          //shadow: "#ff0000",
          formatter: function() {
            if (this.point.high) {
              var myDate = new Date(this.y);
           ...