Angular Chat Chart Visualization

Updated on Feb 5, 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. Follow the Getting Started with Charts guide to install and set up the Charts package in your project.

2. Import the necessary Kendo Chart components in your standalone component:

   TS

   import { KENDO_CONVERSATIONALUI, Message } from '@progress/kendo-angular-conversational-ui';
   import { KENDO_CHARTS } from '@progress/kendo-angular-charts';
   
   @Component({
     selector: 'my-app',
     imports: [KENDO_CONVERSATIONALUI, KENDO_CHARTS],
     template: `...`,
   })
   export class AppComponent {}

3. Prepare the data for the chart you want to display:

   TS

   public chartConfigs = {
       line: {
           title: 'Sales Trends',
           data: [
               { name: 'Jan', value: 45000 },
               { name: 'Feb', value: 52000 },
               // ... more data
           ],
       },
   };

4. Use the kendoChatReceiverMessageTemplate to conditionally render charts in messages:

   HTML

   <kendo-chat [messages]="messages" [authorId]="sender.id">
     <ng-template kendoChatReceiverMessageTemplate let-message>
       {{ message.text }}
       @if (message.chartData) {
         <div style="margin-top: 16px;">
           <kendo-chart [style.height.px]="250">
             ...
           </kendo-chart>
         </div>
       }
     </ng-template>
   </kendo-chat>

Suggested Links

• AI and Chatbot Integrations
• Data Binding
• Overview
• API Reference of the Chat