Marimekko Study

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area', animation: false,
            plotBorderWidth: 1,
            plotBorderColor: '#C0D0E0'
        },
        title: {
            text: 'Marimekko Study'
        },  legend: {
            align: 'right',
            verticalAlign: 'middle', layout:'vertical'
        },
        xAxis: {
            min: 0,
            max: 100,
            tickPositions: [26, 65, 90],
            tickLength: 0,
            plotLines: [{
                color: '#C0D0E0',
                width: 1,
                value: 52.1,
                zIndex: 5
            }, {
                color: '#C0D0E0',
                width: 1,
                value: 80.1,
                zIndex: 5
            }],
            labels: {
                formatter: function () {
                    switch (this.value) {
                        case 26:
                            return 'Milk: $2.5m (52%)';
                            break;

                        case 65:
                            return 'Flavored Drinks: $1.5m (28%)';
                            break;
                        case 90:
                            return 'Yogurt:  $1.0m (20%)';
                            break;
                    }
                    return 'xxxx';
                }
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            gridLineWidth: 0,
            title: {
                enabled: false
            }
        },
        tooltip: {
            shared: false,
            followPointer: false,
            formatter: function () {
                return this.series.name + ': ' + this.y;
            }

        },
        plotOptions: {
            area: {
                trackByArea: true,
                animation: false,
                step: true,
                stacking: 'normal',
                lineColor: '#C0D0E0',
                lineWidth: 1,
               ...