Building Lightning Components with Chart.js

When you need to build custom data visualization components, you can leverage third-party charting libraries like Chart.js, D3, and Highcharts. In this article, I share a set of Lightning Components built with Chart.js.

The Lightning Experience charts are gorgeous. You can use the Lightning Dashboard Builder to assemble them in a point-and-click environment and create dashboards that are both beautiful and insightful. You can also use App Builder to add charts to pages using the Standard Report Chart component and its many filtering options. With all that power and flexibility, reports, charts, and dashboards should satisfy most of your data visualization requirements, without code!

In some specialized situations, however, you may come across requirements that call for writing custom data visualization components. Those requirements usually fall in two categories:

• Interactive dashboards. For example, clicking a data point in one chart updates another chart with an animation that visually represents the data transformation.
• Real-time dashboards. Charts that update in real time based on a data feed: IoT feeds, market feeds, etc.

Watch the video below to see an example of an interactive and a real time dashboard built with custom data visualization Lightning Components powered by Chart.js.

Code Highlights

The source code is available as part of the unmanaged packaged referenced in the installation instructions. Here are a few interesting highlights:

• The lightning components communicate using an application event called ChartEvent.
• The OlympicDataService module is an example of sharing code between components. (I wrote more on this topic in this post). Click File > Open > Static resources > OlympicDataService to open the file in the Developer Console.
• The components in this application are built with Chart.js 2.3 and work with the Locker Service enabled (we are working on Chart.js 2.5 support).

Installation Instructions

Follow the instructions below to install the Chart.js demo app in your org:

1. Make sure your org is ready for Lightning Components (Enable Lightning Experience, set up My Domain, and deploy to all users).
2. Click this link to install the ChartJS Demo unmanaged package in your org, and select Install for All Users.
3. In Lightning, open the ChartJS Demo application
4. Click the Interactive tab. Click a data point in the Medal Timeline Chart: The doughnut and bar charts automatically update to show data reflecting your selection. Click a medal type in the doughnut chart: the bar chart automatically updates to show the country distribution for the selected medal type.
5. Click Real Time tab to experience the real-time charts.

Summary

Before you start writing data visualization code, always make sure your requirements can’t be addressed by the built-in reports, charts, and dashboards. When you have to build a custom data visualization experience, Chart.js is one example of a charting library you can use to build interactive or real time dashboards.

Resources

• LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components
• Trailhead Module: Reports and Dashboards
• Chart.js documentation