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>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Most Frequent Headlines from HackerNews'
    },
    subtitle: {
        text: '2010-2015 quarter periods'
    },
    xAxis: {
        categories: ['2010q1','2010q2','2010q3','2010q4','2011q1','2011q2','2011q3','2011q4','2012q1','2012q2','2012q3','2012q4','2013q1','2013q2','2013q3','2013q4','2014q1','2014q2','2014q3','2014q4']
    },
    yAxis: {
        title: {
            text: 'Number of Posts'
        },
    },
    tooltip: {
        crosshairs: true,
        shared: false
    },
    plotOptions: {
        spline: {
        		lineWidth: .4,
            color: '#222222',
            marker: {
                radius: 1,
                lineColor: '#666666',              
            },
            states: {
                  hover: {
                      lineWidthPlus: 2
                  }
              },
              
           events: {
                    mouseOver: function () {
                        
                        this.chart.series[this.index].update({
                        	color: '#3186ad'
                        });
                    },
                    mouseOut: function () {
                        
                        this.chart.series[this.index].update({
                        	color: "#222222"
                        });                           
                    }
                }   
              
        }        
    },
    
    annotations: [
    	{
        labelOptions: {
            backgroundColor: 'rgba(255,255,255,0.5)',
            verticalAlign: 'left',
            y: -45
        },
        labels: [{
            point: {
                xAxis: 0,
                yAxis: 0,
                x: 5,
                y: 95
            },
            text: 'Hispanic telenovellas,<br>suddenly...'
        }]
    },{
        labelOptions: {
            verticalAlign:'left',
            y: -75
        },
       ...