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

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.

<!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 :

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Bubble Chart Tutorial With Examples with demo
  2.   VU Meter Chart Tutorial With Examples
  3.   Semi Circle Donut Tutorial With Examples
  4.   Data Defined in a Html Table Chart Tutorial With Examples
  5.   3D Scatter Chart Tutorial With Examples
  6.   Solid Gauge Chart Tutorial With Examples
  7.   Basic Area Chart Tutorial With Examples
  8.   Donut Chart Tutorial With Examples with demo
  9.   Fixed Placement Columns Chart Tutorial With Examples
  10.   Tree Map and Levels Tutorial With Examples