LineChart

순서가 있는 category 축 위에 하나 이상의 series를 그립니다. 이웃한 두 점이 서로 무관한 값이 아니라 하나의 연속된 변화일 때 씁니다. 시간에 따른 값이나 구간에 따른 곡선이 그런 경우입니다.

import { LineChart } from 'neba';

<LineChart
  label="월별 주간 활성 사용자"
  categories={['Jan', 'Feb', 'Mar']}
  series={[
    { name: 'Web', data: [1820, 1960, 2140] },
    { name: 'Mobile', data: [940, 1120, 1310] }
  ]}
/>;

데이터 형식

라이브러리의 모든 차트가 같은 두 prop을 받습니다. 대시보드의 한 타일을 다른 차트로 바꿀 때 데이터를 다시 쓸 필요가 없도록 하기 위해서입니다.

series는 NebaChartSeries의 배열이고, 항목 하나가 선 하나입니다.

interface NebaChartSeries {
  name?: string; // 범례·tooltip·표에 쓰이는 이름
  data: readonly NebaChartDatum[]; // category 순서대로 놓인 값
  color?: NebaColor | string; // 팔레트 slot 대신 쓸 색
  hidden?: boolean; // 처음엔 숨김. 범례로 다시 켭니다
}

NebaChartDatum은 숫자이거나 null이거나, 점 하나입니다.

type NebaChartDatum = number | null | NebaChartPoint;

interface NebaChartPoint {
  x?: string | number | Date; // category 축에서의 위치
  y: number | null; // 값
  color?: string; // 이 점만 series 색을 덮어씁니다
  label?: ReactNode; // 숫자 대신 tooltip에 쓸 내용
}

null은 0이 아니라 결측입니다. 센서가 꺼져 있던 달과 매출이 0이었던 달은 다른 사실이고, 차트도 다르게 그립니다. null에서 선이 끊기고 점은 그리지 않습니다. connectNulls가 그 사이를 잇지만, 결측이 수집 과정의 문제일 때만 쓰세요.

categories는 x 축의 위치 이름입니다. 대신 각 점이 x를 직접 들고 있어도 됩니다. 데이터가 이미 갖고 있는 모양을 그대로 쓰면 됩니다.

import { Card, Grid, GridContainer, LineChart } from 'neba';

/**
 * The three ways one series can be written. They draw the same chart — pick
 * whichever matches the shape the data already has.
 */
