I'm trying to create a black chart with Google Charts, but I can't seem to change the text color of the axis. I tried some code pieces I found on the web, like:
hAxis: {
color: '#FFF'
}
But it just doesn't work. I've managed to change the title and legend color, but not the axis text. I'm trying to set the axis text color to white, to contrast with the backgroud:
google.load("visualization", "1", { packages: ["corechart"] });
setTimeout(function() {
var options = {
title: 'Test Chart',
backgroundColor: '#000',
legendTextStyle: { color: '#FFF' },
titleTextStyle: { color: '#FFF' },
hAxis: {
color: '#FFF',
}
};
var chart = new google.visualization.LineChart(document.querySelector(".chart"));
chart.draw(google.visualization.arrayToDataTable(
[
["Year", "T1", "T2", "T3"],
[0, 10, 20, 30],
[1, 10, 20, 30],
[2, 10, 20, 30],
[3, 10, 20, 30],
[4, 10, 20, 30]
]
), options);
}, 100);
.chart {
width: 100%;
height: 200px;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart"></div>
Correct usage for hAxis is using the textStyle options, in which you want the color:
hAxis: {
textStyle:{color: '#FFF'}
}
I would also recommend using google.setOnLoadCallback(drawChart); function for rendering the chart instead of timeout, at least for me 100 milliseconds was not enough
I manage to change all the chart texts with one CSS.
I think this way is more confortable than configure every chart text type (title, legend, vAxis, hAxis, others).
Maybe it will be usefull for someone.
Some code (Remember to change "#chart_div" for your chart id):
#chart_div text {
fill: red !important;
}
Related
In Apache Echarts, is there a way to rotate the title text of a chart so that it is vertically oriented on one side rather than horizontal on the top? The title at the top sometimes takes important chart real-estate that my series in some cases can overlap. I would like to instruct Echarts when there's a space crunch to move the title off to the left side in a vertical position (like reading titles on the spines of books in a library). There appears to be several "rotate" options for labels, but nothing for titles.
I am not sure you can rotate the main title if you use the default canvas renderer. In this case, you may want to play with the name of your yAxis like this:
const myChart = echarts.init(document.getElementById('main'));
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name: 'This is my title',
nameLocation: 'center',
nameRotate: 90,
nameGap: 45,
nameTextStyle: {
color: 'black',
fontSize: 18,
fontWeight: 'bold'
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
Alternatively, you could use the SVG renderer and add a bit of CSS to transform the main title (which is a <text> element):
const myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });
let option = {
title: {
text: 'This is my title'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
svg g text:last-child {
transform: rotate(-90deg) translateX(-250px);
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
I'm just starting my adventure with Google Charts and I have a requirement to visualize over 100 points of data in a bubble chart. This naturally makes the chart harder to read, so I did some research and realized I can make the exploration of the data easier by adding filtering options (which are possible when charts are created as dashboards).
I discovered a behavior that I'm not able to fix:
Imagine the values in one attribute can range from 0 to 100
The displayed data points can be filtered using a dashboard control of the NumberRangeFilter type which has a minimal value of 0 and maximal value of 100 (asigned automatically)
When the minimal value is smaller or equal 40, the baseline stays at 0
When the minimal value is greater than or equal 41, the baseline is dynamically adjusted to reflect the minimal value found in that range (for example if the selected range is 51-100, then the baseline will be displayed starting from 60)
The problem in visual form:
The only fix that comes to mind would be to force the vAxis.baseline attribute of the options object as automatic, but that's supposedly the default value and according to the documentation this only accepts numbers.
Does anyone know how I could force the chart to be updated even for the slightest changes with the control in the dashboard?
Full code for reference:
google.charts.load('current', {
'packages': ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Name', 'X', 'Y', 'T', 'S'],
['A', 0, 0, "-", 3],
['B', 20, 20, "-", 2],
['C', 30, 30, "-", 1],
['D', 40, 40, "-", 1],
['E', 50, 50, "-", 2],
['F', 41, 60, "-", 1],
['G', 80, 50, "-", 2],
['H', 50, 80, "-", 2],
['I', 90, 90, "-", 2],
['J', 100, 100, "-", 4],
['K', 50, 70, "-", 1],
['L', 70, 50, "-", 1],
['M', 10, 50, "-", 2],
['N', 50, 10, "-", 2],
['X', 100, 50, "-", 2],
['Y', 50, 100, "-", 2]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var yAxisControl = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div2',
'options': {
'filterColumnLabel': 'Y'
}
});
var bubbleChart = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'chart_div',
options: {
width: 300,
height: 350,
chartArea: {
left: 50,
top: 20,
width: 250,
height: 250
},
legend: 'right',
hAxis: {
title: 'X Axis'
},
vAxis: {
title: 'Y Axis'
},
}
});
dashboard.bind(yAxisControl, bubbleChart);
dashboard.draw(data);
}
.dash {
display: inline-block;
width: 320px;
text-align: right;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div" class="dash">
<div id="filter_div2"></div>
<div id="chart_div"></div>
</div>
have add google chart with below options, I want spacing between labels at horizontal axis and actual axis, is there option available in chart library or any other way?
var options = { colors: ['#4ED8DA'], curveType: 'none', fontName: 'Montserrat', chartArea: {left: 40, top: 10, bottom: 30, width: '95%', height: '100%'}, legend: {position: 'none'}, pointSize: 5, lineWidth: 3, hAxis: {textPosition: 'out', minTextLines: '2', slantedText: false, baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6'}, textStyle: {color: '#383939', fontSize: '12', bold: true}}, vAxis: {baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6', interval: 1}, textStyle: {color: '#383939', fontSize: '12'}} };
there are no standard config options to create space between the x-axis labels and the axis.
however, you can manually move the labels on the chart's 'ready' event.
first, we find the x-axis labels, then increase the "y" attribute of the label.
the following example increases the distance from the axis by the value of the font size.
google.visualization.events.addListener(chart, 'ready', function () {
// get all chart labels
var labels = chart.getContainer().getElementsByTagName('text');
Array.prototype.forEach.call(labels, function (label) {
// determine if x-axis label
if (label.getAttribute('text-anchor') === 'middle') {
// increase distance from axis by the font size of the label
var fontSize = parseFloat(label.getAttribute('font-size'));
var yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord + fontSize);
}
});
});
note: depending on how far you move the labels,
you may need to increase the area at the bottom of the chart.
chartArea.bottom
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[0, 0],
[1, 0],
[2, 0],
[3, 1],
[4, 1],
[5, 2],
[6, 2],
[7, 3],
[8, 3],
[9, 3]
]);
var options = {
colors: ['#4ED8DA'],
curveType: 'none',
fontName: 'Montserrat',
chartArea: {left: 40, top: 10, bottom: 30, width: '95%', height: '100%'},
legend: {position: 'none'},
pointSize: 5,
lineWidth: 3,
hAxis: {textPosition: 'out', minTextLines: '2', slantedText: false, baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6'}, textStyle: {color: '#383939', fontSize: '12', bold: true}},
vAxis: {baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6', interval: 1}, textStyle: {color: '#383939', fontSize: '12'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
google.visualization.events.addListener(chart, 'ready', function () {
var labels = chart.getContainer().getElementsByTagName('text');
Array.prototype.forEach.call(labels, function (label) {
if (label.getAttribute('text-anchor') === 'middle') {
var fontSize = parseFloat(label.getAttribute('font-size'));
var yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord + fontSize);
}
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I have a chart that display good on desktop but on mobile/small screen (phone) the label on the v axis is cut off (see image).
How can i shrink the graph so that the chart uses 50% of the width while the labels use the other 50% of the chartArea so that the label can be shown full length and not cut off.
Here is my code:
CSS
#chart_div {
width: 100%;
margin: 0 auto;
}
.html.erb
<div id="chart_div" class="col-md-12 nopadding">
<%= bar_chart $top_10_time48_ht.reverse, id: "bar_chart $top_10_time48_ht", xtitle: "Number of times used", ytitle: "Top Hashtags", colors: ["#C2F4FF"], download: "top_hashtags", refresh: 300,
library: {
chartArea: {left: "15%", top: "30", width: "100%"},
vAxis: { baselineColor: "#F76161", gridlines: {Color: "#FFFFFF" }, textStyle: { color: "#76BDD1", fontSize: "12", fontName: "Arial", fontStyle: "normal"}, titleTextStyle: {color: "#F76161", fontSize: "18", padding:"30px" } },
hAxis: { baselineColor: "#F76161" , gridlines: {Color: "#FFFFFF", count: "-1" }, textStyle: { color: "#76BDD1"} , titleTextStyle: {color: "#F76161", fontSize: "16"} } } %>
I cannot use the media queries (CSS) as setting for the chart are in .html.erb
Also is there a way to have the haxis title on the top of the vertical axis OR position the chart title on the left before the haxis (vertical axis).
I'd like to do the same thing described in this question, except that I want to do it for a horizontal bar chart (the bars are horizontal instead of vertical). I'll copy the image from that question here:
I'd like to have a stacked horizontal bar chart similar to this with a vertical line.
It seems that ComboCharts doesn't support horizontal bar charts so I was hoping there might be another way.
using orientation: 'vertical' will rotate the axes so that a column chart becomes a bar chart
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', 'Minimum', 'Maximum'],
['2010', 10, 24, 20, 32, 18, 5, 90, 140],
['2020', 16, 22, 23, 30, 16, 9, 90, 140],
['2030', 28, 19, 29, 30, 12, 13, 90, 140]
]);
var options = {
bar: {
groupWidth: '75%'
},
height: 400,
isStacked: true,
legend: {
position: 'bottom'
},
orientation: 'vertical',
series: {
6: {
color: '#000000',
type: 'line'
},
7: {
color: '#000000',
type: 'line'
}
},
seriesType: 'bars',
width: 600,
};
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>