Develop Reference

Is column roles supported on Material Design Google Charts?

I found a post from 2015 that says that column roles are not supported on Material Design charts. However, on the official documentation, I cannot find any note of it so wondering if that has changed.
I am adding an annotation role, but it doesn't seem to have any effect. Same of other roles, eg tooltip. For tooltip I might be able to work around that using the formatted value of cell, but still don't know how to add html content.
Here is my code :
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness', { role: 'annotation' }],
['Canis Major Dwarf', 8000, 23.3, "BR"],
['Sagittarius Dwarf', 24000, 4.5 , "ME"],
['Ursa Major II Dwarf', 30000, 14.3 , "BR"],
['Lg. Magellanic Cloud', 50000, 0.9, "DA"],
['Bootes I', 60000, 13.1 , "ME"]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
},
focusTarget: 'category',
crosshair: {
trigger: 'selection',
},
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
The annotation isn't shown anywhere. What am I missing? jsfiddle link here.

Google Charts change color on side box

So I'm using Google Charts and using the Column charts (https://developers.google.com/chart/interactive/docs/gallery/columnchart) specifically and I have a question regarding colors on charts.
Here are two questions:
Does anyone know how to change the color on the outer box? I was able to change the color on the bars to the orange color, but I can't target the outer box.
I am using 'Aug', 7283, 'color: #ff8a73' to define the hex colors on each bar, does anyone know a better way to define colors or is this the proper way?
Here is the JS code:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(sle_interactions);
function sle_interactions() {
var data = google.visualization.arrayToDataTable([
['Year', 'Interactions', { role: 'style' }],
['Aug', 7283, 'color: #ff8a73'],
['Sep', 8263, 'color: #ff8a73'],
['Oct', 9827, 'color: #ff8a73'],
['Nov', 9362, 'color: #ff8a73'],
['Dec', 10625, 'color: #ff8a73']
]);
var options = {
title: 'Interactions',
is3D: true,
backgroundColor: 'transparent',
hAxis: {
title: 'Timeframe',
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('sle_interactions'));
chart.draw(data, options);
}
document.addEventListener('DOMContentLoaded', sle_interactions);

Both of the questions have been resolved using this:
var options = {
title: 'Age Range',
is3D: true,
backgroundColor: 'transparent',
hAxis: {
title: 'Followers',
},
vAxis: {
minValue: 0,
maxValue: 100,
format: "#.#'%'",
},
colors: ['#ff8a73'],
};

Google Material Line Chart - Ticks

When using "Cassic" Line chart I can assign the ticks for the hAxis, also the format and title like this:
var options = {
hAxis: {
format:'h a',
title: 'Time',
ticks: [...range...]
}
}
Is it possible to do the same when using the Material Line chart?
So far I have been able to set the title:
var options = {
axes: {
x: {
0: {label: 'Time'}
}
}
}

I wanted to assign the ticks because I needed to set the start and the end to specific dates, I found another way to accomplish that when using the material line chart:
var lineChartOptions = {
chart: {
title: 'Chart Title'
},
axes: {
y: {
0: { label: 'Label 1' },
},
x: {
0: { label: 'Label 2' },
all: {
range: {
max: new Date(...),
min: new Date(...)
}
}
}
},
legend: { position: 'left' }
};
This worked for me.

How to set different trigger attribute for multiple tooltip in the same Combochart

I have done a small graph with Google charts combochart combining
a stacked bar chart with a line chart.
The tooltips appear on all stacks and points of the line chart triggered by
mouse actions: 'focus' (mouse on the target), 'selection' (on click) and 'both' both click and focus.
I wanted to have all tooltips from line chart appeared after a click, trigger: set to 'selection' and all tooltips from stacked bar chart after a focus on the zone, trigger: set to 'focus'. Is this possible with Google Charts to set different tooltip behaviour in the same chart? How do I develop this?
Play my example here:
https://jsfiddle.net/machesne/xf1kccdq/
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var tooltipdata = [["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "]]
var valuedata = [[50, 10, 15, 15, 90, 90],[50, 12, 15, 15, 92, 92],[60, 10, 15, 15, 100, 100]];
var data = google.visualization.arrayToDataTable([
['Date', 'Apples', { role: 'tooltip' }, 'Tomatoes', { role: 'tooltip' }, 'Orange', { role: 'tooltip' }, 'Strawberries', { role: 'tooltip' }, { role: 'annotation' }, 'Sum' , { role: 'tooltip' }],
['', valuedata[0][0], tooltipdata[0][0], valuedata[0][1], tooltipdata[0][1], valuedata[0][2], tooltipdata[0][2], valuedata[0][3], tooltipdata[0][3], valuedata[0][4],valuedata[0][5], tooltipdata[0][4]],
['', valuedata[1][0], tooltipdata[1][0], valuedata[1][1], tooltipdata[1][1], valuedata[1][2], tooltipdata[1][2], valuedata[1][3], tooltipdata[1][3], valuedata[1][4],valuedata[1][5], tooltipdata[1][4]],
['', valuedata[2][0], tooltipdata[2][0], valuedata[2][1], tooltipdata[2][1], valuedata[2][2], tooltipdata[2][2], valuedata[2][3], tooltipdata[2][3], valuedata[2][4],valuedata[2][5], tooltipdata[2][4]], ]);
var options = {
width: 1200,
height: 1000,
legend: { position: 'bottom', maxLines: 2 },
seriesType: 'bars',
bar: { groupWidth: '90%' },
isStacked: true,
tooltip: { isHtml: true, trigger: 'both' }, // CSS styling affects only HTML tooltips.
series: {4: {type: 'line', pointSize: 15 } }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Thanks a lot for your answers!

google chart double axis, set format

I have created a Google bar chart, with two x-axis.
My problem is that I cannot seem to get the correct format on the bottom axis, which should be shown in percentage.
I have tried to use the following
axes:{{},{format:'#%'}}}
And in general inserting format:'#%' at places that would make sense, but nothing seems to work.
Is there anyone who has an idea for this?
See the entire code here: https://jsfiddle.net/laursen92/azr4kfn0/1/
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Slave number', 'Voltage', '%'],
['Slave 1', 12.15, 0.40],
['Slave 2', 12.18, 0.50],
['Slave 3', 11.80, 0.60],
['Slave 4', 13.12, 0.70],
]);
var formatter = new google.visualization.NumberFormat({
pattern: '##0.00'
});
var formatter2 = new google.visualization.NumberFormat({
pattern: '##0%'
});
formatter.format(data, 1);
formatter2.format(data, 2);
var options = {
width: 800,
chart: {
title: 'Status of slaves',
subtitle: 'Overview of the voltage and SOC of connected slaves. '
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: {
axis: 'voltage'
}, // Bind series 0 to an axis named 'voltage'.
1: {
axis: 'percent'
} // Bind series 1 to an axis named 'soc'.
},
axes: {
x: {
voltage: {
side: 'top',
label: 'Voltage'
}, // Top x-axis.
percent: {
label: 'Percent',
} // Bottom x-axis.
}
},
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};

Here's an update to your fidde: https://jsfiddle.net/Balrog30/azr4kfn0/4/
I used the a little codepen I wrote to reverse-engineer the changes to the material chart options, which are still mostly undocumented. You can find that here: http://codepen.io/nbering/pen/Kddvge
Here's how the option should be formatted:
var options = {
axes: {
x: {
yourAxis: {
format: {
pattern: "#%"
}
}
}
};
-- Or --
options.axes.x.yourAxis.format.pattern = "#%";