Highcharts Demo

author(s): Sebastian Bochan

by Rajesh Danabal

HTML

<script src="https://github.highcharts.com/master/highcharts.js"></script>
<script src="https://github.highcharts.com/master/modules/pareto.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    renderTo: 'container',
    type: 'column'
  },
  title: {
    text: 'Restaurants Complaints'
  },
  tooltip: {
    shared: true
  },
  xAxis: {
    categories: [
      'Overpriced',
      'Small portions',
      'Wait time',
      'Food is tasteless',
    ],
    crosshair: true
  },
  yAxis: [{
    title: {
      text: ''
    }
  }, {
    title: {
      text: ''
    },
    minPadding: 0,
    maxPadding: 0,
    max: 100,
    min: 0,
    opposite: true,
    labels: {
      format: "{value}%"
    }
  }],
  series: [{
      name: 'Complaints0',
      type: 'column',
      zIndex: 2,
      data: [155, 55, 231, 22]
    }, {
      name: 'Complaints1',
      type: 'column',
      zIndex: 2,
      data: [755, 222, 151, 86]
    },
    {
      type: 'pareto',
      name: 'Pareto0',
      yAxis: 1,
      zIndex: 10,
      baseSeries: 0,
			pointPlacement: -0.15
    }
  ]
});