Google charts offsetting horizontal axis markers
Does anyone know if it's possible to compensate for the markers so that they appear between the google chart column?
To make it look like this design mockup ...
Rather than the markers being directly embedded in the columns as shown below, this is the default behavior for the google.visualization.ColumnChart api.
I have a doc search, however it cannot find any links to options that would allow such a setting. Does anyone know if there might be a way to manipulate the layout after rendering it? Or if there is actually an opportunity to do it, but I just missed it?
thank
source to share
The diagram shows the structure <svg>
comprising elements <g>
, <rect>
, <text>
(and others). The structure differs from a large format chart by a chart, and the internal order can change if the main elements of the chart are not taken into account. The horizontal axis elements are rendered as something like
<text text-anchor="middle" x="468.46875" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">12</text>
To get an idea of ββwhere to look for these elements <text>
in the outline <svg>
, you can copy the rendered diagram code into an editor capable of styling the code, or use the online beautifier code .
Then simply swipe through <svg>
via DOM methods such as querySelector
, querySelectorAll
, etc. getElementsByTagName
See google.visualization.ColumnChart
:
By changing the attribute of x
each element <text>
that belongs to the horizontal axis, we can get labels between the columns:
google.visualization.events.addListener(chart, 'ready', updateAxis);
function updateAxis() {
var x,
svg = document.getElementById('chart').querySelector('svg'),
g = svg.querySelectorAll('g'),
chartArea = g[3].querySelectorAll('g'),
hAxisTexts = chartArea[5].querySelectorAll('text');
//0-15 labels, the rest belongs to the yAxis
for (var i=0;i<16;i++) {
x = parseFloat(hAxisTexts[i].getAttribute('x'));
if (x>9) {
x = x-15;
} else {
x = x-18;
}
hAxisTexts[i].setAttribute('x', x);
}
}
demo -> http://jsfiddle.net/hrrL45oq/
This is just an example. You may need to target another element <g>
containing <text>
, and how you control x
or other attributes <text>
depends on the location of the chart.
source to share