Bar #onClick handler should also work for the Label of that Bar

hey there,

I use the Vertical Barchart Component. The Bar#onClick handler works like expected. But when I have a Label on top of the Bar, clicking on the label won’t call the onClick handler with the bar data. Check the attached screen, you can imagine, that clicking on the bar works, but clicking on the label does not, confuses quite a lot of Users.

Thus I would propose: the Bar onClick handler gets also triggered when the respective label is clicked.

Code that produces above Chart.

<BarChart data={data} layout='vertical' gapSize={10}>
	<XAxis type="number" orientation='bottom' hide={false} domain={[0, this.state.max]} allowDecimals={false}>
		<Label value="Anzahl der Meldungen" offset={-2} position="insideBottomRight" />
	</XAxis>
	<CartesianGrid strokeDasharray="3 3" horizontal={false}/>
	<Bar dataKey="value" fill="#155a89" barSize={25} onClick={data=>this.handleClick(data)}>
		<LabelList valueAccessor={i => i.label+' ('+i.value+')'} position='insideLeft' width={800} style={ {textShadow:'1px 1px 1px #000',fill:"#f5f5f6"} }/>
	</Bar>
	<YAxis type="category" hide={true}/>
</BarChart>

[DigidragonZX]

A dirty fix for this issue is to add the “pointer-events: none” css-style to allow for clicking trough the label: <LabelList dataKey="tooltip" style={{pointerEvents: 'none'}}/>

[PatrickPro]

I ran into the same issue and would appreciate a solution 👍