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

[quorak]

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>

[quorak]

any idea how to do this

[PatrickPro]

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

[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'}}/>

[anthony2025]

@DigidragonZX that pointerEvents hack worked wonders on my project, thanks

[olastor]

+1

[dan-h-ch]

+1 for hacky solution, but would be nice to have this work out of the box.

[ralphsmith80]

A possible simple solution might be to allow an onClick prop on the <LabelList>. You would have to Set it on the Bar and the LabelList but I would take that minor annoyance over hiding pointer events. Also clicking the label should probably do the same thing as clicking the bar anyway.

[bvego]

Any chance of fixing this? A valid use case is: LabelList with position="right" used with a vertical bar chart where the cells are too small to click

Sample:
https://monosnap.com/file/0QHGRFs4qQCP6B8sKZ3Xl3TqWolHEa

[ihryshchenko]

Why was it closed?

[ckifer]

Thanks for commenting - these buried closed issues are hard for me to find. I'll reopen this.

[ihryshchenko]

A possible simple solution might be to allow an onClick prop on the <LabelList>. You would have to Set it on the Bar and the LabelList but I would take that minor annoyance over hiding pointer events. Also clicking the label should probably do the same thing as clicking the bar anyway.

Good point!

[khanSoliheen]

@DigidragonZX , @olastor , @dan-h-ch ,I tried your solution but it is not working for me. Could you please go through the below cod and lemme know if it is the correct way to do it? I appreciate it guys!. I tried to give onClick even as well @ihryshchenko
<BarChart width={450} height={350} margin={{ top: 10, left: -30 }} legendType={'none'} data={generateObjectArray([...['self-activation', 'self-confidence', 'communication-strategy', 'cooperation', 'regularity'].map((trait) => data[trait])])}>



{['self-activation', 'self-confidence', 'communication-strategy', 'cooperation', 'regularity'].map((trait, index) => {
return <linearGradient
key={gradient-${index}}
id={custom-gradient-${index}}
background="yellow"
x1="0%"
y1={'0%'}
x2="0%"
y2={'100%'}

                                                                    >
                                                                        <stop offset={0} stopColor='white' />
                                                                        <stop offset={getPositionOfNormalizedValue(trait) - 0.02} stopColor={getColor(data[trait].level).color} />
                                                                        <stop offset={getPositionOfNormalizedValue(trait)} stopColor={'black'} />
                                                                        <stop offset={getPositionOfNormalizedValue(trait) + 0.02} stopColor={getColor(data[trait].level).color} />
                                                                        <stop offset={1} stopColor='white' />
                                                                    </linearGradient>;
                                                                })}
                                                            </defs>
                                                            <YAxis ticks={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} interval={0} domain={[1, 10]} />
                                                            {/* <Tooltip cursor={false} /> */}
                                                            {/* <Bar dataKey="data" fill="url(#custom-gradient)" /> */}
                                                            <Bar dataKey="data" onClick={e => handleBarHandler(e)} barSize={50}>
                                                                {['self-activation', 'self-confidence', 'communication-strategy', 'cooperation', 'regularity'].map((trait, index) => <Cell key={`cell-${index}`} fill={`url(#custom-gradient-${index})`} stroke="#000" strokeWidth={0.5} width={50} />)}
                                                                <LabelList  dataKey="data" style={{pointerEvents: 'none'}} />
                                                            </Bar>
                                                        </BarChart>