Pareto v1

by jlbriggs

HTML

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

<div id="container" style="width:600px;height:400px;margin:1.5em 1em;"></div>

<script>
var d          = new Date();
var pointStart = d.getTime();
    //-------------------------------------------------------
//set a 'line' marker type for use in bullet charts 
Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};
//-------------------------------------------------------
Highcharts.setOptions({
    global: {
        useUTC:false
    },
    colors: [
        'rgba( 0,   154, 253, 0.9 )', //bright blue
        'rgba( 253, 99,  0,   0.9 )', //bright orange
        'rgba( 40,  40,  56,  0.9 )', //dark
        'rgba( 253, 0,   154, 0.9 )', //bright pink
        'rgba( 154, 253, 0,   0.9 )', //bright green
        'rgba( 145, 44,  138, 0.9 )', //mid purple
        'rgba( 45,  47,  238, 0.9 )', //mid blue
        'rgba( 177, 69,  0,   0.9 )', //dark orange
        'rgba( 140, 140, 156, 0.9 )', //mid
        'rgba( 238, 46,  47,  0.9 )', //mid red
        'rgba( 44,  145, 51,  0.9 )', //mid green
        'rgba( 103, 16,  192, 0.9 )'  //dark purple
    ],
    chart: {
        alignTicks:false,
        type:'',
        margin:[60,25,100,90],
        //borderRadius:10,
        //borderWidth:1,
        //borderColor:'rgba(156,156,156,.25)',
        //backgroundColor:'rgba(204,204,204,.25)',
        //plotBackgroundColor:'rgba(255,255,255,1)',
        style: {
            fontFamily: 'Abel,serif'
        },
        events:{
            load: function() {
                this.credits.element.onclick = function() {
                   ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);

body {
    font-family:Abel, Calibri, Helvetica, sans-serif;
    font-size:95%;
}

JavaScript

var chart;
var titleText    = 'Pareto Chart Test';
var subTitleText = 'Auto-calculated cumulative percent line';
var type 		     = 'column';
var dataPoints   = 12;
var categories   = alphaCats(dataPoints);

$(function() {
  $('#container').highcharts({
    chart: { 
    	type: type, 
      alignTicks: false,
      marginRight:50
    },
    title: { text: titleText },
    subtitle: { text: subTitleText  },
    legend: { enabled: true },
    tooltip: {
      shared: true,
      crosshairs: true,       
    },
    plotOptions: {
      line: { 
      	color: Highcharts.getOptions().colors[2],
      	lineWidth: 2,
        marker: {
        	enabled: true,
          radius: 2,
          lineWidth: 0.5,
          lineColor: 'rgba(255,255,255,0.75)'
        }
      }
    },
    xAxis: { 
      categories: categories,
      labels: { style: { fontWeight: 'bold' } }
    },
    yAxis: [{
    	//endOnTick: false,
      maxPadding:0.02
    },{
    	opposite: true,
      min:0,
      //max:100,
      maxPadding:0.02,
      endOnTick:false,
      title: { text: null },
      labels: {
      	formatter: function() {
        	var val = Math.round(this.value);
          return this.isLast ? val + '%' : val;
        }
      }
    }]
  });	
  chart = $('#container').highcharts();
  
  //process the data
  var data         = randomData(dataPoints, true, 500);
  data.sort(numSortR);
  var sum          = dataSum(data);
  var cumuData     = cumulativePercent(data, sum);
	var pcut         = getPercentIndex(cumuData, 80);
	
	//add the series
  chart.addSeries({ name: 'Data', data: data });
  chart.addSeries({ 
  	yAxis: 1,
    name: 'Cumulative %',
    type: 'line',
    data: cumuData 
  });
  
  //add 80% band and label
  chart.xAxis[0].addPlotBand({
  	from:-0.5,
    to:pcut.index,
    color: 'rgba(204,204,204,0.25)'
  });
  chart.xAxis[0].addPlotLine({
  	value:pcut.index,
    width:0.5,
    color: 'rgba(0,0,0,0.25)',
    label: {
    	text: Math.round(pcut.value)+'% / '
          ...