JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>
<div id="container" ></div>
<div id="container_mini" ></div>

CSS

#container {
	max-width: 400px;
	min-width: 200px;
	margin: 0 auto;
}

#container_mini {
	max-width: 200px;
	min-width: 50px;
	margin: 0 auto;
}

JavaScript

const data = [];
for(i = 0; i <= 100; i+=5) {
	
	data.push([`test${i}`, i*10, i*10])
}

data2 = [
  [
    "#1",
    135,
    1
  ],
  [
    "#2",
    130,
    1
  ],
  [
    "#3",
    125,
    1
  ],
  [
    "#4",
    120,
    1
  ],
  [
    "#5",
    115,
    1
  ],
  [
    "#6",
    110,
    1
  ],
  [
    "#7",
    105,
    1
  ],
  [
    "#8",
    100,
    2
  ],
  [
    "#9",
    95,
    3
  ],
  [
    "#10",
    90,
    5
  ],
  [
    "#11",
    85,
    7
  ],
  [
    "#12",
    78,
    8
  ],
  [
    "#13",
    75,
    12
  ],
  [
    "#14",
    70,
    15
  ],
  [
    "#15",
    65,
    10
  ],
  [
    "#16",
    50,
    3
  ],
  [
    "#17",
    45,
    3
  ],
  [
    "#18",
    35,
    3
  ],
  [
    "#19",
    25,
    3
  ],
  [
    "#20",
    20,
    3
  ],
  [
    "#21",
    18,
    3
  ],
  [
    "#22",
    15,
    3
  ],
  [
    "#23",
    12,
    3
  ],
  [
    "#24",
    10,
    3
  ],
  [
    "#25",
    8,
    3
  ],
  [
    "#26",
    5,
    3
  ],
  [
    "#27",
    3,
    3
  ]
]


Highcharts.chart('container', {

    chart: {
        type: 'variwide',
    },

    title: {
        text: 'Non-Overlapping Columns'
    },

    xAxis: {
        type: 'category',
        labels: {
        	enabled: false
        },

    },

    legend: {
        enabled: false
    },

    series: [{
        data: data2,
        colorByPoint: true,
        borderWidth: 2,
        borderColor: "#000"
    }]

});


Highcharts.chart('container_mini', {

    chart: {
        type: 'variwide',
    },

    title: {
        text: 'Overlapping Columns'
    },

    xAxis: {
        type: 'category',
        labels: {
        	enabled: false
        },

    },

    legend: {
        enabled: false
    },

    series: [{
        data: data2,
        colorByPoint: true,
        borderWidth: 2,
        borderColor: "#000"
    }]

});