Chart

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Chart

Documentation for the Chart component.

Installation

bash

deno run -A jsr:@lockness/ui add chart

Usage

tsx

import { AreaChart, ChartScript } from '@lockness/ui/components'

// Include ChartScript once in your layout to load Chart.js
<ChartScript />

<AreaChart
    chartId='monthly-sales'
    labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
    data={[65, 59, 80, 81, 56, 72]}
/>

Props

AreaChart

Prop	Type	Default	Description
chartId	`string`	required	Unique ID for the chart (required for Chart.js initialization)
labels	`string[]`	required	Chart labels (x-axis)
data	`number[]`	-	Single dataset values (for single area chart)
datasets	`ChartDataset[]`	-	Multiple datasets (for multiple area charts)
color	`string`	`'rgb(59, 130, 246)'`	Primary color for single dataset
fillColor	`string`	`'rgba(59, 130, 246, 0.1)'`	Fill color for single dataset (with opacity)
curved	`boolean`	`false`	Whether to use curved lines
compareTooltip	`boolean`	`false`	Whether to show compare tooltip (two values side by side)
height	`string`	`'300px'`	Chart height
class	`string`	-	Custom class name
id	`string`	-	Element ID

ChartLegend

Prop	Type	Default	Description
items	`ChartLegendItemProps[]`	required	Legend items
position	`'start' \| 'center' \| 'end'`	`'end'`	Position of the legend
class	`string`	-	Custom class name
id	`string`	-	Element ID

ChartLegendItem

Prop	Type	Default	Description
label	`string`	required	Legend label text
color	`string`	required	Color of the legend indicator

ChartDataPoint

Prop	Type	Default	Description
label	`string`	required	Data point label
value	`number`	required	Data point value

ChartDataset

Prop	Type	Default	Description
name	`string`	required	Dataset name
data	`number[]`	required	Dataset values
color	`string`	required	Line color
fillColor	`string`	-	Fill color (with opacity)

INSTALLATION

Include the ChartScript component once in your layout or page to load Chart.js from CDN.

tsx

import { ChartScript } from '@lockness/ui/components'

// In your layout or page
<ChartScript />

SINGLE AREA CHART

tsx

import { AreaChart } from '@lockness/ui/components'

<AreaChart
  chartId="single-area-chart"
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
  data={[65, 59, 80, 81, 56, 55, 72]}
/>

MULTIPLE AREA CHART

Income

Outcome

tsx

import { AreaChart, ChartLegend } from '@lockness/ui/components'

<ChartLegend
  items={[
    { label: 'Income', color: 'rgb(59, 130, 246)' },
    { label: 'Outcome', color: 'rgb(147, 51, 234)' },
  ]}
/>
<AreaChart
  chartId="multiple-area-chart"
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
  datasets={[
    { name: 'Income', data: [65, 59, 80, 81, 56, 55, 72], color: 'rgb(59, 130, 246)' },
    { name: 'Outcome', data: [28, 48, 40, 19, 86, 27, 50], color: 'rgb(147, 51, 234)' },
  ]}
/>

CURVED AREA CHART

Income

Outcome

tsx

<AreaChart
  chartId="curved-area-chart"
  labels={labels}
  datasets={datasets}
  curved
/>

CUSTOM COLORS

tsx

<AreaChart
  chartId="custom-color-chart"
  labels={labels}
  data={data}
  color="rgb(34, 197, 94)"
  fillColor="rgba(34, 197, 94, 0.15)"
  curved
/>

SINGLE BAR CHART

tsx

import { BarChart } from '@lockness/ui/components'

<BarChart
  chartId="single-bar-chart"
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
  data={[65, 59, 80, 81, 56, 55, 72]}
/>

MULTIPLE BAR CHART

Income

Outcome

tsx

<ChartLegend
  items={[
    { label: 'Income', color: 'rgb(59, 130, 246)' },
    { label: 'Outcome', color: 'rgb(209, 213, 219)' },
  ]}
/>
<BarChart
  chartId="multiple-bar-chart"
  labels={labels}
  datasets={[
    { name: 'Income', data: incomeData, color: 'rgb(59, 130, 246)' },
    { name: 'Outcome', data: outcomeData, color: 'rgb(209, 213, 219)' },
  ]}
/>

HORIZONTAL BAR CHART

tsx

<BarChart
  chartId="horizontal-bar-chart"
  labels={['Product A', 'Product B', 'Product C', 'Product D', 'Product E']}
  data={[85, 72, 96, 54, 68]}
  horizontal
/>

SINGLE LINE CHART

tsx

import { LineChart } from '@lockness/ui/components'

<LineChart
  chartId="single-line-chart"
  labels={labels}
  data={data}
/>

MULTIPLE LINE CHART

Income

Outcome

tsx

<ChartLegend
  items={[
    { label: 'Income', color: 'rgb(59, 130, 246)' },
    { label: 'Outcome', color: 'rgb(147, 51, 234)' },
  ]}
/>
<LineChart
  chartId="multiple-line-chart"
  labels={labels}
  datasets={[
    { name: 'Income', data: incomeData, color: 'rgb(59, 130, 246)' },
    { name: 'Outcome', data: outcomeData, color: 'rgb(147, 51, 234)' },
  ]}
/>

CURVED LINE CHART

Income

Outcome

tsx

<LineChart
  chartId="curved-line-chart"
  labels={labels}
  datasets={datasets}
  curved
/>

Edit this page