Highcharts with custom legend buttons

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: 400px; margin: 0 auto"></div>
<div id="legend">
<a href="#" id="a1">CPM</a>

<a href="#" id="a2">IPMS</a>

<a href="#" id="a3">SPEND</a>
    <a>BY TIME</a>
</div>

CSS

#legend {
    position:absolute;
    top: 30px;
    left: 70px;
    z-index: 99999;
    background: black;
    color: #CCC;
}
#legend a {
    float: left;
    margin: 5px;
    text-decoration: none;
    color: black;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 0 5px;
    background: #CCC;
}
.leg-clicked {
    color: #CCC !important;
}
#legend #a1 {
    background: rgb(87, 188, 0);
}
#legend #a2 {
    background: rgb(213, 156, 72);
}
#legend #a3 {
    background: rgb(12, 170, 226);
}
.highcharts-legend{display: none;}

JavaScript

$(function () {

    $("#a1").click(function () {
        $('.highcharts-legend-item:nth-child(1)').click();
        $(this).toggleClass("leg-clicked");
    });
    $("#a2").click(function () {
        $('.highcharts-legend-item:nth-child(2)').click();
        $(this).toggleClass("leg-clicked");
    });
    $("#a3").click(function () {
        $('.highcharts-legend-item:nth-child(3)').click();
        $(this).toggleClass("leg-clicked");
    });

    $('#container').highcharts({
        chart: {
            backgroundColor: '#CCC',
            type: 'area'
        },
        title: {
            text: '' //'CPM IMPS SPEND BY TIME'
        },
        legend: {
           enabled: true,
        },

        subtitle: {
            text: ''
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return 'Week ' + this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return this.value / 1000 + 'k';
                }
            },

            gridLineWidth: 0,
            minorGridLineWidth: 0
        },
        tooltip: {
            pointFormat: '{series.name}  <b>{point.y:,.0f}</b><br/>:{point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'CPM',
            data: [20434, 20434, 20434, 20434, 20434, 20434, 20434, 20434, 20434, 20434, 20434, 20234,
            20434, 20434, 20434,...