Timeline

author(s): Daniel Studencki

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/themes/brand-dark.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

#container {
    width: 900px;
    height: 500px;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'timeline',
        backgroundColor: '#1d1d1d'
    },
    xAxis: {
		labels: {
        	enabled: false
        },
        lineWidth: 0,
		plotLines: [{
        	value: 2.5,
            dashStyle: 'dot',
            label: {
            	text: 'Scheduled weekly meetings',
                rotation: 0,
                verticalAlign: 'bottom',
                y: -5,
                style: {
                	color: '#ddd'
                }
            }
        }]        
    },
    credits: {
    	enabled: false
    },
    exporting: {
    	enabled: false
    },
    yAxis: {
        visible: false
    },
    title: {
        text: null
    },
    series: [{
    	dataLabels: {
        	color: '#fff',
            backgroundColor: '#2a2a2a',
	        style: {
            	backgroundColor: 'black'
            }
        },
        data: [{
            name: 'Brainstorm',
            label: 'Fall 2021: Ted and I talk about doing a presentation'
        }, {
            name: 'Paper submitted',
            label: 'Late september 2021: Conference paper submitted',
        }, {
            name: 'Paper accepted',
            label: 'Early november 2021: Conference paper accepted'
        }, {
            name: 'Expert meeting',
            label: 'Early December 2021: Met with Dr. John Gardner'
        }, {
            name: 'Panic',
            label: 'January 2022: Realizing we bit off too much'
        }, {
            name: 'Tactile',
            label: 'Late February 2022: Met with Schleppenbach & Dr. Williams'
        }, {
            name: 'User testing',
            label: 'Late Feb/early March 2022: 6 user testing sessions with blind users'
        }, {
            name: 'Presentation',
            label: 'March 18th: Our presentation'
        }]
    }]
});