Has anyone found a way to incorporate HTML in ticks within a Google chart? I am attempting to insert a weather icon from
This is my current attempt:
const dailyData = new google.visualization.DataTable();
dailyData.addColumn('timeofday', 'Hour');
dailyData.addColumn('number', 'Visits');
let mTicks = [];
for(let i: number = 8; i <22; i++) {
let timeofday: any = [parseFloat(parsedData[0].data[i].name[1]),0,0];
let weatherIcon = '-';
if(parsedData[0].data[i].weather_code > 0) {
let weather = new WeatherFunctions(parsedData[0].data[i].weather_code).getResult();
weatherIcon = weather.icon;
}
let fullString: string = `${i}:00 <br/> ${weatherIcon}`;
dailyData.addRow([timeofday, parsedData[0].data[i].visits]);
mTicks.push({v: timeofday, f: fullString});
}
const options: any = {
allowHTML: true,
legend: {
position: 'none'
},
hAxis: {
ticks:mTicks
,
title: 'Time - Weather - Temperature'
}
};
where full string =
"8:00 <i class="wi wi-day-sunny-overcast"></i>"Unfortunately, including HTML in the string causes the ticks not to display.