AnyChart Pareto

HTML

<script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
<div id="chart_div"></div>

JavaScript

anychart.onDocumentReady(function () {
    var chart = anychart.fromJson({
        chart: {
            container: "chart_div",
            type: "pareto", 
         		animation: { enabled : true }, // bars not rendered with animation!
            legend: { position: "bottom" },
            data: [
              {x: "Defect 1", value: 19},
              {x: "Defect 2", value: 9},
              {x: "Defect 3", value: 28},
              {x: "Defect 4", value: 87},
              {x: "Defect 5", value: 14},
            ]
        }
    });
    chart.draw();
    
    // need to change series names AFTER chart rendered
   	chart.getSeriesAt(0).name("US");
   	chart.getSeriesAt(1).name("Cumulative %");
});