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:
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.
The source code is available as part of the unmanaged packaged referenced in the installation instructions. Here are a few interesting highlights:
Follow the instructions below to install the Chart.js demo app in your org:
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.