Add click events to table or plot renderers

[milosimr]

Hi, thanks for the great plugin, its working great, but I was wondering if there's a way to add click events to table fields or chart. Or some instructions on how to add them to renderers.

Thanks

[nicolaskruchten]

Sorry for the long delay here, just catching up on issues now... The table renderer supports a click callback (see https://github.com/plotly/react-pivottable/blob/master/src/TableRenderers.jsx#L109) but for charts there's nothing built-in at the moment. I suppose I should expose all the event handlers that Plotly handles :)

[nomoney4me]

Came here looking for an answer to click event on values. I learn more from seeing examples, just to add on to @nicolaskruchten's answer, this is what I am currently using. <PivotTable data={ props.data } tableOptions={ { clickCallback: (e, value, filters, pivotData) => { alert('hello world') }) } } />

[rosemerryberry]

Hi! Is exposing the plotly events in the works?

[ghost]

Hi , is it also working for plotly charts. I am trying to have the same click event on plotly charts like we have for table.

[ghost]

Sorry for the long delay here, just catching up on issues now... The table renderer supports a click callback (see https://github.com/plotly/react-pivottable/blob/master/src/TableRenderers.jsx#L109) but for charts there's nothing built-in at the moment. I suppose I should expose all the event handlers that Plotly handles :)

Hi, nicolaskruchten can you please tell me how can I do the same for charts in pivotetable.js like it is working for table. I am unable to figure out a way by which I could get the data of chart after user clicked on it. In plotly it is possible but in pivote table seems like theres no way as of now.

[nomoney4me]

Sorry for the long delay here, just catching up on issues now... The table renderer supports a click callback (see https://github.com/plotly/react-pivottable/blob/master/src/TableRenderers.jsx#L109) but for charts there's nothing built-in at the moment. I suppose I should expose all the event handlers that Plotly handles :)

Hi, nicolaskruchten can you please tell me how can I do the same for charts in pivotetable.js like it is working for table. I am unable to figure out a way by which I could get the data of chart after user clicked on it. In plotly it is possible but in pivote table seems like theres no way as of now.

@shubham-kotiya Did my example above not work for you? What have you tried already? Do you have a snippet of what you have?

[shubhamkotiya17]

Sorry for the long delay here, just catching up on issues now... The table renderer supports a click callback (see https://github.com/plotly/react-pivottable/blob/master/src/TableRenderers.jsx#L109) but for charts there's nothing built-in at the moment. I suppose I should expose all the event handlers that Plotly handles :)

Hi, nicolaskruchten can you please tell me how can I do the same for charts in pivotetable.js like it is working for table. I am unable to figure out a way by which I could get the data of chart after user clicked on it. In plotly it is possible but in pivote table seems like theres no way as of now.

@shubham-kotiya Did my example above not work for you? What have you tried already? Do you have a snippet of what you have?

@nomoney4me Hi, I have been trying to add click event in plotly charts in pivot table. I am using angular 8 . I am able to add click on table rows as per doc but still not able to figure out how can I add a click on charts and gets the data where user clicks . Is there anyway ?

[nicolas-despres]

For the table I think it is straight forward from the doc. For plotly here is how you can do:

function InteractivePlot(props) {
  const { config } = props
  return <Plot onClick={config.onClick}  {...props} />
}
const PlotlyRenderers = createPlotlyRenderers(InteractivePlot)

Then pass on the onClick via the plotlyConfig property. It was there to help :)

function Pivot(props) {
  const { data, rows, cols, clickCallback } = props
  const [config, setConfig] = useState({ rows, cols })
  const myData = new PivotData(props)

return (
 <PivotTableUI
      data={data}
      onChange={(s) => setConfig(s)}
      renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
      {...config}
      tableOptions={{
        clickCallback,
      }}
      plotlyConfig={{
        onClick: ({ event, points }) => {
         if (points && points.length > 0) {
            const x = config.rows[0]
            const point = points[0]
            const filter = { [x]: point.label }
            clickCallback && clickCallback(event, {}, filter, myData)
          }
        }
      }}
    />)
}

You can also use any of the event properties documented by react-plotly