JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

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

<div class="CampaignPercent" style="height: 40px;">Div1</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div class="CampaignPercent" style="height: 40px;">Div2</div>
<div class="CampaignPercent" style="height: 40px;">Div3</div>
<div...

JavaScript

$(function () {
	$(document).ready(function(){
	
		$('.CampaignPercent').each(function(){
			var chart = new Highcharts.Chart({
				chart: {
					renderTo: this,
					type: 'line',
					width: 200,
					margin: [0,0,0,0]
				},
				colors: ['#F2F2F2','#2E5430'],
				xAxis: {
					lineWidth: 0,
					minorGridLineWidth: 0,
					lineColor: 'transparent',
					labels: {
						enabled: false  
					},
					minorTickLength: 0,
					tickLength: 0
				},
				yAxis:{ 
					gridLineWidth: 0,
					minorGridLineWidth: 0,
					labels: {
						enabled: false   
					},
					title: {
						text: null  
					},
					max: 100
				},
				tooltip: {
					formatter: function(){
						var text = '';
						if(this.series.name == 'remaining'){
							text = this.y + '% of goal remaining'                    
						} else {
							text = this.y + '% of goal achieved'   
						}
					   return text;
					}
				},
				credits:{enabled: false},
				title:{text: null},
				legend: {
					enabled: false
				},
				plotOptions: {
					series: {
						stacking: 'normal',
						pointWidth: 20
					}
				},
				series: [{
					name: 'remaining',
					data: [40]
				},{
					name: 'achieved',
					data: [60]     
				}],
				exporting: {
					enabled: false
				}
			});
		});
	});
});