Area range and line

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.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>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart demonstrating using arearange series in combination with line
        series. In this case, the arearange series are used to visualize the
        range within 2 standard deviations, while the line series shows
        the median height.
    </p>
</figure>

CSS

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

#container {
    height: 500px;
}

/* Custom CSS for the tooltip */
.highcharts-tooltip {
    caption {
        font-size: 0.9em;
        font-weight: 500;
        padding: 0.5em 0;
        border-bottom: 1px solid var(--highcharts-neutral-color-10);
        text-align: left;
    }

    th {
        font-weight: normal;
        padding: 0.15em 0;
        color: var(--highcharts-neutral-color-60);
    }

    td {
        font-weight: 500;
        padding: 0.15em 0 0.15em 2em;
        text-align: right;
    }

    tr:first-child td,
    tr:first-child th {
        padding-top: 0.75em;
    }

    tr:last-child td,
    tr:last-child th {
        padding-bottom: 0.25em;
    }

    tr.standard-deviation-row th {
        padding-left: 23px;
    }

    tr.standard-deviation-row td {
        font-weight: normal;
    }
}

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

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

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60, #666);
}

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

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    border: 1px solid var(--highcharts-neutral-color-20, #ccc);
    font-size: 0.9em;
    padding: 0.5em;
}

.highcharts-data-table thead...

TypeScript

(async () => {

    const csv = await fetch(
        'https://cdn.jsdelivr.net/gh/highcharts/highcharts@180fb2be6b/samples/data/who-height-for-age.csv'
    ).then(response => response.text());

    const dataTable = new Highcharts.Data({ csv })
        .getDataTable();

    Highcharts.chart('container', {

        dataTable,

        chart: {
            zooming: {
                type: 'x'
            }
        },

        title: {
            text: 'Expected Healthy Growth for Boys and Girls',
            align: 'left'
        },

        subtitle: {
            text: 'Ranges showing ± 2 standard deviations. Source: ' +
                '<a href="https://www.who.int/tools/child-growth-standards/standards/length-height-for-age"' +
                'target="_blank">WHO</a>.',
            align: 'left'
        },

        xAxis: {
            labels: {
                // Subtract 0 to turn '01' into 1
                format: '{subtract (value:%y) 0} years'
            },
            minPadding: 0,
            type: 'datetime'
        },

        yAxis: {
            lineWidth: 1,
            labels: {
                format: '{value} cm'
            },
            title: {
                text: 'Expected Height'
            }
        },

        tooltip: {
            crosshairs: true,
            headerFormat: `<table>
                <caption>Age {subtract (point.x:%y) 0}
                    years{#if (lt (point.x:%y) 6)},
                    {subtract (point.x:%m) 1} months
                {/if}</caption>`,
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            valueSuffix: ' cm'
        },

        plotOptions: {
            series: {
                dataMapping: {
                    x: 'ageMonths'
                },
                pointIntervalUnit: 'month',
                pointStart: '2000-01-01',
                relativeXValue: true
            },
            line: {
                lineWidth: 3,
            ...