Basic bar
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>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
CSS
.highcharts-axis.highcharts-color-0 {
/* width: 100%;
*/}
JavaScript
Highcharts.chart('container', {
legend: {
enabled: false,
},
boost: {
useGPUTranslations: true,
},
tooltip: {
enabled: false,
},
chart: {
type: "bar",
height: 50,
marginTop: 5,
animation: true,
shadow: false,
},
title: {},
credits: {
enabled: false,
},
xAxis: {
categories: [""],
title: {},
lineWidth: 0,
top: 20,
height: 10,
},
yAxis: {
offset: 0,
labels: {
y: 15,
align: "center",
},
gridLineWidth: 0.5,
gridLineDashStyle: "Dash",
gridZIndex: 10,
top: 20,
height: 10,
categories: ["LOW", "MEDIUM", "HIGH", "GDM"],
plotBands: [
{
from: 0,
to: 1,
color: "#E3E3E3",
borderColor: "#6B6B6B",
borderWidth: 1,
},
{
from: 1,
to: 2,
color: "#F9FAFC",
borderColor: "#6B6B6B",
borderWidth: 1,
},
{
from: 2,
to: 3,
color: "#E3E3E3",
borderColor: "#6B6B6B",
borderWidth: 1,
},
],
min: 0,
max: 3,
title: {
text: null,
},
},
series: [
{
type: "bar",
data: [
{
y: 2,
color: "#B3C618",
},
],
},
],
});