CODEWITHSUNDEEP
reactjschartsgoogle-visualizationbar-chartreact-google-charts
CourtneyJ
CourtneyJ

Reputation: 508

Google react chart bar chart options customizing tooltip

I am trying to change the size of the tooltip in my bar chart using the options parameter. However nothing I do affects the tooltip. It seems like the Bar chart has some limitations, although I can't confirm from the documentation or Examples provided, it seems the legend: "none" property has no affect as well as the vAxis: {title: "" }. This is how I am formatting the options object.

export const options = {
  chart: {
    title: "Visits in the last 2 weeks",
    hAxis: {
      title: "Date",
    },
    vAxis: { 
    title: "Visit Count", 
  },
  
    legend: "none",
   tooltip: {innerHeight: "10px", outerHeight: "10px", showColorCode: false,},
  },
}

Is there something Im doing wrong here in the formatting of my options? Or possibly more documentation somewhere that explains more on customizing?

Upvotes: 1

Views: 1527

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

there are no standard configuration options that will control the size of the tooltip.

in order to customize the size, you will need to use html tooltips.

you can provide your own custom html for the entire tooltip.
see: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content

or you can have the chart produce the standard tooltip using html, which will allow you to customize the tooltip using css.
see: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#rotating-tooltips

both require the following config option be added...

tooltip: { isHtml: true }

Upvotes: 0

Related Questions