Area with negative values

author(s): Torstein Hønsi

by Umair Rafiq

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>
    <p class="highcharts-description">
        A simple demo showcasing an area chart with negative values and multiple
        data series. Note that interacting with one data series will dim the
        others, making it easier to distinguish between them.
    </p>
</figure>

CSS

#container {
    height: 400px; 
}

.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: 'area'
  },
  title: {
    text: 'Area chart with negative values'
  },
  xAxis: {
    categories: ['0', '1', '2', '3','4']
  },
  credits: {
    enabled: false
  },
  /* plotOptions: {
        series: {
          stacking: "normal",
        },
      }, */
  series: [{
    name: 'Sales',
    data: [100, -100, 660, 1030]
  }, {
    name: 'Expenses',
    data: [400, 460, 120, 540]
  }]
});

console.log(chart);