JSFiddle - React, Tailwind, and code Playground

by Sai

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

$(function () {

    //------------------------------------------------------------------------------------------------------
    // Highcharts X-range series plugin
    
   (function (H) {

    /**
	 * Check for object
	 * @param {Object} obj
	 */
    function isObject(obj) {
        return obj && typeof obj === 'object';
    }


    /**
	 * Draw and return a dog bone shaped rectangle
	 * @param {Number} x Left position
	 * @param {Number} y Top position
	 * @param {Number} width
	 * @param {Number} height
	 * @param {Number} r Border corner radius
	 * @param {Number} strokeWidth A stroke width can be supplied to allow crisp drawing
	 */
    var dogbone = function (x, y, width, height, r, strokeWidth) {

        // Grab the dimensions of the shape
        var r = isObject(x) ? x.r : r;
        var posx = isObject(x) ? x.x : x;
        var posy = isObject(x) ? x.y : y;
        var width = isObject(x) ? x.width : width;
        var height = isObject(x) ? x.height : height;

        if (width == 0) width = 10; // test hack

        // The dog bone left and right edges should still line up left and right edge of the data graph,
        // and not adding the egdes at caps to the outside of the horizontal line.
        var EdgeWidth = 5;

        // Also do not make this point any taller than it is, which means we'll shrink in the height
        // of the inside section.
        var EdgeHeight = 5;
        height = height - EdgeHeight;

        // Dynamically generate the points that make up the dog bone shape
        var points = [
			[posx, posy - EdgeHeight],
			[posx + EdgeWidth, posy - EdgeHeight],
			[posx + EdgeWidth, posy],
			[posx + width - EdgeWidth, posy],
			[posx + width - EdgeWidth, posy - EdgeHeight],
			[posx + width, posy - EdgeHeight],
			[posx + width, posy + height + EdgeHeight],
			[posx + width - EdgeWidth, posy + height + EdgeHeight],
			[posx + width - EdgeWidth, posy + height],
			[posx + EdgeWidth, posy + height],
			[posx + EdgeWidth, posy...