Google Charts focusTarget: 'category' not working - charts

Question

Google Charts focusTarget: 'category' works when I draw the chart in one way but not in the other one.
In the example below, the BAR I has a broken tooltip (not triggering the way intended) and it's working perfectly fine with the BAR II
google.charts.load('current', {
'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// _____ BAR I ______
var data = google.visualization.arrayToDataTable([
['Form', 'Visitors', 'Starters', 'Conversions'],
['Form 1', 1000, 650, 490],
['Form 2', 485, 460, 350],
['Form 3', 335, 250, 105]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
focusTarget: 'category',
},
focusTarget: 'category',
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
// ______ BAR II ______
var data = google.visualization.arrayToDataTable([
['Form', 'Visitors', 'Starters', 'Conversions'],
['Form 1', 1000, 650, 490],
['Form 2', 485, 460, 350],
['Form 3', 335, 250, 105]
]);
var options = {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: {
isHtml: true
}
};
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('columnchart_material_2')).draw(data, options);
}
Please also take a look at this JSFiddle of the problem.
Besides different tooltip behavior, the charts also look rather different, what is the cause?

Answer 1

one is considered a Classic chart, the other Material
Classic --> google.visualization.ColumnChart -- requires package: 'corechart'
Material --> google.charts.Bar -- requires package: 'bar'
Material charts are newer, but also do not support several options...
see --> Tracking Issue for Material Chart Feature Parity
which includes...
focusTarget
there is an option for Classic charts, to style them similar to Material
theme: 'material'

Answer 2

Here is the codepen link for using google charts
google.charts.load('visualization', '1', {
'packages': ['corechart'],
"callback": drawChart
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Year", "Relevance", {
role: "style"
}],
["Forward ref..", 108, "#25C16F"],
["Case ref..", 20, "#25C16F"],
["Approved", 30, "#25C16F"],
["Disapproved", 50, "#25C16F"],
["Distinguish", 25.67, "#25C16F"],
["Followed", 28.9, "color: #25C16F"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "Case Relevance",
width: 350,
height: 300,
bar: {
groupWidth: "50%",
},
hAxis: {
title: 'Relevance',
viewWindow: {
min: 0,
max: 120
},
ticks: [0, 30, 60, 90, 120] // display labels every 25
},
legend: {
position: "none"
},
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(vieenter code herew, options);
google.visualization.events.addListener(chart, 'select', function() {
var row = chart.getSelection()[0].row;
if (row == 0) {
$("#right_panel h2").children(".small-font").html("Forward Reference in");
} else if (row == 1) {
$("#right_panel h2").children(".small-font").html("Case Reference");
} else if (row == 2) {
$("#right_panel h2").children(".small-font").html("Approved");
} else if (row == 3) {
$("#right_panel h2").children(".small-font").html("Disapproved");
} else if (row == 4) {
$("#right_panel h2").children(".small-font").html("Distinguish");
} else if (row == 5) {
$("#right_panel h2").children(".small-font").html("Followed");
}
});
}
});
https://codepen.io/shray04/pen/Poogmjq?editors=1000