Charts on Lightning pages

The Lightning App Builder is the easiest way to put a chart on a record page or an app page. This page covers the whole job: placing the component, setting its properties, and writing the data it draws.

Add the chart to the page

1. Navigate to the page you wish to edit and click the Setup Gear > Edit Page.
2. Search for “Sliick Charts” in the component search box.
3. Drag the component onto your canvas.
4. Configure the properties in the right-hand panel.

Configuration options

Property	Description
Chart Type	Select the visual style (Donut, Pie, Bar, Column, Line, Area).
Chart Data (JSON)	Paste your data array in JSON format (see below).
Chart Size (px)	Set the width and height (Default: 300px).
Chart Title	An optional header displayed above the chart.
Hide Legend	Toggle the visibility of the colour-coded guide.

Chart data

Sliick Charts expects a simple JSON array of objects. Each object must have a label and a value. You can optionally provide a color as a hex code, named colour, or CSS function.

[
  { "label": "Q1 Sales", "value": 45000, "color": "#0070d2" },
  { "label": "Q2 Sales", "value": 62000, "color": "#4bca81" },
  { "label": "Q3 Sales", "value": 38000, "color": "#ffb75d" },
  { "label": "Q4 Sales", "value": 51000, "color": "#e96d63" }
]

The same data format is used everywhere a chart appears, including Flow screens and custom components.

Note: A missing comma or quote is enough to stop the chart drawing. If your chart does not appear, paste the data into a validator such as JSONLint before you change anything else. See Troubleshooting and FAQ.

Next step

To show a chart inside a guided process rather than on a page, see Charts in Flow screens.