Pareto chart

author(s): Sebastian Bochan

by saurabhkolhe

HTML

<script src="https://code.highcharts.com/11.1.0/highcharts.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

var chartOptions = {
    "chart": {
        "backgroundColor": "rgba(255,255,255,0)",
        "plotBackgroundColor": "rgba(255,255,255,0)",
        "zoomType": "xy",
        "resetZoomButton": {
            "theme": {
                "style": {
                    "visibility": "hidden"
                }
            }
        },
        "spacingBottom": 5,
        "spacingTop": 10,
        "alignTicks": false,
        "options3d": {
            "enabled": false
        },
        "zooming": {
            "mouseWheel": false
        }
    },
    "title": {
        "text": ".",
        "style": {
            "color": "rgba(255, 255, 255, 0)",
            "fontSize": "1px"
        },
        "floating": true,
        "margin": 0
    },
    "tooltip": {
        "enabled": true,
        "borderWidth": 1,
        "borderRadius": 1,
        "backgroundColor": "#ffffff",
        "style": {
            "color": "#000000",
            "fontSize": "1rem",
            "fontFamily": "Open Sans",
            "fontWeight": "normal",
            "fontStyle": "normal",
            "textDecoration": "none"
        },
        "useHTML": true,
        "shared": false,
        "crosshairs": [
            false,
            false
        ],
        "followPointer": true
    },
    "plotOptions": {
        "series": {
            "animation": {
                "duration": 700
            },
            "cursor": "pointer",
            "allowPointSelect": true,
            "showInLegend": true,
            "turboThreshold": 0,
            "stickyTracking": false,
            "events": {},
            "point": {
                "events": {}
            },
            "borderRadius": 0,
            "pointPadding": 0.1,
            "getExtremesFromAll": true
        }
    },
    "legend": {
        "enabled": true,
        "item": {},
        "borderWidth": 0,
        "layout": "horizontal",
        "eQLegendPlacement": "CHART",
        "backgroundColor": "rgba(255,255,255,0)",
       ...