Skip to content

Instantly share code, notes, and snippets.

@urfolomeus

urfolomeus/index.html

Created September 5, 2023 17:10
Show Gist options
  • Save urfolomeus/9e8a13a4b29d2fe7a2b03a4ed9aa14d1 to your computer and use it in GitHub Desktop.
Save urfolomeus/9e8a13a4b29d2fe7a2b03a4ed9aa14d1 to your computer and use it in GitHub Desktop.
Download ZIP
HighCharts HTML example for DocRaptor
Raw
index.html
<html>
<head>
<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>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature Conformance'
},
xAxis: [{
categories: ['A001', 'A002', 'A003', 'B001', 'B002', 'B003', 'C001', 'C002', 'C003', 'D001', 'D002', 'D003']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
type: 'scatter',
data: [22.2, 23, 21.3, 24.1, 19.5, 21.5, 25.2, 21.5, 23.3, 19.3, 19.9, 18.6],
tooltip: {
pointFormat: '<span style="font-weight: bold; color: {series.color}">Mean Temperature</span>: <b>{point.y:.1f}°C</b> '
}
}, {
name: 'Temperature error',
type: 'errorbar',
data: [[20, 23], [21, 24.7], [20.4, 22.1], [22, 25.7], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [19, 22.7], [23.2, 23.9], [18.0, 21.1], [17.3, 20.7], [16.6, 19.7]],
tooltip: {
pointFormat: '(Temperature range: {point.low}-{point.high}°C)<br/>'
}
}]
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment