{"size": 1206, "ext": "js", "max_stars_repo_path": "src/react-google-charts/GoogleBarChart.js", "max_stars_repo_name": "roybailey/react-storybook-showcase", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/react-google-charts/GoogleBarChart.js", "max_issues_repo_name": "roybailey/react-storybook-showcase", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/react-google-charts/GoogleBarChart.js", "max_forks_repo_name": "roybailey/react-storybook-showcase", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.2173913043, "max_line_length": 106, "alphanum_fraction": 0.539800995}
import React from 'react'
import { Chart } from 'react-google-charts';


export default () => {

  const data = [
    ["Element","Density",{"role":"style"}],
    ["Copper",8.94,"#b87333"],
    ["Silver",10.49,"silver"],
    ["Gold",19.3,"gold"],
    ["Platinum",21.45,"color: #e5e4e2"]
  ];
  const options = {
    "title":"Density of Precious Metals, in g/cm^3",
    "bar":{"groupWidth":"95%"},
    "legend":{"position":"none"}
  };
  const chartEvents = [
        {
          eventName: 'select',
          callback(Chart) {
            // Returns Chart so you can access props and  the ChartWrapper object from chart.wrapper
            const selected = Chart.chart.getSelection();
            console.log('Selected ', JSON.stringify(selected,null,2));
            if(selected.length > 0) {
              console.log(data[selected[0].row+1][0] +' : '+ data[selected[0].row+1][selected[0].column]);
            }
          },
        }
      ];

  //const chartEvents = [];

  return <Chart
       chartType="BarChart"
       chartEvents={chartEvents}
       data={data}
       options={options}
       graph_id="BubbleChart"
       width={'100%'}
       height={'400px'}
       legend_toggle
     />
};
