Drillup styling

author(s): Karol Kolodziej

by kzoon

HTML

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

<div id="container"></div>

CSS

#container {
    width: 600px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'category'
    },
    title: {
        text: 'Breadcrumbs, single button style'
    },
    series: [{
        name: 'Supply',
        data: [{
            name: 'Fruits',
            y: 5,
            drilldown: 'Fruits'
        },
        {
            name: 'Vegetables',
            y: 6,
            drilldown: 'Vegetables'
        },
        {
            name: 'Meat',
            y: 3
        }
        ]
    }],
    drilldown: {
             "breadcrumbs": {
                "scEnabled": true,
                "format": "&lt;&lt; Up",
                "position": {
                    "align": "right",
                    "verticalAlign": "middle"
                },
                "buttonTheme": {
                    "fill": "rgba(255,242,204,1)",
                    "states": { "hover": { "fill": "rgba(20,43,80,1)" } },
                    "stroke-width": 2,
                    "stroke": "rgba(177,177,177,1)",
                    "r": 8,
                    "style": {
                        "fontFamily": "'Courier New', Courier, monospace",
                        "fontSize": "20px",
                        "fontWeight": "bold",
                        "fontStyle": "italic",
                        "color": "rgba(255,0,0,1)"
                    }
                },
                "floating": true,
                "showFullPath": false
            },
        series: [{
            name: 'Fruits',
            id: 'Fruits',
            data: [{
                name: 'Citrus',
                y: 2,
                drilldown: 'Citrus'
            }, {
                name: 'Tropical',
                y: 5,
                drilldown: 'Tropical'
            },
            ['Other', 1]
            ]
        }, {
            name: 'Vegetables',
            id: 'Vegetables',
            data: [
                ['Potatoes', 2],
                ['Cucumber', 4]
         ...