Stacked bar

author(s): Torstein Hønsi

by Haze32

HTML

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

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ['Investment Grade Corporate Board', '10-Years U.S. Treasury', 'U.S. Municipal Bond'],
    lineColor: '#000',
    labels: {
      style: {
        fontSize: '16px',
        fontWeight: '400',
        color: '#000'
      },
    },
    title: {
      enabled: false,
    }
  },
  yAxis: {
    gridLineWidth: 0,
    //opposite: true,
    title: {
      text: ''
    },
    min: 0,
    labels: {
      enabled: false,
    },
  },
  legend: {

  },
  plotOptions: {
    series: {
      enableMouseTracking: false,
      stacking: "normal",
      groupPadding: 0.1,
      borderWidth: 0,
      states: {
        inactive: {
          enabled: false
        },
        hover: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: true,
        useHTML: true,
        verticalAlign: 'top',
        y: 10,
        formatter: function() {
          return this.y + '%';
        },
        style: {
          fontSize: "16px",
          color: "#000",
          textOutline: "none",
          fontWeight: "500",
          lineHeight: "1",
          padding: "0",
          width: "70px",
          textAlign: "left",
        }
      }
    }
  },
  series: [{
    name: 'Pre-Tax Yield',
    color: "lightGrey",
    data: [5, 3.5, 0]
  }, {
    name: 'After-Tax Yield',
    color: "grey",
    data: [4.5, 2.2, 3.2]
  }, ]
});