Skip to main content

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 the 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 Display journal metrics on Journal record pages 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

To use the Chart Data Provider class in the Scientific Publications Cloud 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.