Stacked area

author(s): Torstein Hønsi

by Guillaume Seguin

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A demo showing a stacked area chart, also sometimes referred to as a
        mountain chart. In a stacked chart, the data series values are added
        together to make up a total.
    </p>
</figure>

JavaScript

Highcharts.chart('container', {
  title: {},
  chart: {
    height: 370,
    style: {
      fontFamily: "Roboto, 'Helvetica Neue', Arial, sans-serif"
    },
    type: "area"
  },
  credits: {
    enabled: false
  },
  labels: {},
  legend: {
    enabled: true
  },
  tooltip: {
    useHTML: false,
    crosshairs: [
      true,
      true
    ],
    valuePrefix: "",
    valueSuffix: " €",
    valueDecimals: 0,
    shared: true,
    dateTimeLabelFormats: {
      millisecond: "%A, %b %e, %H:%M:%S.%L",
      second: "%A, %b %e, %H:%M:%S",
      minute: "%A, %b %e, %H:%M",
      hour: "%A, %b %e, %H:%M",
      day: "%A, %b %e, %Y",
      week: "Semaine du %A, %b %e, %Y",
      month: "%B %Y",
      year: "%Y"
    },
    xDateFormat: "%A, %b %e, %Y",
    split: true
  },
  yAxis: {
    labels: {
      format: "{value}",
      style: {
        color: "#242633"
      },
      useHTML: true
    },
    title: {
      text: "",
      style: {
        color: "#242633"
      }
    }
  },
  xAxis: {
    type: "datetime"
  },
  plotOptions: {
    area: {
      stacking: "normal"
    }
  },
  series: [
    {
      id: "ad",
      name: "AD",
      data: [
        {
          x: 1577835027225,
          y: 3
        },
        {
          x: 1577921427225,
          y: 0
        },
        {
          x: 1578007827225,
          y: 1
        },
        {
          x: 1578094227225,
          y: 0
        },
        {
          x: 1578180627225,
          y: 1
        },
        {
          x: 1578267027225,
          y: 4
        },
        {
          x: 1578353427225,
          y: 0
        },
        {
          x: 1578439827225,
          y: 3
        },
        {
          x: 1578526227225,
          y: 3
        },
        {
          x: 1578612627225,
          y: 2
        },
        {
          x: 1578699027225,
          y: 3
        },
        {
          x: 1578785427225,
          y: 1
        },
        {
          x: 1578871827225,
          y: 1
        },
       ...