Programmatic usage

This page is for developers building their own Lightning Web Components. If you are adding a chart through the Lightning App Builder or Flow Builder, you do not need anything here.

Sliick Charts can be embedded directly in your templates and driven from your own component’s data.

Template

<c-Sliick-charts
  chart-type="line"
  chart-data="{myChartData}"
  chart-size="400"
  chart-title="Performance Trend"
>
</c-Sliick-charts>

JavaScript controller

import { LightningElement } from "lwc";

export default class RevenueDashboard extends LightningElement {
  myChartData = [
    { label: "Jan", value: 3200 },
    { label: "Feb", value: 4100 },
    { label: "Mar", value: 3800 },
  ];
}

Each item needs a label and a value, and can optionally carry a color. The full data format, and the properties that match the ones shown in the App Builder panel, are described in Charts on Lightning pages.