html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  var data = [

    { x: 'Parking Difficult', value: 95 },

    { x: 'Sales Rep was Rude', value: 60 },

    { x: 'Poor Lighting', value: 45 },

    { x: 'Layout Confusing', value: 37 },

    { x: 'Sizes Limited', value: 30 },

    { x: 'Clothing Faded', value: 27 },

    { x: 'Clothing Shrank', value: 18 }

  ];

​

  // create pareto chart with data

  var chart = anychart.pareto(data);

  // set chart title text settings

  chart.title('Pareto Chart of Customer Complaints');

  // set measure y axis title

  chart.yAxis(0).title('Defect frequency');

  // cumulative percentage y axis title

  chart.yAxis(1).title('Cumulative Percentage');

  // set interval

  chart.yAxis(1).scale().ticks().interval(10);

​

  // get pareto column series and set settings

  var column = chart.getSeriesAt(0);

  column.fill(function () {

    if (this.rf < 10) {

      return '#E24B26';

    }

    return this.sourceColor;

  });

  column.stroke(function () {

    if (this.rf < 10) {

      return '#60727B';

    }

    return this.sourceColor;

  });

  column.labels().enabled(true).format('{%RF}%');

  column.tooltip().format('Value: {%Value}');

​

  // get pareto line series and set settings

  var line = chart.getSeriesAt(1);

  line

    .tooltip()

    .format('Cumulative Frequency: {%CF}% \n Relative Frequency: {%RF}%');

​

  // create first horizontal line marker

  chart

    .lineMarker(0)

    .axis(chart.yAxis(1))

    .value(10)

    .stroke('#A5B3B3', 1, '10 2', 'round'); // sets stroke

​

  // create second horizontal line marker

  chart

    .lineMarker(1)

    .axis(chart.yAxis(1))

    .value(60)

    .stroke('#A5B3B3', 1, '10 2', 'round'); // sets stroke

​

  // turn on the crosshair and set settings

  chart.crosshair().enabled(true).xLabel(false);

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});