An SVG Pareto Bar chart

A Pareto chart is one where the values are represented by bars that are arranged starting from the left and going to the right in descending order of magnitude. At the same time a line representing the incrementing total of all the bars is overlaid on top. This can be easily accomplished in RGraph by overlaying a Line chart onto a Bar chart and arranging the data appropriately. As you can see see from the below code there's not a lot involved in its creation.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.bar.js"></script>
<script src="RGraph.svg.line.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px">
    <div style="width: 650px; height: 300px" id="chart-container"></div>
</div>
This is the code that generates the chart:
<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [55,15,12,7,6,4,1],
        options: {
            yaxisScaleMax: 100,
            hmargin: 15,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colors: ['Gradient(red:red:white)'],
            shadow: true,
            yaxis: false,
            xaxis: false,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        }
    }).wave();

    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [55,70,82,89,95,99,100],
        options: {
            hmargin: 45,
            colors: ['black'],
            tickmarksStyle: 'endcircle',
            tickmarksSize: 3,
            backgroundGrid: false,
            xaxis: false,
            yaxis: false,
            shadow: true
        }
    }).trace();
</script>