I want to color the background bars (or the entire cells) of the table as shown in the appended screenshot based on the "Group-By"/dimension value (red for "rot", yellow for "gelb" and green for "grün").
I was able to color the metric-part of other visualizations with label_colors, but I have not yet found a way to color the cells of the table based on a "dimension".
Is there a way to do this?
As of now:
EDIT: I wanted to color it the following way (edited with paint):
This is a tad hacky, but you can add a markdown component and add the following markup:
<style>
th {
color: red; /* or whatever color/hex code you want */
}
</style>
The markdown component will be blank after you add this--i.e. there will just be a blank markdown block-- so you may want to add some copy. Alternatively, if you already have a markdown block, you can add it there, and it won't appear as long as you remember the <style></style> tags.
I need to create graphs with daily data and we need the weekend bars to be a different color. I am able to color my bar graph with the weekends being green via the Plot attribute and rules as shown in my code by using the #Dayofweek# function and it works great. However, when I do this the X-axis labels are values of 1 through 7 as shown in in the first image below which won't work. If I just use the date variable then it displays the X-axis labels correctly as shown in the 2nd attached image but will not correctly color the weekends a different color.
<cfscript>
plot={"rules":[
{
"rule":"'%k' == '1'",
"background-color":"green"
},
{
"rule":"'%k' == '7'",
"background-color":"green"
}
]};
</cfscript>
<cfchartseries type="bar" query="mychartdata" itemcolumn="time" valuecolumn="interval">
https://drive.google.com/open?id=1CADAhxn8n1bNjdx_vJpXA-UXIrOU-vXS
https://drive.google.com/open?id=1cgUgtqSNPTHmC-_aaZoPnbO2CpCz_Qlt
I'm trying to change the color of the black labels on the x-axis. Now they're black, which don't go well with the background. In the documentation I only found: rowLabelStyle or barLabelStyle. How can I change the color of the labels on the x-axis?
By using this CSS:
#timeline text {
fill: #dddada;
}
The text appears light.
Hi iam working on google chart it is displaying fine but i need the font size and color of the text displayed on X-axis and Y-axis coordines.Can any one tell how to do this one
Use the hAxis.textStyle.color and vAxis.textStyle.color` options to set the color of the axis labels.
Use the textStyleOption to set the color to labels.
hAxis: {
title: "Locations",
textStyle: {
color: 'black'
}
},
I am using Google Chart to graph some data, and I want to customize colors. I also would like to use 3D bars (which means I cannot use core library BTW).
This is a screencap of the results I am getting:
Left is the original 3D chart, right is the customized one. As you can see, no shading is applied to the color I define for the 3D effect, instead a flat color is used for the whole column.
Is there any way to fix this?
PS. this is the code I use to geneate the charts:
function drawChartCoste(){
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Valor');
data.addColumn('number', 'Grupo1');
data.addColumn('number', 'Grupo2');
data.addRow(['Consumo', 2.5, -17.860);
// Set chart options
var options = {'title':'Comparativa de coste',
'width':400,
'height':300,
'is3D':true,
'colors':['#C26900','#165C04']};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
While I firmly restate my opposition to 3d charts, it would seem that this is doable from this line in the Docs:
If is3D=true, this is an array of either HTML colors, or objects of this type: {color:face_color, darker:shade_color} where color is the element's face color, and darker is the shade color. However, if you specify an HTML color for a 3D object, face and shade will be the same color, and the 3D effect will be reduced. Example: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
Here is a sample:
// Set chart options
var options = {'title':'Comparativa de coste',
'width':400,
'height':300,
is3D:true,
colors:[{color:'#C26900', darker:'#B15800'}, {color:'#165C04', darker:'#054B00'}]
};