Bar chart with inner label

by Rikin Patel

HTML

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

CSS

#chart {
    width: 100%;
    height: 400px;
}

JavaScript

$(document).ready(function () {
	function chart() {
		var change = {
			0 : '',
			25 : '',
			50 : '',
			75 : '',
			100 : ''
		};
		$('#chart').highcharts({
			'plotOptions' : {
				'column' : {
					'dataLabels' : {
						'enabled' : true,   
						'style' : {
							'color' : 'grey'
						},
						'format' : '{y:.1f}',
						'crop' : false,
						'overflow' : 'none'
					},
					'showInLegend' : true,
					'colorByPoint' : true,
					'events' : {
						'legendItemClick' : function (e) {
							e.preventDefault();
						}
					}
				}
			},
			'colors' : ['#9BD1BE', '#D5B8E2'],
			'credits' : {
				'enabled' : true,
				'text' : 'â’¸ 2016 March of Dimes Foundation. All rights reserved.',
				'position' : {
					'align' : 'left',
					'x' : 5,
					'y' : -17
				},
				'style' : {
					'fontSize' : '8pt',
					'width' : '400px'
				}
			},
			'chart' : {
				'zoomType' : 'x',
				'type' : 'bar',
				'width' : 1024,
				'height' : null,
				'spacingBottom' : 30,
				'style' : {
					'fontFamily' : 'sans-serif',
					'fontSize' : '10pt'
				}
			},
			'title' : {
				'text' : 'ChartTitle',
				'align' : 'left',
				'style' : {
					'color' : 'grey',
					'fontSize' : '16px'
				}
			},
			'name' : 'Data name',
			'series' : [{
					'name' : 'RegionName',
					'data' : [9.1, 9.5, 10.4, 15.2],
					'colors' : []
				}
			],
			'xAxis' : {
				'categories' : ['Hispanic', 'Asian/Pacific Islander', 'White', 'Black'],
				'labels' : {
					'autoRotation' : false,
					'step' : 1,
          'align': 'left',
          'x':5
				}
			},
			'yAxis' : {
				'labels' : {
					//'format' : '{value:.1f}'
				},
				'title' : {
					'text' : ''
				},
				'max' : 15.2,
				'style' : {
					'fontSize' : '12pt'
				}
			},
			'legend' : {
				'enabled' : false
			}
		});
	};
	chart();
});