Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

<div id="container"></div>

CSS

body{
  
  background:grey
}

JavaScript

Highcharts.chart('container',



  {
    series: [{
        data: [1.7]
      },
      {
        data: [105, 180],
      },
    ],

    chart: {
      type: 'column',
      backgroundColor: "transparent",
      marginBottom: 85,
      marginLeft: 120,
      marginRight: 120,
      animation: false,
      events: {
        load: function() {
          var
            colChange = this.series[0].points[0].y,
            colChart = this.series[1],
            valNum = colChart.data.length,
            lastCol = colChart.points[valNum - 1],
            lastColV = colChart.points[valNum - 1].y;

          lastCol.update({
            color: "#4C9F8B",
          });

          this.update({
            series: [{
                color: "transparent",
                data: [0, 0.1],
                dataLabels: {
                  enabled: true,
                  formatter: function() {
                    if (this.y === 0.1) {                      
                      return `<span style="color:#000">${this.total.toFixed(0)}</span>`;
                    } else {
                      return `<span>${this.total}</span>`;
                    }
                  },
                  style: {
                    color: "#fff",
                    fontSize:"20px"
                  },
                },
              },
              {
                dataLabels: {
                  style: {
                    color: "#000",
                  },
                  formatter: function() {
                    if (this.y === lastColV) {
                      return `<span><div>${colChange}x</div><span style="font-size: 87.5%; font-weight: 400;">greater than supply</span></span>`;
                    }
                  },
                }
              },
            ],
          });
        }
      }
    },
    title: {
      text: ""
    },
    xAxis: {
      categories: ["Supply", "Demand", ],
      crosshair: true,
      lineColor: '#fff',
      labels: {
        enabled:...