html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // add data

  let data = [

    { x: "Managing the loan or lease", value: 15265 },

    { x: "Problems when you are unable to pay", value: 7678 },

    { x: "Taking out the loan or lease", value: 4370 },

    { x: "Shopping for a loan or lease", value: 2029 },

    { x: "Managing the line of credit", value: 806 },

    { x: "Other issues", value: 1427 }

  ];

​

  // create a pareto chart with the data

  let chart = anychart.pareto(data);

  // set a pareto column series

  let column = chart.getSeriesAt(0);

  // customize the column colors

  // fill

  column.fill(function () {

    if (this.rf < 10) {

      return "#b5cfa8";

    }

    return "#57c478";

  });

  // stroke

  column.stroke(function () {

    if (this.rf < 10) {

      return "#b5cfa8 ";

    }

    return "#57c478";

  });

  // set a pareto line series

  let line = chart.getSeriesAt(1);

  // customize the line stroke

  line.stroke("#c04d3b");

  // name the measure axis

  chart.yAxis(0).title("Issue frequency");

  // name the cumulative percentage axis

  chart.yAxis(1).title("Cumulative percentage");

  // customize the column label format

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

  // customize the tooltip format

  // column series

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

  // line series

  line.tooltip().format("Cumulative frequency: {%CF}% \n Relative frequency: {%RF}%");

  // set the tick interval

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

  // create the first horizontal line marker

  chart

    .lineMarker(0)

    .axis(chart.yAxis(1))

    .value(20)

    .stroke("#A5B3B3", 1, "10 2", "round");

​

  // create the second horizontal line marker

  chart

    .lineMarker(1)

    .axis(chart.yAxis(1))

    .value(80)

    .stroke("#A5B3B3", 1, "10 2", "round"); 

​

  // add a crosshair

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

  // enable the stagger mode for the x-axis labels

  chart.xAxis().staggerMode(true);

  // configure the stagger mode

  chart.xAxis().staggerLines(2);

  // add a chart title

  chart

    .title()

    .enabled(true)

    .useHtml(true)

    .text(

      '<span style = "color: #111; font-size:20px; margin-bottom:10px; dy:20px">Consumer Loan Customer Complaints (CFPB)</span>' +

        '<br/><span style="color:#57c478; font-size: 15px;">The top 2 issues make up almost 80% of all the issues identified in consumer complaints</span>'

    );

​

  // set the container element id for the chart

  chart.container("container");

​

  // initiate the pareto chart drawing

  chart.draw();

});