Monthly Average Temperature

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

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
L'enneigement a connu une très forte baisse durant les années 1990. À partir de cette période, la neige ne recouvre que très peu les pistes pendant plusieurs années (hors exceptions). Une évolution positive est observable depuis le milieu des années 2000, mais rien qui rattrape les scores d'enneigement pré-1990.--Par Erwan Dodard
    </p>
</figure>

CSS

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

.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 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 {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
    background: var(--highcharts-neutral-color-3, #f7f7f7);
}

.highcharts-description {
    margin: 0.3rem 10px;
}


@media (prefers-color-scheme: dark) {
    body {
        background-color: #141414;
        color: #ffffff;
    }
}

JavaScript

// Data retrieved https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Epaisseur moyenne de neige selon les années dans 10 stations de ski du massif des Vosges'
    },
    subtitle: {
        text: 'Source: ' +
            '<a href="https://www.data.gouv.fr/datasets/donnees-climatologiques-de-base-quotidiennes/" ' +
            'target="_blank">data.gouv'
    },
    xAxis: {
        categories: [
            '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981',
       '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989',
       '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997',
       '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005',
       '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013',
       '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021',
       '2022', '2023', '2024', '2025'
    

        ]
    },
    yAxis: {
        title: {
            text: 'épaisseur (en cm)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: 'Epaisseur de neige Mars',
        data: [
           12.2,10.46,5,1.6,37.2,0.3,5.8,12.1,21.2,4,57.1,4.6,52.5,9.5,56.5,6.5,0.8,0.3,1.7,3.2,1.5,2.9,3.3,0.1,0.6,17.7,4,4.3,2.7,5.6,6.8,20.39,60.8,7.3,4.6,24.7,19.5,0.3,9.1,18.6,8.6,12.7,31.8,10.5,19.6,13.8,6.2,10.4,6.1,1.7,0.5,2.4
        ]
     }, {
        name: 'Epaisseur de neige Janvier',
        data: [
                    ...