Basic bar

by Black Label

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', {
  chart: {
    type: "bar",
  },
  legend: {
    enabled: false
  },
  yAxis: {
    labels: {
      formatter: function() {
        const categories = ["LOW", "MEDIUM", "HIGH", "GDM"];

        return categories[this.pos]
      }
    },
    tickInterval: 1,
    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,
      },
    ],
  },
  series: [{
    type: "bar",
    data: [{
      y: 2,
      color: "#B3C618",
    }],
  }],
});