Spline with symbols

author(s): Torstein Hønsi

by oysteinmoseng

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>

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

</figure>

CSS

.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 #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

var chart = Highcharts.chart('container', {
    chart: {
      type: 'line'
    },
    title: {
      text: 'US Population Over Time'
    },
    xAxis: {
      categories: ['1790', '1800', '1810', '1820', '1830', '1840', '1850', '1860', '1870', '1880', '1890', '1900', '1910', '1920', '1930', '1940', '1950', '1960', '1970', '1980', '1990', '2000', '2010', '2020']
    },
    yAxis: {
      title: {
        text: 'Population (millions)'
      }
    },
    series: [{
      name: 'US Population',
      data: [3.9, 5.3, 7.2, 9.6, 12.9, 17.1, 23.2, 31.4, 38.6, 50.2, 62.9, 76.0, 92.2, 106.5, 123.2, 131.7, 150.7, 179.3, 203.3, 221.5, 248.7, 281.4, 308.7, 322.8, 351.4]
    }],
    accessibility: {
      point: {
        valueDescriptionFormat: '{index}. {x}, {y} millions'
      },
      description: 'This chart shows the population of the United States over time. The x-axis represents the census year, while the y-axis represents the population in millions. The population data starts in 1790 with a population of 3.9 million and ends in 2020 with a population of 351.4 million.'
    }
  });