Events

Passing the event prop will allow you to pass three different event handlers - onClick, onMouseOver, and onMouseOut.

onClick and onMouseOver

You can pass a function to the onClick or onMouseOver handlers to fire a function when you click or hover the visualisation. Depending on the chart type you’re using, you will get a different return – you will find the active item in either datum or activePoints.

datum

The following chart types return the currently hovered / selected item in the datum key in the returned object: CoralBarChart, CoralPeriodChart, and CoralPieChart.


<CoralBarChart
    data={...}
    events={{
        onClick(props) {
            console.log(props)
        }
        onMouseOver(props) {
            console.log(props)
        }
    }}
/>

activePoints

The following chart types return the currently hovered / selected item in the activePoints key in the returned object: CoralAreaChart, CoralGroupBarChart, CoralGroupLineChart, CoralLineChart, and CoralStackChart.


<CoralStackChart
    data={...}
    modifiers={...}
    events={{
        onClick(props) {
            console.log(props)
        }
        onMouseOver(props) {
            console.log(props)
        }
    }}
/>

onMouseOut

onMouseOut can be used to clean up your events to reset charts and other externally modified elements back to their default state, if needed, when you un-hover the element you are currently hovering.

Examples

datum

Changing the opacity of the currently hovered item on hover on a bar chart can be achieved as below.


const [hoveredItem, setHoveredItem] = useState<any>(null);
const data = basicTemplateData.map((d) => ({
    ...d,
    opacity: hoveredItem && d.x === hoveredItem.x ? 0.8 : 0.4,
}));
<CoralBarChart
    data={data}
    events={{
        onMouseOver: ({ datum }) => {
            setHoveredItem(datum);
        },
        onMouseOut: () => {
            setHoveredItem(null);
        },
    }}
/>;

activePoints

Grab and output the currently hovered group item.


const [hoveredItem, setHoveredItem] = useState<any>(null);
 
const ActivePoints = ({ items }: { items: [] }) => {
    if (!items) return null;
 
    return items.map((item: any, index) => (
        <div key={index}>
            x: {item.x} y: {item.y}
        </div>
    ));
};
 
<div style={{ height: 100 }}>
    <ActivePoints items={hoveredItem} />
</div>
 
<CoralStackChart
    data={...}
    modifiers={...}
    events={{
        onMouseOver: ({ activePoints }) => {
            setHoveredItem(activePoints);
        },
        onMouseOut: () => {
            setHoveredItem(null);
        },
    }}
/>