Chapter 2: Formatting the Tooltips in HTML

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="border: 2px solid #a1a1a1; width:350; height: 150; border-radius: 3px; " id='container'></div>
</body>

JavaScript

$(document).ready(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            spacingRight: 30
        },
        title: {
            text: 'Market Data: Nasdaq 100'
        },
        subtitle: {
            text: '2011 - 2012'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                                                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            labels: {
                y: 17
            },
            gridLineDashStyle: 'dot',
            gridLineWidth: 1,
            lineWidth: 2,
            lineColor: '#92A8CD',
            tickWidth: 3,
            tickLength: 6,
            tickColor: '#92A8CD',
            minPadding: 0.04,
            offset: 1
        },
        yAxis: [{
            title: {
                text: 'Nasdaq index'
            },
            min: 2000,
            minorGridLineColor: '#D8D8D8',
            minorGridLineDashStyle: 'dashdot',
            gridLineColor: '#8AB8E6',
            alternateGridColor: {
                linearGradient: [0, 250, 500, 250],
                stops: [[0, '#FAFCFF'],
                                                                                        [0.5, '#F5FAFF'],
                                                                                        [0.8, '#E0F0FF'],
                                                                                        [1, '#D6EBFF']]
            },
            lineWidth: 2,
            lineColor: '#92A8CD',
            tickWidth: 3,
            tickLength: 6,
            tickColor: '#92A8CD'},
        {
            title: {
                text: 'Volume'
            },
            lineWidth: 2,
            lineColor: '#3D96AE',
            tickWidth: 3,
            tickLength: 6,
            tickColor: '#3D96AE',
            opposite: true}],
        credits: {
            enabled: false
        },
 ...