Bar with Negative Stack Chart Tutorial

Today, We want to share with you Bar with Negative Stack Chart Tutorial.In this post we will show you google chart bar height, hear for google column chart bar width we will give you demo and example for implement.In this post, we will learn about google chart display value on bar with an example.

Bar with Negative Stack Chart Tutorial

There are the Following The simple About google charts stacked bar chart Full Information With Example and source code.

As I will cover this Post with live Working example to develop Use bar chart to show negative stack values example, so the google chart bar height is used for this example is following below.

Highcharts Bar with Negative Stack Chart Example

index.html

Free Live Chat for Any Issue

Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.

Also Read This πŸ‘‰   Semi Circle Donut Tutorial With Examples

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Bar with negative stack chart - www.pakainfo.com</title>
    <script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
    <script src="https://www.pakainfo.com/jquery/js/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            // Age categories
            var categories = ['0-4', '5-9', '10-14', '15-19',
                    '20-24', '25-29', '30-34', '35-39', '40-44',
                    '45-49', '50-54', '55-59', '60-64', '65-69',
                    '70-74', '75-79', '80-84', '85-89', '90-94',
                    '95-99', '100 + '];
            var graphtype = {
                type: 'bar'
            }
            var graphTitle = {
                text: 'Population pyramid for Surat, 2045'
            }
            var graphchildtitle = {
                text: 'Source: <a href="http://populationpyramid.net/germany/2045/">Population Pyramids of the World from 1950 to 2100</a>'
            }
            var graphxaxis = [{
                categories: categories,
                reversed: false,
                labels: {
                    step: 1
                }
            }, { // mirror axis on right side
                opposite: true,
                reversed: false,
                categories: categories,
                linkedTo: 0,
                labels: {
                    step: 1
                }
            }]
            var graphyaxis = {
                title: {
                    text: null
                },
                labels: {
                    formatter: function () {
                        return Math.abs(this.value) + '%';
                    }
                }
            }
            var graphplotoptions = {
                series: {
                    stacking: 'normal'
                }
            }
            var graphtooltip = {
                formatter: function () {
                    return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                }
            }
            var graphseries = [{
                name: 'Male',
                data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
                    -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
                    -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
            }, {
                name: 'Female',
                data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
                    3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
                    1.8, 1.2, 0.6, 0.1, 0.0]
            }]
            $('#chart-full-content').highcharts({
                chart:graphtype,
                title: graphTitle,
                subtitle:graphchildtitle,
                xAxis:graphxaxis,
                yAxis: graphyaxis,
                plotOptions: graphplotoptions,
                tooltip:graphtooltip,
                series: graphseries
            });
        });
    </script>
 
</head>
<body>
    <div id="chart-full-content" style="min-width: 335px; height: 425px; margin: 0 auto"></div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Also Read This πŸ‘‰   Activity Gauge Chart Tutorial With Examples

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Highcharts stacked bar with negative and positive values example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.