CODEWITHSUNDEEP
javascriptgoogle-visualization
Byron
Byron

Reputation: 1313

Google Graph API Custom Tooltip Bolding

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

Default Tooltip

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?

Upvotes: 4

Views: 2428

Answers (2)

divisible
divisible

Reputation: 51

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 :)

Upvotes: 2

jmac
jmac

Reputation: 7128

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 complicated to set up, but it will allow you maximum flexibility in how your tooltips are displayed.

Upvotes: 4

Related Questions