Documentation

Line Chart

A trend line graph for visualizing changes over time.

Examples

926946230JanFebMarAprMayJun
import { LineChart } from 'kalki-design'

const data = [
  {
    "label": "Jan",
    "value": 62
  },
  {
    "label": "Feb",
    "value": 68
  },
  {
    "label": "Mar",
    "value": 74
  },
  {
    "label": "Apr",
    "value": 70
  },
  {
    "label": "May",
    "value": 84
  },
  {
    "label": "Jun",
    "value": 92
  }
]

export default function Example() {
  return (
    <LineChart
      data={data}
      lineColor="var(--chart-3)"
      areaColor="var(--chart-3)"
      showGrid={true}
      showArea={true}
      smooth={true}
      showPoints={true}
    />
  )
}

Installation

npx kalki-design add line-chart

Usage

import { LineChart } from 'kalki-design'

const data = [
  { label: 'Jan', value: 18 },
  { label: 'Feb', value: 22 },
  { label: 'Mar', value: 28 },
  { label: 'Apr', value: 24 },
  { label: 'May', value: 34 },
  { label: 'Jun', value: 38 },
]

export default function Example() {
  return <LineChart data={data} lineColor="var(--chart-3)" showArea />
}

API Reference

NameTypeDefaultDescription
NamedataTypeChartDatum[]Default—DescriptionData points containing label and numeric value.
NameheightTypenumberDefault220DescriptionChart height in pixels.
NamelineColorTypestringDefault'var(--chart-3)'DescriptionLine stroke color.
NameshowAreaTypebooleanDefaulttrueDescriptionRenders an area fill below the line.
NamesmoothTypebooleanDefaulttrueDescriptionUses curved interpolation between points.
NameshowPointsTypebooleanDefaulttrueDescriptionShows point markers on each data point.