Chart Builder component

The Chart Builder (cjChartBuilder) Lightning component uses Chart.js from Salesforce Labs's Lightning Web Chart.js Component (LWCC) to visualize data and can be used on any record page in Scientific Publications Cloud product.

Note: While the Chart Builder component can be used to visualize any type of data on any record page, the ppChartBuilder component should be used instead when visualizing journal metrics data from the Digital Science integration. The ppChartBuilder component extends the Chart Builder component, is built specifically for Digital Science, and is used by default on the journal comparison screen of the Document Target Search and Proposed Target Search modals as well as on the Digital Science Journal Record Page (PP_Digital_Science_Journal_Record_Page). For more information, reference the Digital Science section on the Digital Science page.

Configuration

You can add the Chart Builder component to any record page and then configure its appearance and data in the Lightning App Builder.

Style the visualization

The Chart Builder component offers the following styling options:

Field	Description
Type	The type of visualization or chart that should display the specified data. Options include, but are not limited to: - line - bar - radar
Title	The title for the visualization. To use a custom label, use the format \{!$Label.customLabelName\}.
Legend Position	The position of the legend relative to the visualization. Options include: - top - bottom - right - left
CSS Style	Any inline CSS to configure the appearance of the visualization. To use a custom label, use the format \{!$Label.customLabelName\}.
Color palette to use	The Salesforce Lightning Design System (SLDS) color palette to style the visualization.
Fill the chart?	When checked, the blank areas in a line chart are filled in.
Dataset Labels	The label for each value set if the Dataset field is used to fetch the data. For more information, reference the Specify the data section below. To use a custom label, use the format \{!$Label.customLabelName\}.

Specify the data

The Chart Builder component can retrieve and surface data in the following ways:

Field	Description
Dataset	A static JSON array. To use a custom label, use the format \{!$Label.customLabelName\}.
SOQL	An aggregate SOQL query. To use a custom label, use the format \{!$Label.customLabelName\}.
Custom Data Provider	A custom data provider, like an Apex class, that must extend the Chart Data Provider (CJ_ChartDataProvider) class. :::: note ::: title ::: To use the Chart Data Provider class in the product, you must include the CJ_ prefix (i.e., CJ_ChartDataProvider, not ChartDataProvider). ::::

Note: The SOQL and Custom Data Provider fields will always override the Dataset field and will override each other depending on the order in which each field is set. If the SOQL field is set first and the Custom Data Provider field is set later, then the latter will override the former, and vice versa.