Salesforce Lightning Experience provides charts which can be created using the Lightning Dashboard Builder with just point and click. The charts can be added on the pages using the App Builder’s “Standard Report Chart” component. The report filters can be used to display relevant data on the charts. This out-of-the-box component satisfies most requirements. But the filters have their limitations. There can be scenarios where custom logic has to be implemented to filter the data, in such cases third party charting libraries can be leveraged to create interactive visualization components

This post will focus on building custom visualization lightning components using Chart.js library (that are Lightning Locker service compliant)

Add chartjs to Static Resource

Before we start creating the lightning component the Chart.js library has to be added as a static resource in the org. Download Chart.js and upload it as a Static Resource.

  • Go to Setup -> Static Resource
  • Enter the name for the static resource; this will be used to including the library in the component.
  • Upload Chart.js

chart.js

Now we are ready to create the Lightning Component.

Create a Lightning Component

I’m naming mine as DemoLineChartComponent.

Include the static resource that holds the chart.js library in the component and add a controller method ‘generateChart’ which will be used to create the line chart. After including the library we add a canvas element which will be used to draw the chart. The height and width of the canvas can be adjusted to fit the desired dimensions.

Now the component is ready to take input and draw the chart on the canvas. So this brings us to the data-source. Chart.js takes a JSON as an input/data source and creates the output chart. So let’s take a look at what the JSON input looks like for a line chart.

This JSON data will be used to create a line chart. The js method to create the chart is:

Save the component and the controller and we’re ready to see how the chart looks on the UI. For this we can add the component we created on the home page, note that the component implements=”flexipage:availableForAllPageTypes”. This allows the components to be embedded in the lightning flexipages. Once added on the homepage this is what the line chart looks like: chart.js


1 Comment

Swathi · March 13, 2018 at 10:39 pm

Well explained, very concise.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Apex

Using Salesforce Reports and Dashboards REST API

The Reports and Dashboards REST API gives you programmatic access to your report and dashboard data as defined in the report builder and dashboard builder. The API lets you integrate the data into any web Read more…

Lightning

LockerService for Secure Lightning Components

Lightning LockerService is a security architecture for Lightning components, that enhances security by isolating individual Lightning components in their own namespace. LockerService also promotes best practices that improve the supportability of your code by only Read more…

Lightning

Auto Style Existing Visualforce Pages with Lightning Experience Stylesheets

With the Winter 18 release, Salesforce has introduced Lightning Experience Stylesheets (Beta). This enables the visualforce page to be rendered with the look nad feel of lightning experience when viewed in Salesforce1 or in Lightning Read more…