Google Visualization API font color - google-visualization

I created a simple ColumnChart. Is there a way to change the font color globally (through options)?
I would like to change the color of the X and Y axis text. I was able to change the font, the background color, etc. but not the font color.
This is what I have so far:
var options = {
backgroundColor: '#f1f1f1',
fontName: 'Segoe UI'
};
chart.draw(data, options);
Thanks in advance.

There is no global font style option. You have to set the styles on each element separately:
chart.draw(data, {
titleTextStyle: {
color: 'red'
},
hAxis: {
textStyle: {
color: 'red'
},
titleTextStyle: {
color: 'red'
}
},
vAxis: {
textStyle: {
color: 'red'
},
titleTextStyle: {
color: 'red'
}
},
legend: {
textStyle: {
color: 'red'
}
}
});
If you wish to, you can make a feature request to add support for a global font style.

There's no solution within the google charts API that I know of. I use a workaround in JQuery that I run after the chart is rendered:
$.each($("text"),function(index, value) {
$(this).attr("fill","#ffffff");
$(this).attr("font-family","cursive");
})
If you need to globally change the background of all charts on the page, you can use:
$.each($("rect"),function(index, value) {
console.log(this);
if($(this).attr("fill") == "#ffffff")
$(this).attr("fill","#000000");
})
This works by finding any white rectangle and changing it's fill attribute to black.
You may need to tweak these to make sure they only impact your chart and not other elements of the page.

Related

ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels

I'm using ChartJS with the plug-in ChartJS DataLabels to show text values right next to the points (who would have thought that a plugin is necessary for this basic task, but I digress).
My issue I need to vary the color of my text labels along with the individual dataset. But so far I haven't found a solution. I'm adding new datasets dynamically, they're not statically pre-loaded. The color should match the color of the dataset.
Suppose I have
var colorpalette = ["red", "blue", "green", "magenta", "yellow", "brown", "purple", "orange", "black", "gray"];
var currseriesnum = 0;
var chart = null;
function setUpChart() {
var ctx = document.getElementById('chartArea').getContext('2d');
chart = new Chart(ctx, {
type: 'line',
data: {
labels: monthnames,
datasets: [] // Initially blank - series added dynamically with chart.update()
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
plugins: { // ChartsJS DataLabels initialized here
datalabels: {
anchor: 'end',
align: 'bottom',
formatter: Math.round,
font: {
weight: 'bold',
size: 16
},
color: colorpalette[currseriesnum] // Pick color dynamically
}
}
}
});
}
Doesn't work. Also tried a function, color: function(context), but unsure how to retrieve the current index of the dataset I'm getting here.
I'm adding series to the chart dynamically (initially empty) as below, and incrementing the global var currseriesnum.
chart.data.datasets.push({
label: keyValueSelection.label,
fill: false,
data: keyValueSelection.value,
borderColor: colorpalette[currseriesnum],
borderWidth: 2
});
chart.update();
currseriesnum++;
They gave me the answer on the ChartJS DataLabels forum:
plugins: {
datalabels: {
color: function(ctx) {
// use the same color as the border
return ctx.dataset.borderColor
}
}
}

How to apply a label color to a Pie Chart slice from Google Charts API

Hej guys , I tried 2 or 3 different functions but i can´t get any of them to work. I want that the label´s from the 3 different stats are colored in for example white. A picture is below.
var options = {'title':'Lead statistik von<?php echo $_SESSION['user_name'];?>',
'width':400,
'height':300,
backgroundColor:'#0a0a0a',
fontSize:'14',
titleTextStyle: {color:'#FFFFFF'},
slices:
{
0: { color: 'red' },
1: { color: 'purple'},
2: { color: 'blue'}
},
pieSliceTextSlice:{color:'#FFFFFF'}
};
someone got a hint which funtion to use?
Picture :
In order to specify legend text color use legend.textStyle.color property, for example:
var options = {
legend: {
textStyle: { color: 'white' }
}
};
According to Configuration Options:
legend.textStyle
An object that specifies the legend text style. The object has this
format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Example
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
width: 400,
height: 300,
backgroundColor: '#0a0a0a',
fontSize: '14',
legend: {
textStyle: { color: 'white' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

How to make horizontal bar graph label values as hyperlink using google chart api

var options = {
May be vAxis have some properties for making label value as hyperlink
vAxis: { textStyle: { color: '#005500', fontSize: '13', fontName: 'Arial'} },
width: 700,
height: 400,
bar: { groupWidth: '15%' },
isStacked: true,
chartArea: { left: 150, width: 700 }
};
You cannot create hyperlinks from the axis labels, but you can use a "click" event handler for your chart that detects clicks on the axis labels and then acts as if a link was clicked:
google.visualization.events.addListener(chart, 'click', function (e) {
// match the id of the axis label
var match = e.targetID.match(/hAxis#0#label#(\d+)/);
if (match && match.length) {
var row = parseInt(match[1]);
// use row to fetch any data you need from the DataTable to construct your hyperlink, eg:
var label = data.getValue(row, 0);
// then construct your URL and use it however you want, eg:
var url = 'http://www.google.com/search?q=' + label;
window.location = url;
}
});

Google Charts Column width in pixels

I have set the width of my bar chart to 580px. The problem that the chart overflows the area in the view window. Would it be possible to reduce the size of the columns in the chart area to reduce the overall chart size? I mean would it be possible to change the scale for the numbers per pixel for each column so that for example the 280 number is shown in less pixel space?
You can use responsive BarChart.
var options = {
width: "100%", //adjusts according to the screen size
height: 500,
bar: { groupWidth: "75%" },
legend: { position: 'right', textStyle: { color: 'black' } },
isStacked: true,
vAxis: { textStyle: { color: 'black' } },
hAxis: { textStyle: { color: 'black' }, format: ' #,##0.00' },
chartArea: { width: "50%", height: "70%" }};
function resizeCharts() {
// redraw charts, dashboards, etc here
chart.draw(dadosGrafico, options);}
$(window).resize(resizeCharts);

Google Charts remove white border around vAxis textPosition 'in' text on Bar Chart

How do I remove the white border around the vAxis textPosition 'in' text style on Google Charts Bar Chart?
My styling looks like this:
vAxis: { 'textPosition': 'in', 'textStyle': { color: 'black', 'stroke': 0 } },
I would like to have no surrounding white area around the black text within my coloured bars.
See this link: https://developers.google.com/chart/interactive/docs/gallery/bubblechart
Notice how the Bubbles have text inside them with a white border around them. I want to remove this border so that the black text sits directly over the bubble colour with no border around the black text.
I have tried lots of combinations such as:
'textStyle': { color: 'black', 'stroke': 0 }
'textStyle': { color: 'black', 'strokeWidth': 0 }
'textStyle': { color: 'black', 'border': 0 }
'textStyle': { color: 'black', 'border': 'none' }
Nothing I have tried makes any difference. I still have the white border around the text.
There is an undocumented 'auraColor' option that applies to several, if not all, 'textStyle' options. For example,
textStyle: { auraColor: 'white' }
Setting it to 'none' will remove it.