How to reflect the tick value in tooltip content in Google charts (Bubble Chart)

user_8969408 0
Viewed 194

I am using Angular Google charts library. As per the official documentation, the value of x axis can only be a number. I wanted to plot the graph by string, hence i used hAxis.tick which changes the horizontal axis plot to string very well. However this is not reflecting the tooltip, the tooltip still shows a number.

Any way using which I can map the value in the ticks to the tooltip content.

Below is the sample snippet code for HTML

<google-chart
      title="Bubble Chart"
      type="BubbleChart"
      [data]="plotData"
      [options]="bubbleChartoptions"
      [columns]="bubbleColumnNames"
      [width]="550"
      [height]="350"
    >
    </google-chart>

Also, the ts file contains the following data which is used to plot the data

bubbleColumnNames:['ToDisplay', 'hAxisValue', 'vAxisValue','bubbleType','size'] 


plotData: [
            ['', 1, 3, 'Bubble1', 10],
            ['', 1, 8, 'Bubble2', 20],
            ['', 2, 3, 'Bubble1', 30],
            ['', 2, 4, 'Bubble2', 40],
            ['', 3, 6, 'Bubble1', 50],
            ['', 3, 7, 'Bubble2', 60],
            ['', 4, 7, 'Bubble1', 70],
            ['', 4, 7, 'Bubble2', 80],
          ],
bubbleChartoptions = {
  hAxis: {
  ticks: [{  v: 1, f:'param1'}, {v: 2, f:'param2'}, {v: 3, f:'param3'}],
}

Ideally the tooltip should show param1 corresponding to hAxisValue, but it shows 1

Thanks!

xticks angular google-visualization charts
1 Answers

the tooltip will display the formatted value of the x-axis by default.

much like the ticks you are generating,
we can supply the formatted value in the data using object notation...

plotData: [
  ['', {v: 1, f: 'param1'}, 3, 'Bubble1', 10],
  ['', {v: 1, f: 'param1'}, 8, 'Bubble2', 20],
  ['', {v: 2, f: 'param2'}, 3, 'Bubble1', 30],
  ['', {v: 2, f: 'param2'}, 4, 'Bubble2', 40],
  ['', {v: 3, f: 'param3'}, 6, 'Bubble1', 50],
  ['', {v: 3, f: 'param3'}, 7, 'Bubble2', 60],
user_50907710
Related