Pareto 80-20 rule

Using Xaxis and plotlines

by amrutaJgtp

HTML

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

CSS

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

JavaScript

$(function() {
  $("#container").mousemove(move);

  var chart = new Highcharts.chart('container', {
    chart: {
      renderTo: 'container',
      type: 'column',
      zoomType: 'xy'
    },
    title: {
      text: 'Restaurants Complaints'
    },
    xAxis: [{
      title: {
        text: null
      },
      categories: ['Overpriced', 'Small portions', 'Wait time', 'Food is tasteless', 'No atmosphere', 'Not clean', 'Too noisy', 'Unfriendly staff']
    }],
    yAxis: [{
      title: {
        text: ''
      }
    }, {
      title: {
        text: ''
      },
      minPadding: 0,
      maxPadding: 0,
      max: 100,
      min: 0,
      opposite: true,
      labels: {
        format: "{value}%"
      }
    }],
    series: [{
      type: 'pareto',
      name: 'Pareto',
      yAxis: 1,
      zIndex: 10,
      baseSeries: 1
    }, {
      name: 'Complaints',
      type: 'column',
      zIndex: 2,
      data: [755, 222, 151, 86, 72, 51, 36, 10]
    }]
  });


  function move(event) {
    var x = event.pageX,
      y = event.pageY,
      path = ['M', chart.plotLeft, y,
        'L', chart.plotLeft + chart.plotWidth, y,
        'M', x, chart.plotTop,
        'L', x, chart.plotTop + chart.plotHeight
      ];

    if (chart.crossLines) {
      // update lines
      chart.crossLines.attr({
        d: path
      });
    } else {
      // draw lines
      chart.crossLines = chart.renderer.path(path).attr({
        'stroke-width': 2,
        stroke: 'green',
        zIndex: 1
      }).add();
    }

    if (chart.crossLabel) {
      // update label
      chart.crossLabel.attr({
        y: y + 6,
        text: chart.yAxis[0].toValue(y).toFixed(2)
      });
    } else {
      // draw label
      chart.crossLabel = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotLeft - 40, y + 6).add();
    }
  }
});