Line Chart

Line charts with one or more series. Every example is live.

Import

tsx

import { LineChart } from "@indoku/ui"

Examples

Basic

Hover a legend item to highlight its series.

tsx

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]function LineBasic() {  return <Box maxW="2xl"><LineChart series={series} categories={months} legend /></Box>}

Dashed

Set dashed per series, or on the whole chart.

tsx

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]function LineDashed() {  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue", values: revenue }, { name: "Forecast", values: [null, null, null, 240, 260, 320], dashed: true }]} categories={months} legend /></Box>}

Gradient

gradient fades the area under the line.

tsx

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]function LineGradient() {  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue", values: revenue }]} categories={months} gradient /></Box>}

Biaxial

Give a series axis: right for a second y axis.

tsx

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]function LineBiaxial() {  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue ($k)", values: revenue }, { name: "Users (k)", values: [1.2, 1.8, 1.5, 2.4, 2.1, 3], axis: "right" }]} categories={months} legend /></Box>}

Connect nulls

null leaves a gap unless connectNulls is set.

tsx

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]function LineConnectNulls() {  const gap = [120, 180, null, null, 210, 300]  return (    <Box display="grid" gridTemplateColumns={{ base: "1fr", md: "1fr 1fr" }} gap="4" maxW="3xl">      <LineChart series={[{ name: "Gap", values: gap }]} categories={months} />      <LineChart series={[{ name: "Connected", values: gap }]} categories={months} connectNulls />    </Box>  )}

Series labels

seriesLabels prints the name at the end of each line.

tsx

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]function LineSeriesLabels() {  return <Box maxW="2xl"><LineChart series={series} categories={months} seriesLabels showDots={false} /></Box>}

Props

LineChart

Prop	Type	Default	Description
`series`	`ChartSeries[]`	–	Data. Values accept null; axis and dashed are per series.
`categories`	`string[]`	–	X labels.
`gradient / area`	`boolean`	`false`	Fill under the line.
`dashed`	`boolean`	`false`	Dash every line.
`connectNulls`	`boolean`	`false`	Join across null values.
`seriesLabels`	`boolean`	`false`	Name at the end of each line.
`legend`	`boolean`	`false`	Interactive legend.
`referenceLines`	`ReferenceLineSpec[]`	–	Horizontal guides.

* required. Style props and HTML attributes are accepted as well.

← useChart Area Chart →

Created by @indokudev