GitHub user dosubot[bot] added a comment to the discussion: How to add a new chart type in superset version 4.1.1?
<!-- Answer --> To add a click event to the Time-series Percent Change chart in Superset 4.1.1, you’ll need to modify the PopKPI React component, which is located at [`superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx`](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx). By default, this component does not have any click event handlers attached. You can add an `onClick` handler to the main container or to specific elements, such as the percent change value. For example, to trigger a callback when the percent change is clicked, wrap the relevant element with an `onClick` prop: ```jsx <ComparisonValue key={`comparison-symbol-${symbol_with_value.columnKey}`} subheaderFontSize={subheaderFontSize} > <Tooltip id="tooltip" placement="top" title={symbol_with_value.tooltipText} > {symbol_with_value.symbol && ( <SymbolWrapper backgroundColor={index > 0 ? backgroundColor : defaultBackgroundColor} textColor={index > 0 ? textColor : defaultTextColor} onClick={() => { // Your custom logic here, e.g. open a modal, update a filter, etc. console.log('Percent change clicked!', symbol_with_value); }} style={{ cursor: 'pointer' }} > {symbol_with_value.symbol} </SymbolWrapper> )} {symbol_with_value.value}{' '} {props.columnConfig?.[symbol_with_value.columnKey]?.customColumnName || ''} </Tooltip> </ComparisonValue> ``` If you want to make the click event more configurable, you can pass a callback function as a prop from the plugin entry point or via `transformProps.ts` (which prepares the chart’s props but does not handle interactivity directly) [see details](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts). This pattern is standard for React-based Superset chart plugins. For more on custom visualizations, check out the [Superset Community Resource Library](https://github.com/apache/superset/wiki/Community-Resource-Library#creating-custom-data-visualizations). <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/16bbe7a2-8b52-4c72-9eb6-4513cee58642?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/16bbe7a2-8b52-4c72-9eb6-4513cee58642?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/16bbe7a2-8b52-4c72-9eb6-4513cee58642?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/16bbe7a2-8b52-4c72-9eb6-4513cee58642?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/16bbe7a2-8b52-4c72-9eb6-4513cee58642?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/16bbe7a2-8b52-4c72-9eb6-4513cee58642?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/16bbe7a2-8b52-4c72-9eb6-4513cee58642?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github)& nbsp;[](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/34817) GitHub link: https://github.com/apache/superset/discussions/34817#discussioncomment-14244444 ---- This is an automatically sent email for notifications@superset.apache.org. To unsubscribe, please send an email to: notifications-unsubscr...@superset.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org