export default function LineChartData() {
  return (
    <GridContainer spacing={3} padded={false}>
      <Grid span={{ xs: 12, md: 4 }}>
        <Card title="Bare numbers" size="sm" className="h-full">
          <LineChart
            label="Bare numbers"
            size="sm"
            height={140}
            categories={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
            series={[{ name: 'Orders', data: [24, 31, 28, 39, 44] }]}
          />
        </Card>
      </Grid>

      <Grid span={{ xs: 12, md: 4 }}>
        <Card title="Points with an x" size="sm" className="h-full">
          <LineChart
            label="Points carrying their own x"
            size="sm"
            height={140}
            series={[
              {
                name: 'Orders',
                data: [
                  { x: 'Mon', y: 24 },
                  { x: 'Tue', y: 31 },
                  { x: 'Wed', y: 28 },
                  { x: 'Thu', y: 39 },
                  { x: 'Fri', y: 44 }
                ]
              }
            ]}
          />
        </Card>
      </Grid>

      <Grid span={{ xs: 12, md: 4 }}>
        <Card title="Dates" size="sm" className="h-full">
          <LineChart
            label="Points on dates"
            size="sm"
            height={140}
            series={[
              {
                name: 'Orders',
                data: [
                  { x: new Date(2026, 5, 1), y: 24 },
                  { x: new Date(2026, 5, 2), y: 31 },
                  { x: new Date(2026, 5, 3), y: 28 },
                  { x: new Date(2026, 5, 4), y: 39 },
                  { x: new Date(2026, 5, 5), y: 44 }
                ]
              }
            ]}
          />
        </Card>
      </Grid>
    </GridContainer>
  );
}

Props

Prop	타입	기본값	설명
series *	NebaChartSeries[]	—	그릴 series. 색은 이 배열에서의 자리로 정해지므로, 범례에서 하나를 숨겨도 나머지 색은 그대로입니다
categories	(string | number | Date)[]	—	category 축의 위치 이름. 대신 각 점이 x를 직접 들고 있어도 됩니다
xAxis	NebaChartAxis	—	category 축
yAxis	NebaChartAxis	—	값 축
curve	'linear' | 'smooth' | 'step'	'linear'	점과 점 사이를 잇는 방식. smooth는 monotone cubic이라 양옆 값보다 아래로 내려가지 않고, step은 다음 측정까지 값을 유지합니다
markers	'none' | 'auto' | 'all'	'auto'	점 위의 dot. auto는 점이 열넷 이하일 때만 그립니다. 포인터가 올라간 점에는 설정과 무관하게 항상 그려집니다
gradient	boolean	false	선을 같은 hue의 옅은 단계에서 시작해 끝에서 원래 색이 되게 합니다. 최근 쪽이 진해집니다
connectNulls	boolean	false	null에서 끊지 않고 이어 그립니다. 결측이 수집 과정의 문제일 때만, 이어진 구간은 차트가 지어낸 숫자입니다
valueLabels	'none' | 'last' | 'extremes' | 'all'	'none'	선 위에 쓸 값. last는 각 series의 도달점, extremes는 최고와 최저입니다. 모든 점에 숫자를 쓰는 것이 차트를 못 읽게 만드는 가장 확실한 방법이라 기본은 none입니다
stacked	boolean	false	series를 쌓습니다. 선 차트에서는 드물고, 쌓을 것이라면 AreaChart가 읽히는 모양입니다
variant공통	'solid' | 'outline' | 'text'	'text'	표면의 무게. 차트는 시트가 아니라 그림이므로 기본값이 text입니다. Card 안에 넣으면 가장자리가 겹치지 않습니다. 혼자 서는 차트에는 outline을 주세요
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	축 글자·선 두께·마커 크기, 그리고 height를 주지 않았을 때의 높이
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	시트의 색 계열. series의 색은 여기서 오지 않습니다. 팔레트나 series.color가 정합니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
height	number | string	size	그림의 높이. 축 라벨도 이 높이 안에 그려집니다
label	string	locale's word	차트의 접근 가능한 이름. 그림 대신 읽히고, 아래에 숨겨진 데이터 표의 caption이 됩니다. 없으면 locale의 일반 명사가 쓰이지만, 무엇에 대한 차트인지는 여기서만 말할 수 있습니다
format	Intl.NumberFormatOptions	—	숫자가 나타나는 모든 곳의 표기, 축·tooltip·값 라벨·표. 없으면 만 이상은 축약됩니다(12.4K)
locale	string	—	차트가 스스로 쓰는 말과 날짜의 언어
legend	boolean | NebaChartLegend	series ≥ 2	series가 둘 이상이면 자동으로 나오고 하나면 나오지 않습니다. 색 하나짜리 범례는 제목을 반복할 뿐입니다
tooltip	boolean | NebaChartTooltip	true	포인터가 무엇을 드러낼지. tooltip에만 있는 값은 없습니다. 모든 값이 숨겨진 표에도 있습니다
empty	ReactNode	—	그릴 것이 없을 때 대신 그릴 내용

<div>의 native 속성과 Box의 모든 prop이 그대로 전달됩니다. variant의 기본값은 text, padded는 false이므로 Card 안에 넣어도 표면이 겹치지 않습니다. 자체 표면이 필요하면 variant="outline"을 쓰세요. 공용 축은 prop 규약을 참고하세요.

NebaChartAxis

xAxis와 yAxis가 모두 이 형태를 받습니다.

Prop	타입	기본값	설명
hidden	boolean	false	축을 그리지 않습니다. 선도 눈금도 라벨도. 그 자리는 plot에 돌아갑니다
label	ReactNode	—	축이 재는 것의 이름
grid	boolean	값 축은 true / true on the value axis	이 축이 plot을 가로질러 긋는 격자선. 값 축은 켜져 있고 category 축은 꺼져 있습니다. 양쪽 다 켜면 모눈종이가 됩니다
min	number	—	축이 시작하는 값. 생략하면 데이터에서 옵니다. BarChart와 AreaChart는 0을 남겨 두고, LineChart는 자릅니다
max	number	—	축이 끝나는 값
tickCount	number	5	눈금의 대략적인 개수. 실제 값은 읽기 좋은 수로 반올림됩니다
tickFormat	(value, index) => ReactNode	—	눈금 하나를 어떻게 쓸지. 차트의 format보다 우선합니다
thickness	number	—	축이 눈금과 이름을 위해 잡아 두는 폭(px). 기본값은 눈금 글자에서 측정합니다. 대시보드에서 두 차트의 plot을 맞출 때 쓰세요

NebaChartLegend

Prop	타입	기본값	설명
side공통	'top' | 'right' | 'bottom' | 'left'	'bottom'	plot의 어느 쪽에 놓을지
align공통	'start' | 'center' | 'end'	'center'	그 변에서의 위치
interactive	boolean	true	항목을 클릭하면 그 series를 숨기고, hover하면 나머지를 흐립니다
showValue	boolean	false	이름 옆에 현재 category의 값을 함께 씁니다

NebaChartTooltip

Prop	타입	기본값	설명
mode	'index' | 'item' | 'none'	'index'	index는 포인터가 있는 category의 모든 series를 crosshair와 함께, item은 가리킨 마크 하나만 보여 줍니다
crosshair	boolean	true	index 모드에서 활성 category에 내리긋는 선. 숫자가 어느 열의 것인지를 말합니다
render	(context) => ReactNode	—	패널을 직접 그립니다. 없으면 차트가 자기 것을 그립니다

예시

curve

curve는 한 점에서 다음 점으로 가는 방식을 정합니다. 기본값 linear는 데이터에 없는 것을 주장하지 않습니다. smooth는 monotone cubic 곡선으로, 부드럽지만 양옆 값보다 아래로 내려가는 일이 없습니다. step은 다음 측정까지 값을 유지하는데, rate limit이나 요금제 등급이 실제로 그 사이에 한 일이 그것입니다.

import { Card, Grid, GridContainer, LineChart } from 'neba';

const HOURS = ['00', '04', '08', '12', '16', '20'];
const RATE = [12, 9, 34, 62, 48, 21];

/**
 * The same six readings, three ways. `step` is the honest one for a value that
 * was *set* rather than measured — a plan tier, a rate limit, a thermostat.
 */
export default function LineChartCurve() {
  return (
    <GridContainer spacing={3} padded={false}>
      {(['linear', 'smooth', 'step'] as const).map((curve) => (
        <Grid key={curve} span={{ xs: 12, md: 4 }}>
          <Card title={`curve="${curve}"`} size="sm" className="h-full">
            <LineChart
              label={`Requests per second, ${curve}`}
              size="sm"
              height={140}
              curve={curve}
              categories={HOURS}
              series={[{ name: 'Requests/s', data: RATE }]}
            />
          </Card>
        </Grid>
      ))}
    </GridContainer>
  );
}

xAxis · yAxis

LineChart는 값 축을 데이터에 맞춰 자릅니다. 선이 나타내는 것은 위치이고, 축을 잘라도 모든 점이 같은 만큼 움직이므로 모양이 남기 때문입니다. 0이 축에 있어야 한다면 yAxis에 min: 0을 넘기세요.

min·max·tickCount가 범위를, tickFormat이 눈금의 표기를 정합니다. grid: false는 격자선을, hidden은 축 전체를 없애고 그 자리를 plot에 돌려줍니다.

import { Card, LineChart } from 'neba';

const DAYS = Array.from({ length: 14 }, (_, index) => `Jun ${index + 1}`);
const UPTIME = [
  99.94, 99.97, 99.99, 99.98, 99.72, 99.88, 99.96, 99.99, 99.99, 99.95, 99.91, 99.97, 99.99, 99.98
];

/**
 * A line chart crops its scale to the data, which is what makes a series that
 * lives between 99.7 and 100 legible at all. `yAxis` is where that gets
 * overridden — a floor, a ceiling, how many ticks, and how each one is written.
 */
export default function LineChartAxes() {
  return (
    <Card title="Availability" subtitle="Rolling fourteen days" className="w-full">
      <LineChart
        label="Availability by day"
        categories={DAYS}
        series={[{ name: 'Uptime', data: UPTIME }]}
        yAxis={{ min: 99.5, max: 100, tickCount: 5, tickFormat: (value) => `${value}%` }}
        xAxis={{ label: 'June' }}
        markers="all"
      />
    </Card>
  );
}

connectNulls

import { Card, Grid, GridContainer, LineChart } from 'neba';

const WEEKS = ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8'];
// Two weeks the collector was down. Not two weeks of zero.
const READINGS = [42, 47, null, null, 51, 58, 55, 62];

export default function LineChartGaps() {
  return (
    <GridContainer spacing={3} padded={false}>
      <Grid span={{ xs: 12, md: 6 }}>
        <Card title="Broken at the gap" subtitle="The default" size="sm" className="h-full">
          <LineChart
            label="Readings with a two-week gap"
            size="sm"
            height={160}
            categories={WEEKS}
            series={[{ name: 'Readings', data: READINGS }]}
            markers="all"
          />
        </Card>
      </Grid>
      <Grid span={{ xs: 12, md: 6 }}>
        <Card
          title="connectNulls"
          subtitle="Only when the gap is an artefact"
          size="sm"
          className="h-full"
        >
          <LineChart
            label="Readings, bridged"
            size="sm"
            height={160}
            categories={WEEKS}
            series={[{ name: 'Readings', data: READINGS }]}
            markers="all"
            connectNulls
          />
        </Card>
      </Grid>
    </GridContainer>
  );
}

valueLabels · gradient · markers

valueLabels는 선 위에 숫자를 씁니다. last는 각 series가 도달한 값을, extremes는 series의 최고·최저를, all은 모든 점을 표시합니다. 기본값은 none입니다. 모든 점 옆에 숫자를 쓰는 것이 차트를 읽을 수 없게 만드는 가장 확실한 방법입니다.

markers는 점 위에 dot을 그립니다. auto는 점이 열네 개 이하일 때만 그리고, 포인터가 올라간 점에는 설정과 무관하게 항상 그립니다.

gradient는 각 선을 같은 hue의 옅은 단계에서 시작해 끝에서 원래 색이 되도록 흐리게 합니다.

import { Card, LineChart } from 'neba';

const QUARTERS = ['Q1', 'Q2', 'Q3', 'Q4'];

/**
 * `valueLabels="last"` names where each series ended up and leaves the rest to
 * the axis. `gradient` fades each line from a paler step of its own hue, so the
 * recent end is the loud one.
 */
export default function LineChartLabels() {
  return (
    <Card title="Revenue by region" subtitle="Thousands, this year" className="w-full">
      <LineChart
        label="Revenue by region and quarter"
        categories={QUARTERS}
        valueLabels="last"
        gradient
        markers="all"
        format={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
        series={[
          { name: 'Americas', data: [312, 344, 391, 428] },
          { name: 'EMEA', data: [208, 244, 231, 297] },
          { name: 'APAC', data: [141, 172, 209, 264] }
        ]}
      />
    </Card>
  );
}

legend

범례는 series가 둘 이상이면 자동으로 나타나고, 하나면 나타나지 않습니다. side와 align이 위치를 정하고, 항목을 클릭하면 해당 series가 숨겨지며 남은 series는 원래 색을 그대로 유지합니다. legend={false}는 범례를 없애고, interactive: false는 클릭되지 않는 범례로 만듭니다.

import { Card, LineChart } from 'neba';

const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];

/**
 * The legend is interactive by default: click an entry to hide its series, and
 * the survivors keep the colour they had. `hidden` starts one off.
 */
export default function LineChartLegend() {
  return (
    <Card title="Tickets by priority" className="w-full">
      <LineChart
        label="Tickets by priority and month"
        categories={MONTHS}
        legend={{ side: 'right', align: 'start' }}
        series={[
          { name: 'Urgent', data: [12, 18, 9, 14, 8, 11] },
          { name: 'High', data: [48, 52, 41, 60, 55, 49] },
          { name: 'Normal', data: [190, 204, 176, 221, 208, 194] },
          { name: 'Low', data: [88, 71, 94, 66, 79, 84], hidden: true }
        ]}
      />
    </Card>
  );
}

색

series는 넘긴 순서대로 팔레트 slot을 가져갑니다. 여덟 개의 색이 고정된 순서로 배정되고 순환하지 않습니다. 아홉 번째 series는 아홉 번째 색이 아닙니다. 나머지를 "기타" series로 묶거나 차트를 하나 더 그리세요.

series.color는 그 slot을 NebaColor 이름이나 임의의 CSS 색으로 덮어쓰고, 점의 color는 그 점 하나만 덮어씁니다. 색 계열이 무엇을 만족시키도록 만들어졌는지는 색에 있습니다.

<LineChart
  series={[
    { name: 'Errors', data: errors, color: 'danger' },
    { name: 'Warnings', data: warnings, color: 'warning' }
  ]}
/>

format

format은 Intl.NumberFormat 옵션을 받아 축과 tooltip, 값 라벨, 표까지 숫자가 나타나는 모든 곳에 적용됩니다. 생략하면 만 이상의 축 눈금은 축약됩니다(12.4K).

<LineChart format={{ style: 'currency', currency: 'KRW', maximumFractionDigits: 0 }} … />
<LineChart format={{ style: 'percent', maximumFractionDigits: 1 }} … />

접근성

• 모든 차트는 데이터를 표로도 렌더링합니다. 화면에는 보이지 않지만 보조 기술에는 노출되며, label이 그 표의 caption이자 차트의 접근 가능한 이름이 됩니다. tooltip에만 있고 표에는 없는 값은 없습니다.
• plot에 focus할 수 있습니다. ←·→로 category를 옮기고, Home·End로 양 끝으로, Escape로 해제합니다. 포인터 없이도 tooltip에 닿을 수 있습니다.
• 범례는 aria-pressed를 가진 버튼의 목록이므로, 어떤 series가 그려지고 있는지가 색이 아니라 상태로 표현됩니다.
• 정체성을 색만으로 전달하지 않습니다. series가 둘 이상이면 범례가 항상 있고, 팔레트의 인접한 색은 protanopia·deuteranopia 시뮬레이션으로 검증되어 있습니다.