Open milosimr opened 6 years ago
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 :)
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') }) } } />
Hi! Is exposing the plotly events in the works?
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.
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.
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?
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 ?
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
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