Support for shadcn/ui Charts in Chainlit CustomElements

[anandwilbert]

Is your feature request related to a problem? Please describe.
I'm always frustrated when I want to create visually appealing data visualizations in Chainlit apps but am limited by the lack of native support for modern, customizable chart components. Specifically, integrating interactive and aesthetically pleasing area charts, like those provided by shadcn/ui (built with Recharts), is challenging without direct support in Chainlit's CustomElements. This makes it harder to build engaging, data-driven applications that meet modern UI/UX standards.

Describe the solution you'd like
I’d like Chainlit to add support for shadcn/ui’s Chart component within the CustomElements framework. This would allow developers to easily integrate and configure area charts with features like grids, axes, tooltips, and legends directly in Chainlit apps. The implementation should enable seamless copy-pasting of shadcn/ui’s Area Chart code, with Chainlit handling the React/Recharts dependencies and providing a simple API to pass data and customize chart properties (e.g., colors, animations, responsiveness) through CustomElements. This would streamline the creation of visually appealing, interactive data visualizations in conversational AI applications.

Describe alternatives you've considered
I’ve considered manually integrating Recharts or other charting libraries into Chainlit apps by building custom components from scratch. However, this is time-consuming, requires managing dependencies, and often results in inconsistent styling with the rest of the app. Another alternative is using existing Chainlit components or external iframe-based solutions, but these lack the flexibility, accessibility, and modern design of shadcn/ui’s Area Chart, making it harder to achieve a polished, cohesive look.

Additional context
The shadcn/ui Area Chart, built with Recharts, is highly customizable and supports features like responsive design, tooltips, legends, and grid lines, which are ideal for creating data-rich, visually appealing dashboards in Chainlit apps. Adding this to CustomElements would align with Chainlit’s goal of enabling rapid development of conversational AI interfaces while enhancing the ability to present data insights attractively. For example, developers could use these charts to visualize trends or metrics in real-time within a Chainlit UI, improving user engagement. Screenshots of shadcn/ui’s Area Chart examples can be found at https://ui.shadcn.com/charts/area for reference

[josca42]

As far as I can tell this can be achieved by simple doing updating frontend/src/components/Elements/CustomElement/Imports.ts to include:

import * as Recharts from 'recharts';
import { ChartContainer, ChartTooltip, ... } from '@/components/ui/chart';

Would you accept a pr on this @asvishnyakov ?

[asvishnyakov]

@josca42 I fear it may increase frontend size significantly, but let's make it work first and discuss the rest after. So yes, I would like to see PR

[josca42]

Perfect I'll make a pr tomorrow and then we can see how much frontend size is affected :-).