AreaChart

선 아래를 채운 차트입니다. 합해서 의미가 있는 양을 나타낼 때, 그리고 stacked로는 그 합이 무엇으로 이루어져 있는지를 나타낼 때 씁니다.

import { AreaChart } from 'neba';

<AreaChart
  label="티어별 사용 스토리지"
  categories={['Jan', 'Feb', 'Mar']}
  stacked
  series={[
    { name: 'Hot', data: [120, 138, 149] },
    { name: 'Archive', data: [610, 648, 690] }
  ]}
/>;

데이터 형식은 모든 차트가 공유합니다. series와 categories, 그리고 0이 아니라 결측을 뜻하는 null입니다. 전체 정의는 LineChart 문서에 있습니다.

둘 중 무엇을 쓸지는 그 양이 무엇인지로 갈립니다. 합해도 아무 뜻이 없는 값이라면(온도, 비율, 점수) 선 아래의 채움은 장식일 뿐이고, 그런 것이 두 개 겹치면 서로를 가릴 뿐입니다.

Props

Prop	타입	기본값	설명
series *	NebaChartSeries[]	—	그릴 series. 색은 이 배열에서의 자리로 정해지므로, 범례에서 하나를 숨겨도 나머지 색은 그대로입니다
categories	(string | number | Date)[]	—	category 축의 위치 이름. 대신 각 점이 x를 직접 들고 있어도 됩니다
xAxis	NebaChartAxis	—	category 축
yAxis	NebaChartAxis	—	값 축
stacked	boolean | 'full'	false	true는 밴드를 쌓아 위 가장자리가 합계가 되게 하고, full은 각 category를 100%로 정규화해 크기가 아니라 비중의 차트로 만듭니다
curve	'linear' | 'smooth' | 'step'	'linear'	밴드 가장자리가 점과 점 사이를 잇는 방식
markers	'none' | 'auto' | 'all'	'none'	점 위의 dot. 채워진 밴드에는 이미 보이는 가장자리가 있으므로 기본이 none입니다
valueLabels	'none' | 'last' | 'extremes' | 'all'	'none'	밴드 위에 쓸 값
connectNulls	boolean	false	null을 가로질러 이어 그립니다. 선보다 여기서 더 위험합니다. 채움은 없는 숫자를 더 넓은 면적에 칠합니다
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이 그대로 전달됩니다. xAxis·yAxis·legend·tooltip은 LineChart와 같은 형태를 받습니다. 공용 축은 prop 규약을 참고하세요.

예시

stacked

false는 밴드를 겹쳐 그려 "각각 얼마인가"에 답합니다. true는 쌓아서 위쪽 가장자리가 합계가 됩니다. 'full'은 각 category를 100%로 정규화하므로 차트가 크기가 아니라 비중에 대한 것이 됩니다. 값 축이 백분율로 바뀌고 그렇다고 표시하며, tooltip에는 원래 숫자가 남습니다.

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

const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
const SERIES = [
  { name: 'Organic', data: [4200, 4610, 4880, 5240, 5390, 5720] },
  { name: 'Paid', data: [2100, 2480, 2310, 2760, 3020, 2880] },
  { name: 'Referral', data: [980, 1040, 1190, 1120, 1310, 1440] }
];

/**
 * The same three sources, three ways. Overlaid answers "how big is each";
 * stacked answers "how big is the total"; `'full'` answers "what is the mix",
 * and stops answering the first two.
 */
export default function AreaChartStacked() {
  return (
    <GridContainer spacing={3} padded={false}>
      <Grid span={{ xs: 12, md: 4 }}>
        <Card title="stacked={false}" size="sm" className="h-full">
          <AreaChart
            label="Sessions by source, overlaid"
            size="sm"
            height={160}
            categories={MONTHS}
            series={SERIES}
            legend={false}
          />
        </Card>
      </Grid>
      <Grid span={{ xs: 12, md: 4 }}>
        <Card title="stacked" size="sm" className="h-full">
          <AreaChart
            label="Sessions by source, stacked"
            size="sm"
            height={160}
            categories={MONTHS}
            series={SERIES}
            stacked
            legend={false}
          />
        </Card>
      </Grid>
      <Grid span={{ xs: 12, md: 4 }}>
        <Card title='stacked="full"' size="sm" className="h-full">
          <AreaChart
            label="Sessions by source, as a share"
            size="sm"
            height={160}
            categories={MONTHS}
            series={SERIES}
            stacked="full"
            legend={false}
          />
        </Card>
      </Grid>
    </GridContainer>
  );
}

series가 하나일 때

series가 하나면 범례가 나오지 않습니다. 무엇을 그린 것인지는 카드의 제목이 이미 말하고 있고, 색 하나짜리 범례는 그 말을 반복할 뿐입니다.

import { AreaChart, Card } from 'neba';

const DAYS = Array.from({ length: 30 }, (_, index) => `${index + 1}`);
const SPEND = [
  180, 210, 195, 240, 265, 230, 205, 260, 288, 301, 275, 254, 310, 342, 366, 338, 315, 359, 388,
  402, 377, 351, 396, 421, 448, 430, 405, 452, 481, 512
];

/**
 * One series, so there is no legend — the card's title already says what is
 * plotted, and a box with one swatch in it would only restate it.
 */
export default function AreaChartSingle() {
  return (
    <Card title="Daily spend" subtitle="This month, cumulative by day" className="w-full">
      <AreaChart
        label="Daily spend this month"
        categories={DAYS}
        curve="smooth"
        format={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
        series={[{ name: 'Spend', data: SPEND, color: 'success' }]}
        xAxis={{ label: 'Day of month' }}
      />
    </Card>
  );
}

curve · markers · connectNulls

LineChart와 같은 세 prop이며 뜻도 같습니다. 다만 markers의 기본값은 auto가 아니라 none입니다. 채워진 밴드에는 이미 보이는 가장자리가 있습니다.

connectNulls는 선보다 area에서 더 중요합니다. 결측 구간을 가로질러 닫힌 채움은 없는 숫자를 훨씬 넓은 면적에 칠하는 일이기 때문입니다.

<AreaChart curve="step" markers="all" connectNulls … />

값 축

LineChart와 달리 AreaChart는 값 축에 0을 남겨 둡니다. 채움의 두께가 곧 크기이므로, 축을 자르면 밴드의 높이가 아무 뜻도 갖지 못하게 됩니다. 이유가 있다면 yAxis의 min·max로 여전히 덮어쓸 수 있습니다.

접근성

• 데이터는 label을 caption으로 하는 화면에 보이지 않는 표로도 렌더링됩니다.
• plot에 focus할 수 있습니다. ←·→로 category를 옮기고, Home·End로 양 끝으로, Escape로 해제합니다.
• stacked="full"일 때 tooltip과 표는 백분율이 아니라 넘긴 값을 그대로 보고합니다. 차트는 비중을 보여 주고, 원래 숫자에도 여전히 닿을 수 있습니다.