CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
av4625
av4625

Reputation: 353

Google Charts: Column chart invert y axis

I want to invert the y axis of my column chart so that lower numbers are displayed higher.

I have tried vAxis: { direction: -1 }

enter image description here

When I do this the columns come out of the top of the chart, I want the columns to come from the bottom of the chart and if they have a lower number they will be taller.

I read somewhere about negating the number and using number format to display them as positive but Im not sure how to do that.

I used the accepted answer to get what I wanted which was -

enter image description here

Edit: I created my own scale by finding the biggest of my set of data, the biggest var. Biggest is the biggest value of my data set and the objective is to make it just a little bit bigger to start the bottom of the chart at that, so that column has a little height on the chart instead of 0 height. Quite hard coded but worked for my datasets.

if (biggest <= 15)
{
    biggest = 20;
} else if (biggest <= 45)
{
    biggest = 50;
} else if (biggest <= 70)
{
    biggest = 75;
} else
{   
    if (Math.ceil(biggest / 100) * 100 === biggest)
    {
        // Round up to the next nearest 100
        biggest = Math.ceil(biggest / 100) * 100 + 100;
    } else
    {
        // Round up to the nearest 100
        biggest = Math.ceil(biggest / 100) * 100;
    }
}

I then dived it into 5 equal sections.

var temp1 = (biggest / 5);
var temp2 = (biggest / 5) * 2;
var temp3 = (biggest / 5) * 3;
var temp4 = (biggest / 5) * 4;

Then added it to the chart like:

var options = {
    title: 'Rank Comparison',
    bar: { groupWidth: '75%' },
    vAxis: {
        ticks: [
        // use object notation to provide y-axis labels
        {v: 0, f: biggest.toString()},
        {v: temp1, f: temp4.toString()},
        {v: temp2, f: temp3.toString()},
        {v: temp3, f: temp2.toString()},
        {v: temp4, f: temp1.toString()},
        {v: biggest, f: '0'}
      ]
    },
    chartArea: {
        left: '3.5%',
        width: '79%'
    },
    seriesType: 'bars',
    backgroundColor: 'transparent',
    legend: 
    {
        alignment: 'center'
    }
}

Upvotes: 2

Views: 1662

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    // use object notation to provide formatted number for tooltip
    ['Test', {v: 1, f: '-1'}],
    ['Test', {v: 2, f: '-2'}],
    ['Test', {v: 3, f: '-3'}]
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    vAxis: {
      ticks: [
        // use object notation to provide y-axis labels
        {v: 0, f: '0'},
        {v: 1, f: '-1'},
        {v: 2, f: '-2'},
        {v: 3, f: '-3'},
        {v: 4, f: '-4'}
      ]
    }
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions