Basic Bar

by Ryan Brackett

HTML

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

    <div id="container-4"></div>

CSS

body {padding: 0px; margin: 0px;}

ul.highcharts-menu {
    font-family: sans-serif;
}

JavaScript

Highcharts.chart('container-4', {
		
		
		
		
		
		series: [{
			name: 'Male',
			color: "#0284f3",
			data: [6, 34, 368, 585, 10, 1173, 5, 431, 3070]
		},{
			name: 'Female',
			color: "#dd299d",
			data: [13, 43, 440, 501, 5, 1292, 7, 461, 3524]
		}],
		
		
		
		
		
		chart: {
			type: 'bar',
			backgroundColor: '#ffffff',
		height: 650,
			zoomType: 'xy',
			
			style: {
            	fontFamily: 'sans-serif'
        	}

		},
		title: {
			text: ''
		},
		subtitle: {
			text: ''
		},
		xAxis: {
			categories: [
			'American Indian or Alaskan Native',
			'Asian',
			'Black or African American',
			'Decline to Answer',
			'Native Hawaiian or Other Pacific Islander',
			'Other',
			'Other Pacfic Islander',
			'Unknown',
			'White'],
			title: {
				text: null
			},
			labels: {
				style: {
					fontSize: '11px',
					color: "#000000"
				}
			}
		},
		yAxis: {
			min: 0,
			title: {
				text: '',
			},
			labels: {
				overflow: 'justify',
				
				style: {
					fontSize: '12px',
					color: "#000000"
				}
			}
		},
    tooltip: {
        shared: true,
     
		borderWidth: 0,
		shadow: false
    },
		plotOptions: {
			bar: {
				dataLabels: {
					enabled: false
				}
			},
			credits: {
				enabled: false
			},
			series: {
				groupPadding: 0.1,
				pointPadding: 0.6,
				borderWidth: 0,
				pointWidth: 25,
				states: {
					hover: {
						enabled: true,
						animation:{
							duration:50
						}
					}
				}
			}
		},
		legend: {
			layout: 'horizontal',
			align: 'left',
			verticalAlign: 'top',
		},
		credits: {
			enabled: false
		}

	});