Highcharts Area with Negative Values Chart Example

Posted On : 17 Aug 2016

Total Views : 571

Keywords : How to implement area chart with negative values using highcharts, Highcharts area chart with negative values, Use highcharts to implement area chart with negative values

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts Area with negative values Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var chartype = {
                type: 'area'
            }
            var chartitle = {
                text: 'Area chart with negative values'
            }
            var chartsubtitle = {
                text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                    'thebulletin.metapress.com</a>'
            }
            var chartxaxis = {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            }
            var charcredits = {
                enabled: false
            }
            var chartseries = [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, -2, -3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, -2, 5]
            }]
            $('#container').highcharts({
                chart:chartype,
                title: chartitle,
                subtitle: chartsubtitle,
                xAxis:chartxaxis,
                credits: charcredits,
                series: chartseries
            });
        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Area with Negative Values

Highcharts Area with Negative Values Chart Example

Example

Output

Topics Covered

Search Terms

Area with Negative Values

Highcharts Area with Negative Values Chart Example

Example

Output

Share this example

Topics Covered

Search Terms