Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
Series color:<div id="box1a" style="width:50px;height:50px"></div>
Series name:<div id="box1b"></div>

Series color:<div id="box2a" style="width:50px;height:50px"></div>
Series name:<div id="box2b"></div>

Series color:<div id="box3a" style="width:50px;height:50px"></div>
Series name:<div id="box3b"></div>


Series color:<div id="box4a" style="width:50px;height:50px"></div>
Series name:<div id="box4b"></div>

Series color:<div id="box5a" style="width:50px;height:50px"></div>
Series name:<div id="box5b"></div>

Series color:<div id="box6a" style="width:50px;height:50px"></div>
Series name:<div id="box6b"></div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie',
            events: {
                load: function(data){
                    series_data = this.series[0].data;
                    for (i=0;i<series_data.length;i++)
                    {
                    $("#box" + (i+1) + "a").css({'background-color': series_data[i].color});
                    $("#box" + (i+1) + "b").html(series_data[i].name);
                    }
                  
                }
            }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Deasdasdac'],
            labels: {
                enabled: false
            },
            tickLength:  0,
            lineWidth: 0
               
        },
        
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    color: 'yellow',
                    x: -25,
                    y: 4,
                    formatter: function() {
                        return this.x;
                    }
                }
            }
        },
        
       series: [{
                 
                

                name: 'Browser share',

                data: [

                    ['Firefox',   45.0],

                    ['IE',       26.8],

                    {

                        name: 'Chrome',

                        y: 12.8,

                        sliced: true,

                        selected: true

                    },

                    ['Safari',    8.5],

                    ['Opera',     6.2],

                    ['Others',   0.7]

                ]

            }]
    }
                                    
                                    
                                    );
});