HighCharts - Spline

by arvillarruel

HTML

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

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            marginRight: 130,
            marginBottom: 25.
            
        },
        title: {
            text: 'Academy Award Nominations',
            x: -20 //center
        },
        subtitle: {
            text: 'From 1920s to 2000s',
            x: -20
        },
        xAxis: {
            categories: ['1920s', '1930s', '1940s', '1950s', '1960s', '1970s',
                '1980s', '1990s', '2000s']
        },
        yAxis: {
            title: {
                text: 'nominations'
            },
            min: 0
        },
        tooltip: {
            formatter: function() {
                return 'Movies containing the word: <b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +' nominations';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'cat',
            data: [5,10,20,6,8,12,3,1,2]
        }, {
            name: 'dog',
            data: [0,2,5,15,3,5,22,4,15]
        }, {
            name: 'dog AND cat',
            data: [0,0,1,3,0,5,4,0,1]
        }]
    });
});