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


5 Comments

Swathi · March 13, 2018 at 10:39 pm

Well explained, very concise.

Zhining Zhang · March 29, 2019 at 11:20 am

I just tried, and got error. Failed to create chart: can’t acquire context from the given item.
Is it security issue? Thanks!

    Shastri Ji · April 17, 2019 at 2:04 pm

    Hey Zhining,

    With the locker services enabled in the salesforce orgs, you can no longer access DOM elements using document.getElementById(). The error you are encountering can be due to using this method in js. use var component.find(“elementId”).getElement(); and this should fix the issue.
    the code should look like this to access the canvas in the js: var ctx = component.find(“linechart”).getElement();

Harish S · July 1, 2019 at 7:52 pm

Hello,

Thanks it worked great!.
I would need a small help
1. as of now the the pointer/markers are only visible only if I hover, I need them to display always.
2.If I would like the Y-Axis values from 200-300 what needs to be done.

Could you please help me with this.

Thanks!

Harish S · July 8, 2019 at 8:00 pm

I got it,

options: {
responsive: true,
maintainAspectRatio :false,
animation: {
onComplete: function (animation) {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, ‘normal’, Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = “black”;
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘bottom’;

this.data.datasets.forEach(function (dataset)
{
for (var i = 0; i “+ctx.fillText(dataset.data[i], model.x, model.y – 5));
ctx.fillText(dataset.data[i], model.x, model.y – 5);
}
}
});
}
},
legend: {
onClick: false
}
},
plugins: {
datalabels: {
display: true,
},
}

and it works

Leave a Reply

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

Related Posts

Apex

Lightning Web Components – Get Started

Salesforce released the Lightning Web Component framework as part of Spring 19 pre-release. Lightning Web Components is a new programming model for building Lightning components. It uses web standards breakthroughs, can coexist and inter-operate with Read more…

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…