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:|
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
Combine Multiple JavaScript Files into One Js File
Get Request Works With Postman But Why Doesn't It Work With Reactjs Fetch
How to Get the Id of a Button That Was Clicked - Reactjs
How to Post Selected Values Using Ajax
Javascript, Viewing [Object Htmlinputelement]
How to Combine Object Values from Separate Lines into One Line
Search Bar With Dropdown Results
How to Clear Location.State in React-Router on Page Reload
How to Reload Datatable by Ajax (Jquery)
Parsing String as Json With Single Quotes
Reload Table After Deleting an Item from It With React
How to Show an Alert After Reloading the Page in JavaScript
Executing Nodejs Script File in PHP Using Exec()
Datepicker Onchange Event Not Firing in Jquery
Stop Chrome Back/Forward Two Finger Swipe
Running Functions One After Other in React