Pie Chart: Dynamic Connector (3)

Change the dynamic connector into a triangle

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="position:relative;min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="messages">
    <ul></ul>
</div>

JavaScript

$(function () {
    $(document).ready(function () {
        var chart = null;

        var colors = Highcharts.getOptions().colors,
            categories = ['Unknown', 'Financial', 'Health Care', 'Consumer Staples', 'Financials', 'Government', 'Consumer, Cyclical', 'Water', 'Industrials', 'Energy'],
            name = 'Browser brands',
            data = [{
 y:137035233.58999997, 
 color: colors[0]},{
 y:28736444.19, 
 color: colors[1]},{
 y:28575275.450000003, 
 color: colors[2]},{
 y:19122734.88, 
 color: colors[3]},{
 y:11169122.530000001, 
 color: colors[4]},{
 y:11092322.979999999, 
 color: colors[5]},{
 y:10312093.72, 
 color: colors[6]},{
 y:9397487.790000001, 
 color: colors[7]},{
 y:8716427.23, 
 color: colors[8]},{
 y:7868746.680000001, 
 color: colors[9]}
            ];


        // Build the data array
        var browserData = [];
        for (var i = 0; i < data.length; i++) {

            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });

        }

        // Create the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            title: {
                text: null
            },
            series: [{
                name: 'Browsers',
                data: browserData,
                innerSize: '40%'
            }],
            tooltip: {
                valueSuffix: '%'
            },
            plotOptions: {
                pie: {
                    cursor: 'pointer',
                    dataLabels: {
                        connectorColor: 'white'
                    },
                    point: {
                        events: {
                            mouseOver: function () {
                                
                                if (!this.connector.dynamicConnector) {
                                var...