Stacked column

author(s): Torstein Hønsi

by Haze32

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

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

JavaScript

Highcharts.chart('container',

  {
    //▼▼▼ UPDATE DATA HERE ▼▼▼
    series: [{
      name: 'Embedded Growth Potential',
      data: [15]
    }, {
      name: 'In-Place Rents',
      data: [85]
    }, ],
    //▲▲▲ UPDATE DATA HERE ▲▲▲

    chart: {
      height: 500,
      type: 'column',
      backgroundColor: "transparent",
      events: {
        load: function() {

          

 var chart = this,
          legend = chart.legend;

       // Legend hover show tooltip
        for (var i = 0, len = legend.allItems.length; i < len; i++) {
          (function(i) {
    

            var item = legend.allItems[i].legendItem;
            item.setAttribute("stroke-width", "1");

          })(i);
        }



          // 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: [{
              borderColor: '#4C9F8B',
              color: {
                pattern: {
                  color: '#4C9F8B',
                  path: {
                    d: 'M -1 1 l 2 -2 M 0 6 l 6 -6 M 5 7 l 2 -2',
                    strokeWidth: 1
                  },
                  width: 6,
                  height: 6,
                }
              },
              dataLabels: {
                enabled: true,
                backgroundColor: '#fff',
                borderColor: '#4C9F8B',
                verticalAlign: 'middle',
                y: 0,
                style: {
                  fontSize: '20px',
                  fontWeight: '500',
                  color: '#000',
                  textShadow: false,
                  textOutline: 'none',
                },
              }
            }, {
              dataLabels: {
                enabled: false,
              },
              color: '#4C9F8B',
              borderColor: '#4C9F8B',
            }, ],
          });

        }
      }
    },
    title: {
      text: '',
    },
    xAxis: {
     ...