Long-run trends in human well-being

by Luke Muehlhauser

HTML

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

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

JavaScript

Highcharts.chart('container', {
    chart: {
        zoomType: 'xy',
        height: 700
    },
    title: {
        text: 'Long-run trends in human well-being'
    },

        plotOptions: {
        series: {
            connectNulls: true
        }
    },
    
    yAxis: [{ // 1st yAxis: Life expectancy at birth
        gridLineWidth: 0,
        title: {
            text: 'Life expectancy',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        

    }, { // 2nd yAxis: GDP/cap
        gridLineWidth: 0,
        title: {
            text: 'GDP/cap',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            format: '${value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
    }, { // 3rd yAxis: % not living in extreme poverty
        gridLineWidth: 0,
        title: {
            text: '% not living in extreme poverty',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        labels: {
            format: '{value}%',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
    }, { // 4th yAxis: Energy capture (kcals/cap/day)
        gridLineWidth: 0,
        title: {
            text: 'Energy capture (kcals/cap/day)',
            style: {
                color: Highcharts.getOptions().colors[3]
            }
        },
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[3]
            }
        },
    }, { // 5th yAxis: War-making capacity
        gridLineWidth: 0,
        title: {
            text: 'War-making capacity',
            style: {
               ...