javascriptreactjsreact-google-charts

All tooltips always visible on react-google-charts on page load?


Is there a way to display all tooltips without the need to hover or select a section on a react-google-chart?

Managed to get it working with Google charts (pureJS) but, cannot figure out a way to use the same in react-google-charts.

google.load('visualization', '1.0', {
  'packages': ['corechart']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  // Set chart options
  var options = {
    'title': 'How Much Pizza I Ate Last Night',
    'width': 400,
    'height': 300,
    tooltip: {
      trigger: 'selection',
      /* isHtml: true */
    }
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'ready', function(e) {
    chart.setSelection([{
      row: 0,
      column: null
    }, {
      row: 1,
      column: null
    }, {
      row: 2,
      column: null
    }, {
      row: 3,
      column: null
    }, {
      row: 4,
      column: null
    }]);
  });
  chart.draw(data, options);
};

<div id="chart_div"></div>


.chart {
  background-color: #eee;
}

https://jsfiddle.net/dahlin/cfpyu9m5/11/


Solution

  • Try this,

    import React from "react";
    import { Chart } from "react-google-charts";
    
    export const data = [
      ["Task", "Hours per Day"],
      ["Work", 11],
      ["Eat", 2],
      ["Commute", 2],
      ["Watch TV", 2],
      ["Sleep", 7]
    ];
    
    export const options = {
      title: "My Daily Activities",
      tooltip: {
        trigger: "selection"
      }
    };
    
    export default function App() {
      return (
        <Chart
          chartType="PieChart"
          data={data}
          options={options}
          width={"100%"}
          height={"400px"}
          chartEvents={[
            {
              eventName: "ready",
              callback: ({ chartWrapper, google }) => {
                const chart = chartWrapper.getChart();
                chart.setSelection([
                  {
                    row: 0,
                    column: null
                  },
                  {
                    row: 1,
                    column: null
                  },
                  {
                    row: 2,
                    column: null
                  },
                  {
                    row: 3,
                    column: null
                  },
                  {
                    row: 4,
                    column: null
                  }
                ]);
              }
            }
          ]}
        />
      );
    }
    

    Working code here See the sandbox page