Highcharts work

author(s): Torstein Hønsi & Vasiliy Onoprienko

by Vasiliy Onoprienko

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<div id="container" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
<div id="container3" style="height: 500px"></div>

CSS

#container, #container2, #container3  {
            min-width: 380px;
            max-width: 380px;
            margin: 0 auto;
        }
        .highcharts-yaxis-labels, .highcharts-grid {
            visibility: hidden;
        }
        .label {
            text-align: left;
            width: 60px;
        }

JavaScript

$(function () {
        $('#container').highcharts({

                    chart: {
                        type: 'column',
                        events: {
                            load: function (event) {
                                // modify the legend symbol from a rect to a line
                                $('.highcharts-legend-item rect').attr('visibility', 'hidden');
                            }
                        },
                        options3d: {
                            enabled: !0,
                            alpha: 15,
                            beta: 10,
                            viewDistance: 125,
                            depth: 0
                        },
                        marginTop: 80,
                        marginRight: 20
                    },
                    legend: {
                        enabled: false
                    },
                    title: {
                        text: 'в долларах США',
                        align: 'left',
                        x: 70
                    },
                    subtitle: {
                        text: 'на 01.01.2014\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0на 01.01.2015',
                        floating: true,
                        align: 'left',
                        x: 70,
                        y: 60,
                        style: {
                            fontSize:'14px'
                        }
                    },
                    xAxis: {
                        categories: ['Всего в экв.<br>млрд рублей<br>541,9', 'Всего в экв.<br>млрд рублей<br>1012,3'],
                        lineColor: 'Blue',
                        lineWidth: 2,
                        labels: {
                            //align: 'center'
                            useHTML:true,
                            formatter:function(){

                                return '<div class="label">'+this.value+'</div>';
  ...