Highcharts (Link Categoria Popup)

author(s): Rogério Saraceni

by Rogério Saraceni

HTML

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<div id="chart-shopping-executados" class="box-chart"></div>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css');
.box-chart {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 700px;
    height: 500px;
}

.box-chart a {
    text-decoration: underline;
    font-weight: bold;
}

JavaScript

var categoryLinks = {
    'Jan': 'http://www.bing.com/search?q=foo',
    'Fev': 'http://www.bing.com/search?q=foo',
    'Mar': 'http://www.bing.com/search?q=foo',
    'Abr': 'http://www.bing.com/search?q=foo',
    'Mai': 'http://www.bing.com/search?q=foo',
    'Jun': 'http://www.bing.com/search?q=foo',
    'Jul': 'http://www.bing.com/search?q=foo',
    'Ago': 'http://www.bing.com/search?q=foo',
    'Set': 'http://www.bing.com/search?q=foo',
    'Out': 'http://www.bing.com/search?q=foo',
    'Nov': 'http://www.bing.com/search?q=foo',
    'Dez': 'http://www.bing.com/search?q=foo'
};

Highcharts.chart('chart-shopping-executados', {
    chart: {
        type: 'column'
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Executados x Não executados'
    },
    xAxis: {
        categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],

        labels: {
            formatter: function() {
                return '<a class="popup_itens_shopping" href="' + categoryLinks[this.value] + '">' +
                    this.value + '</a>';
            },
            useHTML: true
        }

    },


    yAxis: {
        min: 0,
        max: 100,
        gridLineColor: 'transparent',
        title: {
            enabled: false
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true,

    },
    plotOptions: {
        column: {
            stacking: 'percent',
            dataLabels: {
                enabled: true,
                format: '{y} %',
                style: {
                    textOutline: false,
                    fontWeight: 'normal',
                    fontSize: '10px',
                    color: "#000"
                }
            },
        }
    },
    series: [{
        name: 'Executados',
        color: '#6FBF73',
        data: [70, 30, 40, 70, 20, 50, 30, 40, 70,...