Stacked bar chart

author(s): Øystein Moseng

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>

<h1>Stacked bar chart</h1>
<h2>Chart</h2>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Stacked bar chart with data labels showing totals of each stack.
    </p>
</figure>
<h2>CSV data</h2>
<p>
Source: <a href="https://data.world/newns92/abbott-world-marathon-majors-winners">data.world</a>.
</p>
<pre id="csv">Country,Male class,Female class
Australia,2,1
Belgium,3,2
Brazil,7,0
Canada,16,1
China,0,1
Colombia,2,0
Denmark,2,0
Eritrea,1,0
Ethiopia,20,31
Finland,7,3
Germany,8,28
Greece,2,0
Guatemala,1,0
Hungary,0,1
Ireland,1,2
Italy,5,1
Japan,13,9
Kenya,88,48
Latvia,0,2
Mexico,9,1
Morocco,5,0
New Zealand,2,3
Norway,1,19
Poland,1,7
Portugal,4,7
Romania,0,2
Russia,0,8
South Africa,4,1
South Korea,3,0
Soviet Union,1,0
Spain,2,0
Sweden,1,1
Switzerland,1,1
Tanzania,4,0
United Kingdom,18,17
United States,68,36
Yugoslavia,1,0</pre>

CSS

body {
  font-family: Verdana, sans-serif;
  padding-left: 10px;
}

h2 {
  font-size: 1.3rem;
  margin-left: 10px;
  margin-bottom: 0;
  margin-top: 1.5rem;
}

p {
    margin-left: 1rem;    
}

pre {
  margin-left: 1rem;
  border: 1px solid #cde;
  max-width: 600px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

#container {
    height: 800px;
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 320px;
    max-width: 600px;
    margin: 1em;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}


input[type="number"] {
	min-width: 50px;
}

JavaScript

// Configure the visualization
var chart = Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Major marathon winners by countries, 1897-2018'
    },
    subtitle: {
    	text: 'Source: <a href="https://data.world/newns92/abbott-world-marathon-majors-winners">data.world</a>'
    },
    tooltip: {
    	backgroundColor: 'rgba(255, 255, 255, 0.9)',
	    stickOnContact: true
    },
    yAxis: {
    	title: {
        	text: 'Number of wins'
        },
        stackLabels: {
	        enabled: true
        }
    },
    data: {
    	csv: document.getElementById('csv').innerHTML
    },
    plotOptions: {
    	series: {
        	stacking: 'normal'
        }
    }
});