basic chart

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

Highcharts.chart('container',


  {
    chart: {
      type: 'column'
    },
    title: {
      text: '',
    },
    xAxis: {
      categories: ['1', '2', '3'],
      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,
      },
      stackLabels: {
        enabled: true,
        useHTML: true,
        style: {
          fontSize: "16px",
          textOutline: "none",
          fontWeight: "500",
          color: "#fff"
        }
      }
    },
    legend: {},
    tooltip: {
      enabled: false,
    },
    plotOptions: {
      column: {
        enableMouseTracking: false,
        stacking: "normal",
        groupPadding: 0.1,
        states: {
          inactive: {
            enabled: false
          },
          hover: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: true,
          useHTML: true,
          verticalAlign: 'top',
          y: 10,
          style: {
            fontSize: "16px",
            textOutline: "none",
            fontWeight: "500",
            lineHeight: "1",
            padding: "0",
            width: "70px",
            textAlign: "left",
          }
        }
      }
    },
    series: [{
      name: 'Pre-Tax Yield',
      data: [5, 3.5, 0]
    }, {
      name: 'After-Tax Yield',
      data: [4.5, 2.2, 3.2]
    }, ]
  }


);