Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="smallchart3" style="height: 400px"></div>
<div id="smallchart4" style="height: 400px"></div>

JavaScript

var chart_PortfolioDetailsDistribution;
var popupChart;

$(document).ready(function () {
    chart_PortfolioDetailsDistribution = new Highcharts.Chart({
        chart:{animation:false,renderTo:'smallchart3'}
        ,title:{text:'Distribution'}
        ,tooltip:{headerFormat:'',pointFormat:'<b>{point.name}</b>: {point.y}'}
        ,legend:{enabled:false}
        ,credits:{enabled:false}
        ,plotOptions:{series:{animation:false,borderWidth:0,dataLabels:{format:'<b>{point.y}</b>'}
        ,groupPadding:0,pointPadding:0}
    }
    ,yAxis:{
        title:{text:null}
    }
    ,xAxis:{
        labels:{enabled:false,rotation:-90}
        ,title:{text:null}
        ,type:'category'
    }
    ,series:[{
        data:[['<-10%',0],['<-5%',3],['<-2.5%',3],['<-1%',2],['<0%',10],['>0%',3],['>1%',0],['>2.5%',0],['>5%',0],['>10%',0]],
        name:'Portfolio',
        type:'column'}]
    });
    /*
    popupChart = new Highcharts.Chart(Highcharts.merge(chart_PortfolioDetailsDistribution.options, {
            chart: { renderTo: 'smallchart4' },
            xAxis: [{ labels: { enabled: true }}],
            legend: { enabled: true },
            plotOptions: { series: { dataLabels: { enabled: true } }}
        }));
        */
});