How to Remove the X-Axis from a Bar Chart Produced by Google'S Visualization API

how to disable the x axis and y axis line in google api line chart

you cant remove or disable your x and y axis in google api the alter way is to set the baselineColor and gridlineColor same as the background color and set the textPosition to none.

vAxis:{
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none'
}

How to remove y-axis values from google chart

use the following vAxis option...

textPosition: 'none'

see following working snippet...

google.charts.load('current', {  packages: ['corechart']}).then(function () {  var data = google.visualization.arrayToDataTable([    ['x', 'y0', 'y1', 'y2'],    [0, 10, 12, 18],    [2, 16, 18, 19],    [4, 18, 19, 24],    [6, 26, 28, 22],    [8, 13, 15, 21],    [10, 32, 31, 33]  ]);
var options = { chartArea: { width: '80%' }, colors: ['#00ff00', '#ff0000'], vAxis: { textPosition: 'none', title: 'Satisfaction', maxValue: 100, minValue: -100, gridlines: { count: 2 } }, legend: { position: 'bottom' } };
var chart = new google.visualization.LineChart(document.getElementById('chart')); chart.draw(data, options);});
<script src="https://www.gstatic.com/charts/loader.js"></script><div id="chart"></div>

How to remove both axis from a Google Bar Chart (aka Chart API)

Please try appending

&chxt=x,y&chxs=0,000000,10,0,,000000|1,000000,10,0,,000000&chxl=0:||1:|

alt text

How to remove Y axis (hAxis) label/title from Google Chart?

that is correct, the following option will remove the x-axis title...

hAxis: {
title: ''
},

just be sure to use the options conversion method for material charts...

                         //convert options
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));

see following working snippet...

google.charts.load('current', {'packages':['line', 'corechart']});      google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable(); data.addColumn('date', 'Month'); data.addColumn('number', "Average Temperature"); data.addColumn('number', "Average Hours of Daylight");
data.addRows([ [new Date(2014, 0), -.5, 5.7], [new Date(2014, 1), .4, 8.7], [new Date(2014, 2), .5, 12], [new Date(2014, 3), 2.9, 15.3], [new Date(2014, 4), 6.3, 18.6], [new Date(2014, 5), 9, 20.9], [new Date(2014, 6), 10.6, 19.8], [new Date(2014, 7), 10.3, 16.6], [new Date(2014, 8), 7.4, 13.3], [new Date(2014, 9), 4.4, 9.9], [new Date(2014, 10), 1.1, 6.6], [new Date(2014, 11), -.2, 4.5] ]);
var materialOptions = { chart: { title: 'Average Temperatures and Daylight in Iceland Throughout the Year' }, width: 900, height: 500, series: { // Gives each series an axis name that matches the Y-axis below. 0: {axis: 'Temps'}, 1: {axis: 'Daylight'} }, hAxis: { title: '' }, axes: { // Adds labels to each axis; they don't have to match the axis names. y: { Temps: {label: 'Temps (Celsius)'}, Daylight: {label: 'Daylight'} } } };
var classicOptions = { title: 'Average Temperatures and Daylight in Iceland Throughout the Year', width: 900, height: 500, // Gives each series an axis that matches the vAxes number below. series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, vAxes: { // Adds titles to each axis. 0: {title: 'Temps (Celsius)'}, 1: {title: 'Daylight'} }, hAxis: { ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11) ] }, vAxis: { viewWindow: { max: 30 } } };
function drawMaterialChart() { var materialChart = new google.charts.Line(chartDiv); materialChart.draw(data, google.charts.Line.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; }
function drawClassicChart() { var classicChart = new google.visualization.LineChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; }
drawMaterialChart();
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>     <button id="change-chart">Change to Classic</button>  <br><br>  <div id="chart_div"></div>

Remove empty space in between hAxis on Google Charts

try using string values for the x-axis, instead of numbers...

['1', 10],
['580', 12],
['10000', 1]

see following working snippet...

google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['1', 10],
['580', 12],
['10000', 1]
], true);

var options = {
bars: 'vertical',
chart: {
title: 'Number of payments by amount',
},
hAxis: {
title: 'Amount'
}
};

var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Chart API (not Visualization API): How to get rid of annotation lines

you can try the following options...

.setOption('annotations.stem.color', 'transparent')

or...

.setOption('annotations.stem.length', 0)


Related Topics



Leave a reply



Submit