Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

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

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

CSS

body{
  
  background:grey
}

JavaScript

// create the chart
Highcharts.chart('container',


  {
    //▼▼▼ UPDATE DATA HERE ▼▼▼
    series: [{
      data: [105, 180],
    }],
    //▲▲▲ UPDATE DATA HERE ▲▲▲

    chart: {
      type: 'column',
      backgroundColor: "transparent",
      marginBottom: 85,
      marginLeft: 120,
      marginRight: 120,
      events: {
        load: function() {
          var updown = '<div>1.7x<br>greater than supply</div>',
            colChart = this.series[0],
            valNum = colChart.data.length,
            lastCol = colChart.points[valNum - 1],
            colH = lastCol.shapeArgs.height,
            colW = lastCol.shapeArgs.width;

          console.log(colH);
          console.log(colW);
          // assign other series values. this cant be added below because it is already called on top with just the data to make updates easier
          this.update({
            series: [{
              colorByPoint: true,
              borderWidth: 0,
            }],


            tooltip: {
              positioner: function(labelWidth, labelHeight, point) {
                return {
                  x: point.plotX - point.h / 2 + labelWidth / 2,
                  y: point.plotY
                };
              },
              formatter: function() {
                return updown;
              }
            },
          });

          lastCol.update({
            dataLabels: {
              y: 300,
              formatter: function() {
                return "<div style='height:" + colH + "px; width:100%'><div style='text-align:center'>" + this.y + "</div><div style=''>1.7x<br>greater than supply</div></div>";
              },
            }
          });

          // if column is light green, make datalabel color black
          this.series[0].points.forEach(p => {
            if (p.color === "#4C9F8B") {
              p.update({
                dataLabels: {
                  color: "#000"
                }
              })
            } else {}
          })

       ...