Highcharts Demo

author(s): Torstein Hønsi

by Ying Chor Ding

HTML

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

<div id="asd" style="min-width: 310px;
	max-width: 800px;
	height: 450px;
	margin: 0 auto"></div>

JavaScript

Highcharts.chart('asd', {

		chart: {
								backgroundColor:'#f4f3ef',
            },
            title: {
                text: 'Net Profit'
            },
            xAxis: [{
                categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' ]
            }],
            yAxis: [{ // Primary yAxis
                title: {
                    text: 'Net Profit (Million THB)',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Earning Per Share (Baht/Share)',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
						plotOptions: {
							column: {
								pointPadding: 0,
								borderWidth: 0,
								dataLabels: {
				        	enabled: true,
									inside: true,
									y: -4,
				        },
							},
							spline: {
								dataLabels: {
				        	enabled: true,
									rotation: 315,
									y: -15,
									x: 5
				        },
							}
						},
            series: [{
                name: 'Net Profit',
                type: 'column',
                data: [ 4.59, -1.85, -6.02, -2.75, -5.73, 0.86, -2.44, 2.24, 1.85, -1.86, -3.43, 0],
                tooltip: {
                    valueSuffix: ' Million THB'
                }
    
            }, {
                
								name: 'Earning Per Share',
                type: 'spline',
                yAxis: 1,
                data: [-7, -5, 6, -2, -5, -7, 1, -8, 9, 0, 9, 2],
                tooltip: {
                    valueSuffix: ' Baht/Share'		
                }
            }]
        });