JSFiddle - React, Tailwind, and code Playground

by no1uknow

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 430px; height: 300px; margin: 0 auto;background-color:#232323;"></div>

JavaScript

$(function () {
				var chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						type: 'bar',
						backgroundColor: 'transparent'
					},
					title: {
						text: ''
					}, 					
					credits: {
					  enabled: false
					},
					xAxis: {
						categories: ['CC', 'WCDL', 'TL', 'TRADE'],
						labels: {
							 style: {
								color: '#FFFFFF',
								fontFamily: 'Montserrat',
								fontSize: '14px',					
							 }
						},
						gridLineWidth: 0,
					},
					yAxis: {
						labels: {enabled:false},
						gridLineWidth: 0,
						title: {
							text: ''
						}
					},		
					tooltip: {
							formatter: function() 
					  {
									return "<b>" + this.series.name + '</b>: ' + this.y + ' (' + 			Math.round(this.percentage,1) + "%)";
							}
						},
					legend: {
						enabled: false
					},		
					plotOptions: {
							bar: {								
								animation: true,
								stacking: 'percent',
								borderWidth: '0',
								dataLabels: {
									enabled: true,
									color: 'white',
									formatter: function() {
										
										if (this.percentage < 5) 
										{
											return ""
										}
										else
										{
											return Math.round(this.percentage,1) + "%";
										}
									},
									style: {
										fontFamily: 'Montserrat',
										fontSize: '12px',
										letterSpacing: '-0.02em'
									}
			
								}
							}
					},
					series: [{
						data: [{y:20,color:'#109618'},{y:15,color:'#dc3912'},{y:5,color:'#3366cc'},{y:55,color:'#ff9900'}],						
					},{
						data: [{y:80,color:'#137118'},{y:85,color:'#ae3316'},{y:95,color:'#2f55a2'},{y:45,color:'#c87b09'}]        
					}]
				});
			});