Highcharts 3 looks for Highcharts 4

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container-line" class="container"></div>
<div id="container-column" class="container"></div>
<div id="container-pie" class="container"></div>
<div id="container-stock" class="container"></div>

CSS

body {
    background: #e0e0e0;
}
.container {
    min-width: 300px;
    max-width: 600px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

// Set default options to the values for HC3
function Highcharts3(H) {

    var buttonGradient;

    H.setOptions({
        colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970',
            '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
        /* now ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', 
                '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1']*/
        chart: {
            borderRadius: 5 // now 0
        },
        title: {
            style: {
                color: '#274b6d', // now #333333
                fontSize: '16px' // now 18px
            }
        },
        subtitle: {
            style: {
                color: '#4d759e' // now #555555
            }
        },
        legend: {
            borderRadius: 5, // now 5
            borderWidth: 1, // now 0
            itemDistance: 8, // now 20
            itemStyle: {
                color: '#274b6d', // now #333333
                fontWeight: 'normal' // now bold
            },
            margin: 10, // now 20
            symbolRadius: 2 // now 0
        },
        tooltip: {
            backgroundColor: 'rgba(255,255,255,.85)', // now 'rgba(249, 249, 249, .85)'
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
            // now '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'
        },
        xAxis: {
            tickLength: 5, // now 10
            title: {
                style: {
                    color: '#4d759e', // now #707070
                    fontWeight: 'normal' // now bold
                }
            }
        },
        yAxis: {
            tickLength: 5, // now 10
            title: {
                style: {
                    color: '#4d759e', // now #707070
                    fontWeight: 'normal' // now bold
                }
            }
        },
        plotOptions: {
            series: {
                states: {
       ...