Bar Chart

by Rikin Patel

HTML

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

<div id="container" style="height: 400px; margin: auto; min-width: 400px; max-width: 600px"></div>

JavaScript

var chart;
$(function () {
    $('#container').highcharts({
		'plotOptions' : {
			'column' : {
				'dataLabels' : {
					'enabled' : true,
					'style' : {
						'color' : 'grey'
					},
					'format' : '{y:.1f}'
				},
				'showInLegend' : true
			}
		},
		'colors' : ['#9BD1BE', '#D5B8E2'],
		'credits' : {
			'enabled' : false,
			'text' : '? 2016 March of Dimes Foundation. All rights reserved.',
			'position' : {
				'align' : 'left',
				'x' : 5,
				'y' : -17
			},
			'style' : {
				'fontSize' : '6pt',
				'width' : '400px'
			}
		},
		'chart' : {
			'zoomType' : 'x',
			'type' : 'column',
			'width' : 400,
      'height': 300,
			'spacingBottom' : 0,
			'style' : {
				'fontFamily' : 'sans-serif'
			}
		},
		'title' : {
			'text' : 'Percent of men ages 18 and older',
			'align' : 'left',
			'style' : {
				'color' : 'grey',
				'fontSize' : '16px'
			}
		},
		'name' : 'Data name',
		'series' : [{
				'name' : 'California',
				'data' : [18.5, 19.1, 18.5, 18.1, 17.8, 15.6, 15.0, 17.3, 15.2, 16.1, 16.3]
			}
		],
		'xAxis' : {
			'categories' : ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014']
		},
		'yAxis' : {
    
			'labels' : {
				'format' : '{value:.1f}'
			},
			'title' : {
				'text' : ''
			}
		},
		'legend' : {
			'enabled' : false
		},
		'tooltip' : {
			'pointFormat' : '\u003cspan\u003e{series.name}\u003c/span\u003e: {point.y:.1f}\u003cbr/\u003e',
			'style' : {
				'fontSize' : '10px'
			}
		}
	});
});