New to KendoReact? Start a free 30-day trial

React Chat Chart Visualization
Premium

Updated on Jun 24, 2026

Display financial or statistical data visualizations directly in Chat messages. Users can view and interact with charts and graphs as part of the conversation flow, making data analysis more accessible and engaging.

Change Theme

Theme

Loading ...

Setup

To display Chart components inside the Chat messages interface, follow these steps:

1. Install the Charts package

Follow the Getting Started with Charts guide to install and set up the Charts package in your project:

bash

npm install @progress/kendo-react-charts

2. Import the necessary components

In the App component file of your React project (for example, src/App.tsx), add the following code to import the required components from both the Conversational UI and Charts packages:

tsx

import { Chat, Message, User, ChatSendMessageEvent } from '@progress/kendo-react-conversational-ui';
import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem
} from '@progress/kendo-react-charts';

3. Prepare chart data and components

Create chart components for the visualizations you want to display:

tsx

const TrendsChart = () => {
    const data = [
        { name: 'Jan', value: 45000 },
        { name: 'Feb', value: 52000 },
        { name: 'Mar', value: 48000 }
        // ... more data
    ];

    return (
        <Chart style={{ height: 250 }}>
            <ChartSeries>
                <ChartSeriesItem type="line" data={data} field="value" categoryField="name" />
            </ChartSeries>
            <ChartCategoryAxis>
                <ChartCategoryAxisItem />
            </ChartCategoryAxis>
        </Chart>
    );
};

4. Use messageTemplate to conditionally render charts

Define a MessageTemplate function to conditionally render charts based on the message content. This function checks if a message has a chartType property and renders the corresponding chart:

tsx

type AppMessage = Message & {
    chartType?: 'trends' | 'performance' | 'marketShare';
};

const MessageTemplate = (props: { item: AppMessage }) => {
    const message = props.item;
    const isUser = message.author?.id === user.id;

    if (message.chartType) {
        return (
            <div style={{ width: '100%' }}>
                <div>{message.text}</div>
                <div style={{ marginTop: 16 }}>
                    {message.chartType === 'trends' && <TrendsChart />}
                    {message.chartType === 'performance' && <PerformanceChart />}
                    {message.chartType === 'marketShare' && <MarketShareChart />}
                </div>
            </div>
        );
    }

    return (
        <div>
            <span>{message.text}</span>
        </div>
    );
};

<Chat messages={messages} authorId={user.id} messageTemplate={MessageTemplate} />;

React Chat Chart VisualizationPremium