Interactivity

If `isInteractive` is `true`, the component emits events when interacting with the bins.

Events:

• Clicking a bin selects or deselects it depending on if it was already selected and depending on the pressed modifier key (see below) and dispatches a `clicked` event with payload `{index, selectedBins}`

• Clicking the background resets the selection and dispatches a `clicked` event, with payload `{selectedBins: []}`

• Mouse-exiting a bin dispatches a `exited` event, with the payload being the exited bin index

• Brushing – clicking a bin and dragging the pointer over other bins selects them and dispatches brush events:

•• as soon as we start brushing, a `brushstart` event gets dispatched, the payload being the index of the bin where we started brushing;

•• continuing dragging, when the pointer crosses bins a `brushed` event gets dispatched with the payload being `{selectedBins, end, start}`, the currently selected bins and the brushing start and end indices;

•• when we stop dragging by releasing the pointer, a `brushend` event gets dispatched, the payload being the index of the bin where we stopped brushing.

You can use modifiers to add or remove to the selection:

• Holding the `shift` key when brushing or clicking adds the brushed bins to the selection, the payload being the start bin index;

• Holding the `alt` key when brushing or clicking removes the brushed bins to the selection.

A green/red (respectively) line is displayed to help you understand what's going on. You can customise these with props `brushAddStroke`, `brushRemoveStroke`, `brushStrokeOpacity`, `brushStrokeWidth`

You can customize the style of selected bins using: `selectedBinFill`, `selectedBinStroke`, `selectedBinStrokeWidth`.

Please interact with the chart to read the correspondent event payload below.

Choose an example

Usage

<HistogramG
  {bins}
  {height}
  {width}
  flags={{isInteractive: true}}
/>

Props

bins

flags