JSFiddle - React, Tailwind, and code Playground
by Ryan Brackett
HTML
<script src="http://www.nghs.com/includes/js/highcharts/highcharts.js"></script>
<script src="http://www.nghs.com/includes/js/highcharts/exporting.js"></script>
<!-- start GRAPH -->
<div class="highcharts-graph"><script>$(function () {
$('#graph-001').highcharts({
chart: {
style: {fontFamily: 'Arial, sans-serif'}
},
title: {
text: 'Pneumococcal Vaccination',
style: {
fontSize: '18px',
fontWeight: 'bold'
}
},
subtitle: {text: 'Higher numbers are better.'},
xAxis: {
categories: [
'U.S. Hospital Average',
'NGMC Average']
},
yAxis: {
min: 0,
max: 100,
title: {text: 'Occurrence %'},
gridLineColor: '#ededed'
},
tooltip: {
pointFormat: '<b>{point.y:.2f}%</b>',
borderWidth: 0,
shadow: false,
style: {padding: '10px'}
},
series: [{
type: 'column',
name: 'Averages',
colorByPoint: true,
data: [91, 90],
dataLabels: {enabled: true}
}],
colors: [
'#cacaca',
'#b7bf1c'
],
legend: {
enabled: false
},
credits: {enabled: false}
});
});
</script>
<div class="graph-container" id="graph-001"> </div>
</div>
<!-- end GRAPH -->
<!-- start GRAPH -->
<div class="highcharts-graph"><script>$(function () {
$('#graph-002').highcharts({
chart: {
style: {fontFamily: 'Arial, sans-serif'}
},
title: {
text: 'Influenza Vaccination',
style: {
fontSize: '18px',
fontWeight: 'bold'
}
},
subtitle: {text: 'Higher numbers are better.'},
xAxis: {
categories: [
'U.S. Hospital...