I am trying to replicate the default tooltip styling used by the Google Graph API:

In particular the bolding of some of the text as seen above. As soon as I add my own tooltip I can no longer bold parts of the text as in the default view.

The label tooltip.textStyle only offers one the option of changing the colour for the entire text displayed {color: <string>, fontName: <string>, fontSize: <number>}.

Any ideas?

I am trying to replicate the default tooltip styling used by the Google Graph API:

In particular the bolding of some of the text as seen above. As soon as I add my own tooltip I can no longer bold parts of the text as in the default view.

The label tooltip.textStyle only offers one the option of changing the colour for the entire text displayed {color: <string>, fontName: <string>, fontSize: <number>}.

Any ideas?

• javascript
• google-visualization

2 Answers 2

The default view is styled with the bold, while custom tooltips are not.

Depending on your chart type, you can enable HTML tooltips and use those to customize the format as explained here. This will work for:

• AreaChart
• BarChart
• CandlestickChart
• ColumnChart
• ComboChart
• LineChart
• ScatterChart

It is plicated to set up, but it will allow you maximum flexibility in how your tooltips are displayed.

According to: @jmac answer, it's easy. But if you can't bold font (according with Google Charts Docs) please set custom font-family, ex.:

function createCustomHTMLContent(date, label, value) {
return '<div style=" font-family:Arial; /* other styles... */">' +
        '<div><b>' + date + '</b></div>'+
        '<div><b>' + label + ':</b> ' + value + ' </div>'+
    ' </div>'
}

I can't found any solutions for a long while, and after set font-family propeteries everything works :)