New to KendoReact? Start a free 30-day trial

React Chat Chart Visualization
Premium

Updated on Feb 10, 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

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

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