Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="chartTrendsPublicationRankDetailed"></div>

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

JavaScript

Highcharts.chart('chartTrendsPublicationRankDetailed',
            {
                title: {
                    text: 'Messages count by months'
                },
                xAxis: {
                    gridLineWidth: 1,
                    labels: {
                        align: 'left',
                        x: -15,
                        y: 20
                    }
                },
                yAxis: [
                    {
                        title: {
                            text: null
                        },
                        labels: {
                            align: 'left',
                            x: -5,
                            y: 10,
                            format: '{value:.,0f}'
                        },
                        showFirstLabel: false
                    }, {
                        linkedTo: 0,
                        gridLineWidth: 0,
                        opposite: true,
                        title: {
                            text: 'Messages'
                        },
                        labels: {
                            align: 'right',
                            x: 5,
                            y: 10,
                            format: '{value:.,0f}'
                        },
                        showFirstLabel: false
                    }
                ],
                legend: {
                    align: 'left',
                    verticalAlign: 'top',
                    borderWidth: 0
                },
                tooltip: {
                    shared: true,
                    crosshairs: true
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function (e) {
                                    window.hs.htmlExpand(null,
                                        {
          ...