Menu
I'm getting a weird bug while using Google Charts with dir="rtl" tag in the html for right to left webpages.
What happens is the page gets a massive space and scrolls left for no reason. Happens on my Chrome and Safari.
<html lang="ar" dir="rtl">
This is the easiest way to reproduce the bug on jsfiddle https://jsfiddle.net/t4ve0kkf/
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1],
[{v: [9, 0, 0], f: '9 am'}, 2],
[{v: [10, 0, 0], f:'10 am'}, 3],
[{v: [11, 0, 0], f: '11 am'}, 4],
[{v: [12, 0, 0], f: '12 pm'}, 5],
[{v: [13, 0, 0], f: '1 pm'}, 6],
[{v: [14, 0, 0], f: '2 pm'}, 7],
[{v: [15, 0, 0], f: '3 pm'}, 8],
[{v: [16, 0, 0], f: '4 pm'}, 9],
[{v: [17, 0, 0], f: '5 pm'}, 10],
]);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}<html lang="ar" dir="rtl">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
</html>I've also tried adding lang and dir to the chart div while keeping the rtl tag in the main html but didn't work
<div id="chart_div" lang="en" dir="ltr"> </div>
539
This article relies excessively on references to primary sources. Please improve this by adding secondary or tertiary sources. The Google Chart API is an interactive Web service (now deprecated) that creates graphical charts from user-supplied data.
To change the colors assigned to data series in a specific chart: Select that chart, then on the right, open the STYLE tab. In the Color by section, select Series order, Bar order, or Slice order, depending on the type of chart. Click a color box to set the color for each series.
Checking rendered HTML with page inspectors it appears that this part of the HTML causes the issue:
<div aria-label="Данные диаграммы в виде таблицы." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">/* ... */</div>
So basically "hiding" ARIA element with left: -10000px is not compatible with rtl documents, since clearly it's going to add this huge gap due to negative left.
One way to fix it is to force this aria-lable to render with left: auto and move it far to the top instead:
html[dir="rtl"] svg + [aria-label] {
top: -1000px !important;
left: auto !important;
}
Demo: https://jsfiddle.net/57oe0ktz/
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
