Highcharts Demo

author(s): Torstein Hønsi

by VivekChandravathi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
        text: 'Revenue'
    },
 
  xAxis: {
    categories: ['€1000 - €1500', '€1850 - €2200', '€3342 - €1145', '€6755 - €1177', '€787 - €1234'],
    title: {
      text: 'Revenue Range'
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Supplier'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false,
  },
  tooltip: {
    headerFormat: '<b>No. of Suppliers:</b><br/>',
    pointFormat: '08'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      },
      
    }
  },
  series: [{
    name: '0 Star',
    data: [0, 0, 0, 0, 0]
  }, {
    name: '1 Star',
    data: [0, 0, 0, 0, 0]
  }, {
    name: '2 Stars',
    data: [0, 0, 0, 0, 0]
  }, {
    name: '3 Stars',
    data: [0, 0, 0, 0, 0]
  }, {
    name: '4 Stars',
    data: [0, 0, 0, 0, 0]
  }, {
    name: '5 Stars',
    data: [0, 0, 0, 0, 0]
  }]
});