CODEWITHSUNDEEP
javascriptchartsformattinggoogle-visualization
user2881322
user2881322

Reputation:

how to remove the y-axis line and format the value of the y-axis in google column chart

Im using google column chart in my application in my chart i need to remove the tiny space between my blue and grey bars and also to format the y axis values. Please suggest me, how to remove that tiny gap between them. My Chart enter image description here

Code for the chart 

google.load("visualization", "1", {packages: ["columnchart"]});                
var datum=[];
                        datum=[[2,15,25]];
var data = google.visualization.arrayToDataTable([['column1', 'column2', 'column3']].concat(datum), false);
                            var options = {
                            legend: {position: 'none'},
                            colors: ['3399FF', 'C0C0C0'],
                            tooltip: {trigger: 'none'},
//                            vAxis: {minValue: 0, maxValue: maxValue, ticks: tick, format: '$'}
                            };
                                    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
                            chart.draw(data, options);

Updated

How to remove the yaxis line and need to format the y axis value like $10, $15, $30. Is there any way to do that in column chart package. The link i'have refered to do the chart is this

Upvotes: 3

Views: 854

Answers (2)

einsA
einsA

Reputation: 931

You can add the following to your options object: bar: {groupWidth: '100%'}.

This will remove the gap between your gray and your blue bar.

All options are also listed in the documentation.

Upvotes: 1

asgallant
asgallant

Reputation: 26330

First off, don't use the old version of the ColumnChart; it is deprecated and doesn't offer any features that the newer version doesn't also have. Load it like this:

google.load('visualization', '1', {packages: ['corechart']});

To format the axis values, you need to use the vAxis.format option:

var options = {
    legend: {position: 'none'},
    colors: ['3399FF', 'C0C0C0'],
    tooltip: {trigger: 'none'},
    vAxis: {
        format: '$#'
    }
};

Upvotes: 0

Related Questions