Contents
How to use chartjs in Lightning Web Components?
Below are the steps for that. Download the distributed version of ChartJs from here. (Open link -> Right Click -> Save As) Create a new Lightning web component with the name chartExample and put the following code into JS and HTML files respectively. Here is the code for my component.
How to load line chart in chart.js?
Lastly, we are declaring some additional Chart.js options for nice axes formatting. That is all we need to load a static line chart. Next, we’re going to add a date range picker and load data dynamically based on the date range selected by the user. Add Jquery, Date Range Picker, and Moment.js libraries to your tag.
How to create a dataset in chart.js?
To make this code work, we need to make a couple of things. First, add the tag to the inside of your html . Next, we need to define a chartJsData function, which should accept a resultSet returned from Cube.js and format it for Chart.js. Lastly, we are declaring some additional Chart.js options for nice axes formatting.
How to make a chart with jQuery and moment?
Next, we’re going to add a date range picker and load data dynamically based on the date range selected by the user. Add Jquery, Date Range Picker, and Moment.js libraries to your tag. Next, let’s wrap the code to render a chart into the drawChart function, which is going to accept two arguments: start date and end date.
How does the Lightning Data Service help you?
In addition to providing data access, Lightning Data Service caches and synchronizes any data shared by the lightning:record-XXX base components, custom components that use force:recordData, and any standard forms used by Lightning. In Lightning Web Components, there are several ways in which you can take advantage of the Lightning Data Service:
How does caching and synchronizing component data work?
The service provides a cache shared amongst all the components that use the service, and it is smart enough to notify those components about changes of the records performed through the service so that the components synchronize. It works both for Aura Components and Lightning Web Components. Want to know more?
What are the Lightning components in Salesforce.com?
In Lightning Web Components, several base components such as lightning-record-form, lightning-record-edit-form and lightning-record-view-form use the Lightning Data Service. These let you create custom forms in a declarative, quick and simple way without having to write Apex.