I'm trying to make Column Chart with google chart.
function drawChartEPS(response) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'Q1');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q2');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q3');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q4');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addRows(response);
var options = {
width: '100%',
height: '80%',
bar: {groupWidth: "90%", width: "100%", gap: "30%"},
chartArea:{width:"100%",height:"100%"},
annotations: {
highContrast: true,
style: 'point',
textStyle: {
fontName: 'Sans',
fontSize: 16,
bold: false,
italic: false,
direction:-1,
slantedText:true,
slantedTextAngle:90,
opacity: 1
}
},
legend: {
position: 'none'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('EPSChart'));
chart.draw(data, options);
}
And get the result google chart
But I need that my chart looks like in this picture examle Can not Change the direction of text on the graphs and add arrows
there are no standard config options to change the rotation of the annotations,
but you can change them manually, on the chart's 'ready'
event.
however, you will need to use a MutationObserver
,
as the chart will rotate them back on any activity,
such as "on hover".
to rotate, add a transform
attribute to each <text>
element in the svg.
in the transform
attribute, use --> rotate(z x y)
, where...
z
= the angle of the rotation
x
= the x coordinate of the element
y
= the y coordinate of the element
x
& y
will already be attributes in the element,
so only need the rotation value, such as --> -90
transform="rotate(-90 100 300)"
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'Q1');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q2');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q3');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q4');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addRows([['DEC', 500, 'cyan', '500', 600, 'magenta', '600', 650, 'yellow', '650', 700, 'lime', '700']]);
var options = {
width: '100%',
height: '80%',
bar: {groupWidth: "90%", width: "100%", gap: "30%"},
chartArea:{width:"100%",height:"100%"},
annotations: {
highContrast: true,
style: 'point',
textStyle: {
fontName: 'Sans',
fontSize: 16,
bold: false,
italic: false,
direction:-1,
slantedText:true,
slantedTextAngle:90,
opacity: 1
}
},
legend: {
position: 'none'
}
};
var container = document.getElementById('EPSChart')
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(function () {
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('transform', 'rotate(-90, ' + label.getAttribute('x') + ' ' + label.getAttribute('y') + ')');
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="EPSChart"></div>