Basic line

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<input value="click to focus">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu dui mauris. In sodales non lacus sed rhoncus. Praesent sit amet purus nec mauris lobortis commodo sit amet tempus nisi. Aenean felis nisi, consectetur vitae erat sagittis, tempus sollicitudin risus. Nunc auctor libero id ex egestas ornare. Vestibulum vel rhoncus lorem. Praesent sem elit, fermentum semper felis a, facilisis dictum lacus. Donec eu interdum mauris. Sed id nulla efficitur ex finibus scelerisque sed at erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus velit augue, hendrerit in nibh molestie, sagittis pretium arcu. Maecenas consequat pharetra turpis vel iaculis. Nam quam dui, convallis et magna ac, vehicula posuere nunc. Suspendisse semper sit amet lacus a scelerisque.

Curabitur mollis massa eu leo pretium commodo. Donec fringilla porta enim, et euismod magna. Integer et arcu tempor, blandit velit et, pellentesque velit. Praesent ut massa vehicula, faucibus magna ut, egestas ipsum. In elementum neque sit amet odio ultrices, ac volutpat purus varius. Donec accumsan ligula in laoreet faucibus. Cras vitae bibendum nisl. Suspendisse nec risus a sapien lacinia viverra. Praesent vulputate et sem ac ultricies.

Etiam enim urna, viverra sit amet tellus ut, luctus condimentum purus. Nunc sit amet justo quis justo viverra porttitor. Donec lobortis fermentum tincidunt. Nunc consequat, orci et maximus auctor, nulla sem iaculis sem, sed accumsan elit justo in nulla. Vivamus efficitur tellus urna. Vestibulum in ex sem. Vestibulum elementum velit dolor,...

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'U.S Solar Employment Growth by Job Category, 2010-2020',
        align: 'left'
    },

    subtitle: {
        text: 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>',
        align: 'left'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2020'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation & Developers',
        data: [43934, 48656, 65165, 81827, 112143, 142383,
            171533, 165174, 155157, 161454, 154610]
    }, {
        name: 'Manufacturing',
        data: [24916, 37941, 29742, 29851, 32490, 30282,
            38121, 36885, 33726, 34243, 31050]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 30000, 16005, 19771, 20185, 24377,
            32147, 30912, 29243, 29213, 25663]
    }, {
        name: 'Operations & Maintenance',
        data: [null, null, null, null, null, null, null,
            null, 11164, 11218, 10077]
    }, {
        name: 'Other',
        data: [21908, 5548, 8105, 11248, 8989, 11816, 18274,
            17300, 13053, 11906, 10073]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});