Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

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

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

CSS

body{
  background:#000
}

JavaScript

Highcharts.chart('container', {
  credits: {
    enabled: false
  },
  chart: {
    type: "column",
    backgroundColor: "transparent"
  },
  title: {
    text: "",
    "style": {
      "color": "#FFF",
    },
  },
  subtitle: {
    text: ""
  },
  yAxis: {
    min: 5,
    max: 22,
    tickInterval: 1,
    gridLineWidth: 0,
    labels: {
      enabled: false,
    },
    title: {
      text: ''
    },
  },
  xAxis: {
    categories: ["Public Equities", "Private Equity"],
    lineColor: '#fff',
    labels: {
      style: {
        fontSize: '16px',
        fontWeight: '500',
        color: '#fff'
      },
    },
    title: {
      enabled: false,
    }
  },
  plotOptions: {
    column: {
      colorByPoint: true,
      borderWidth: 0,
      maxPointWidth: 200,
      dataLabels: {
        enabled: true,
        format: '{point.y:f}%',
        style: {
          fontSize: '18px',
          fontWeight: '500',
          color: '#fff',
          textShadow: false,

          textOutline: 'none',
        },
      },
    }
  },
  colors: ['#051312', '#4C9F8B'],
  series: [{
    data: [{
      y: 7,
      states: {
        hover: {
          color: '#1b5e5c'
        }
      }
    }, {
      y: 13,
    }],
  }],
  legend: {
    enabled: false
  },
  tooltip: {
    enabled: false,
  },
  responsive: {
    rules: [{
      condition: {
        maxWidth: 450
      },
      chartOptions: {
        plotOptions: {
          series: {},
        },
        series: [{
          dataLabels: {
            style: {}
          }
        }],
      }
    }]
  }
});