Building Interactive Donut Charts in Salesforce LWC Using Chart.js

SelfCodedMindset

2 min read

·

Aug 20, 2025

--

Listen

Share

Data visualization is a powerful way to make Salesforce applications more interactive and insightful. Instead of presenting users with plain numbers, charts and graphs can highlight trends and insights at a glance.

One popular option for creating charts in Lightning Web Components (LWC) is Chart.js, a lightweight and flexible JavaScript charting library. In this tutorial, we’ll walk through how to integrate Chart.js into an LWC and render a dynamic donut chart.

Step 1: Load Chart.js into LWC

First, upload the Chart.js library as a static resource in Salesforce. Once uploaded, import it into your component using the loadScript function from lightning/platformResourceLoader.

import {loadScript} from ‘lightning/platformResourceLoader’;
 import chartjs from ‘@salesforce/resourceUrl/chartjs’; //your static resource

Step 2: Define the Chart Data and Configuration

Next, prepare the data and configuration for your donut chart. This includes labels, datasets, colors, and chart options such as legends and animations.

data = {
 labels: [
 ‘Invested Amount’,
 ‘Ext. Returns’
 ],
 datasets: [{
 label: ‘My First Dataset’,
 data: [0,0],
 backgroundColor: [
 ‘rgb(185, 173, 176)’,
 ‘rgb(54, 162, 235)’,
 ],
 hoverOffset: 4,
 borderWidth: 0
 }]
 };
config = {
 type: 'doughnut',
 data: this.data,
 options: {
 responsive: true,
 plugins: {
 legend: {
 position: 'right'
 }
 },
 animation: {
 animateScale: true,
 animateRotate: true
 }
 }
 };

Step 3: Render the Chart

In the renderedCallback lifecycle hook, load the Chart.js library and initialize the chart once the component has been rendered.

renderedCallback() {
 if (this.isChartJsInitialized) {
 return;
 }
 this.isChartJsInitialized = true;
 Promise.all([
 loadScript(this, chartjs)
 ])
 .then(() => {
 console.log(‘script loaded:’, chartjs);
 const ctx = this.template.querySelector(‘canvas.donut’)
 .getContext(‘2d’);
 this.chart = new window.Chart(ctx, this.config);
 this.handleChange();
 })
 .catch(error => {
 console.log(‘Error loading Chart.js’);
 console.log(JSON.stringify(error));
 });
 }

Step 4: Update the Chart with Dynamic Data

Once your chart is rendered, you can update it dynamically based on your application logic. For example, update the chart with investment data:

this.data.datasets[0].data = [totalInvestment, expectedReturns];
this.chart.update();

This ensures that whenever your underlying data changes, the donut chart refreshes automatically.

Step 5: Add the HTML Template

Finally, add the canvas element to your component’s HTML file.

<canvas id=”donut” class=”donut” width=”400" height=”400" lwc:dom=”manual”
 style=”max-width: 400px; max-height: 400px;”>
 </canvas>

By combining LWC’s reactivity with Chart.js’s visual capabilities, you can build dashboards that transform raw Salesforce data into meaningful insights for end users.

Final Thoughts

This example demonstrates how simple it is to integrate Chart.js with LWC. Whether you are building dashboards, analytics pages, or financial summaries, this approach helps bring your Salesforce apps to life with interactive and real-time visuals.