Google Charts: Show axis - charts

Question

Can someone explain to me what makes the example on the left show a solid line for the x-axis and what makes the example on the right show no line for the x-axis?
I want to show the x-axis like the example on the left, but I am not sure how Google Charts decides to show it. I am using the google-charts library from npm. To clarify: I want to show the x and y axes as solid lines in my chart.
var linearOptions = { //This one shows x-axis
title: 'World Population Since 1400 A.D. in Linear Scale',
legend: 'none',
width: 450,
height: 500,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Population (millions)',
ticks: [0, 1000, 2000, 4000, 6000]
}
};
var logOptions = { //This one does not show x-axis
title: 'World Population Since 1400 A.D. in Log Scale',
legend: 'none',
width: 450,
height: 500,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Population (millions)',
scaleType: 'log',
ticks: [0, 1000, 2000, 4000, 6000]
}
};
https://jsfiddle.net/zbiernat/ppLy8esg/
from the documentation...
https://developers.google.com/chart/interactive/docs/customizing_axes

Answer 1

according to the documentation for vAxis.scaleType...
'log' - Logarithmic scaling. Negative and zero values are not plotted. This option is the same as setting vAxis: { logscale: true }.
since zero values are not plotted, the first tick in the options is ignored
in order to show a solid line for the x-axis when using 'log',
use a number greater than zero for the first tick under vAxis
see following working snippet,
data table method getColumnRange(colIndex) is used to find the min for the y-axis column
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Population');
data.addRows([
[new Date(1400, 1, 1), 374],
[new Date(1500, 1, 1), 460],
[new Date(1600, 1, 1), 579],
[new Date(1700, 1, 1), 679],
[new Date(1750, 1, 1), 770],
[new Date(1800, 1, 1), 954],
[new Date(1850, 1, 1), 1241],
[new Date(1900, 1, 1), 1633],
[new Date(1910, 1, 1), 1750],
[new Date(1920, 1, 1), 1860],
[new Date(1930, 1, 1), 2070],
[new Date(1940, 1, 1), 2300],
[new Date(1950, 1, 1), 2558],
[new Date(1951, 1, 1), 2595],
[new Date(1952, 1, 1), 2637],
[new Date(1953, 1, 1), 2682],
[new Date(1954, 1, 1), 2730],
[new Date(1955, 1, 1), 2782],
[new Date(1956, 1, 1), 2835],
[new Date(1957, 1, 1), 2891],
[new Date(1958, 1, 1), 2948],
[new Date(1959, 1, 1), 3001],
[new Date(1960, 1, 1), 3043],
[new Date(1961, 1, 1), 3084],
[new Date(1962, 1, 1), 3140],
[new Date(1963, 1, 1), 3210],
[new Date(1964, 1, 1), 3281],
[new Date(1965, 1, 1), 3350],
[new Date(1966, 1, 1), 3421],
[new Date(1967, 1, 1), 3490],
[new Date(1968, 1, 1), 3562],
[new Date(1969, 1, 1), 3637],
[new Date(1970, 1, 1), 3713],
[new Date(1971, 1, 1), 3790],
[new Date(1972, 1, 1), 3867],
[new Date(1973, 1, 1), 3942],
[new Date(1974, 1, 1), 4017],
[new Date(1975, 1, 1), 4089],
[new Date(1976, 1, 1), 4160],
[new Date(1977, 1, 1), 4232],
[new Date(1978, 1, 1), 4304],
[new Date(1979, 1, 1), 4379],
[new Date(1980, 1, 1), 4451],
[new Date(1981, 1, 1), 4534],
[new Date(1982, 1, 1), 4615],
[new Date(1983, 1, 1), 4696],
[new Date(1984, 1, 1), 4775],
[new Date(1985, 1, 1), 4856],
[new Date(1986, 1, 1), 4941],
[new Date(1987, 1, 1), 5027],
[new Date(1988, 1, 1), 5115],
[new Date(1989, 1, 1), 5201],
[new Date(1990, 1, 1), 5289],
[new Date(1991, 1, 1), 5372],
[new Date(1992, 1, 1), 5456],
[new Date(1993, 1, 1), 5538],
[new Date(1994, 1, 1), 5619],
[new Date(1995, 1, 1), 5699],
[new Date(1996, 1, 1), 5779],
[new Date(1997, 1, 1), 5858],
[new Date(1998, 1, 1), 5935],
[new Date(1999, 1, 1), 6012],
[new Date(2000, 1, 1), 6089],
[new Date(2001, 1, 1), 6165],
[new Date(2002, 1, 1), 6242],
[new Date(2003, 1, 1), 6319],
[new Date(2004, 1, 1), 6396],
[new Date(2005, 1, 1), 6473],
[new Date(2006, 1, 1), 6551],
[new Date(2007, 1, 1), 6630],
[new Date(2008, 1, 1), 6709],
[new Date(2009, 1, 1), 6788]
]);
var populationRange = data.getColumnRange(1);
var logOptions = {
title: 'World Population Since 1400 A.D. in Log Scale',
legend: 'none',
width: 450,
height: 500,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Population (millions)',
scaleType: 'log',
ticks: [populationRange.min, 1000, 2000, 4000, 6000],
}
};
var logChart = new google.visualization.LineChart(document.getElementById('log_div'));
logChart.draw(data, logOptions);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="log_div"></div>