onClick Handler on Tremor Charts

[Johann01]

I just checked the documentation and browsed the Tremor github is there a documented way to add a onClick Handler on the tremor charts?

I saw that they are based on Recharts and Recharts has already implemented such an API for there charts. https://recharts.org/en-US/examples/BarChartWithCustomizedEvent https://recharts.org/en-US/api/BarChart

This is not yet implemented for Tremor rght?

[mitrotasios]

hi @Johann01, thanks for the comment. That makes sense I think. We are planning to refactor our Charts and potentially also change the underlying library, so we will definitely consider it!

[severinlandolt]

Hey @Johann01, we would love to hear more about your use case with tremor.so. Would you like to hop on a call with us next week?

[Johann01]

Sure :)

[severinlandolt]

@Johann01 Cool, are you on twitter or can you give us your email?

[karansingh01]

Hi, I was wondering about the same. is there any way of clicking on one of the bars in barchart to open up a new page about that specific bar and not just the little square from valueformatter. Hope that made sense, here you can see my code, where i want to make each bar clickable:

<BarChart stack={true} data={isPercentage ? percentageData : totalData} dataKey='navn' categories={hidden ? ['volum', 'ekstra'] : ['volum']} colors={['blue', 'red']} marginTop='mt-6' yAxisWidth='w-12' valueFormatter={isPercentage ? percentageFormat : totalFormat} />

Great job on the tremor framework :)

[davialcantaraa]

Any updates?

[dpromisel]

Any updates on this or places I can track / contribute? Would love to be able to click / drag on charts to perform a sub-selection! Really enjoying working with the library so far!

[severinlandolt]

OnClick Proposal:

This a draft of how onClick behavior on our charts should work.

New Every chart gets 2 new properties:

• onValueChange?: (value: any) => void; Returns the payload of the clicked element.
• showOnClickVisualFeedback?: boolean (default: false). This lets you decide if you want visual feedback. Example: https://github.com/tremorlabs/tremor/assets/41927988/de968ad7-4d43-4d6c-91b8-c68474c46586

Area Chart https://www.figma.com/file/YPGoRmcDy4jsL02T7wqibQ/Tremor-UI-2.0?type=design&node-id=534%3A2822&mode=design&t=zkpgTOWMZzKoS68I-1

Line Chart https://www.figma.com/file/YPGoRmcDy4jsL02T7wqibQ/Tremor-UI-2.0?type=design&node-id=534%3A3269&mode=design&t=zkpgTOWMZzKoS68I-1

Bar Chart + Stacked BarChart https://www.figma.com/file/YPGoRmcDy4jsL02T7wqibQ/Tremor-UI-2.0?type=design&node-id=534%3A3634&mode=design&t=zkpgTOWMZzKoS68I-1

https://www.figma.com/file/YPGoRmcDy4jsL02T7wqibQ/Tremor-UI-2.0?type=design&node-id=534%3A4308&mode=design&t=zkpgTOWMZzKoS68I-1

Donut Chart https://www.figma.com/file/YPGoRmcDy4jsL02T7wqibQ/Tremor-UI-2.0?type=design&node-id=534%3A5246&mode=design&t=zkpgTOWMZzKoS68I-1

Scatter Chart https://www.figma.com/file/YPGoRmcDy4jsL02T7wqibQ/Tremor-UI-2.0?type=design&node-id=534%3A5496&mode=design&t=zkpgTOWMZzKoS68I-1

[jzfrank]

Looks interesting! I would like to be assigned for this :)

[christopherkindl]

Awesome, thanks @jzfrank!