Question

I can draw a side-by-side style column chart, and a stacked chart (all above x-axis), but not this one. How to make the value below x-axis still positive?

Answer 1

If you use the Column chart, set the isStacked property to true and multiply one gender’s value (female in your example) by -1 this will give you the bars you are looking for. next you need to alter the vAxis format to hide the negative symbol. There are some limitations to Google Charts that will make 100% of this request harder to achieve. The biggest one is that Google Charts only supports part of the ICU pattern set, and that means you can’t add the percent modifier to both the positive and negative values. To address this I’ve multiplied the percent value by 100 instead of fractions of 1.0 which would be technically correct. Also as you have pointed out the tooltips show negative values. to address this you need to give a formatted value for the Female datums that is the positive value (maybe you can include the % in that case, because it’s just a string and isn’t the charted value).

In the Google Code Playground try this:

function drawVisualization() {
  /* Create and populate the data table. */
  var data = {
    "cols":[
      {"id":"Age","label":"Age","type":"string"},
      {"id":"Female","label":"Female","type":"number"},
      {"id":"Male","label":"Male","type":"number"}
    ],"rows":[
      {
        "c":[
          {"v":13,"f":"13-17"},
          {"v":-11,"f":"11%"},
          {"v":2,"f":"2%"}]
      },
      {
        "c":[
          {"v":18,"f":"18-24"},
          {"v":-8,"f":"8%"},
          {"v":5,"f":"5%"}]
      },
      {
        "c":[
          {"v":25,"f":"25-34"},
          {"v":-6,"f":"6%"},
          {"v":8,"f":"8%"}]
      },
      {
        "c":[
          {"v":35,"f":"35-44"},
          {"v":-6,"f":"6%"},
          {"v":10,"f":"10%"}]
      },
      {
        "c":[
          {"v":45,"f":"45-54"},
          {"v":-8,"f":"8%"},
          {"v":12,"f":"12%"}]
      },
      {
        "c":[
          {"v":55,"f":"55-64"},
          {"v":-3,"f":"3%"},
          {"v":7,"f":"7%"}]
      },
      {
        "c":[
          {"v":64,"f":"64+"},
          {"v":-1,"f":"1%"},
          {"v":2,"f":"2%"}]
      }
    ]
  };

  /* Create and draw the visualization. */
  new google.visualization.ColumnChart(document.getElementById('visualization'))
    .draw(new google.visualization.DataTable(data), {
      title:"Coffee Consumption by age",
      isStacked: true,
      vAxis: {
        format: "##;##"
      },
      width:600, height:400,
      hAxis: {
        title: "Age"
      }
    }
  );
}

Here is what it looks like: