CartesianGrid

개요

CartesianGrid는 차트 영역에 그리드 선과 배경을 그립니다. 기본값은 수평선만 표시(vertical={false}), stroke=border.default, strokeDasharray="3 3"입니다.

기본

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
];
return (
  <ResponsiveContainer width="100%" height={220}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} />
    </LineChart>
  </ResponsiveContainer>
);
}

수직 그리드

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
];
return (
  <ResponsiveContainer width="100%" height={220}>
    <LineChart data={data}>
      <CartesianGrid vertical />
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} />
    </LineChart>
  </ResponsiveContainer>
);
}

점선 + stroke 토큰

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
];
return (
  <ResponsiveContainer width="100%" height={220}>
    <LineChart data={data}>
      <CartesianGrid stroke="$primary-20" strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} />
    </LineChart>
  </ResponsiveContainer>
);
}

줄무늬 배경 (zebra)

horizontalFill / verticalFill에 교차 색상 배열을 전달하면 줄무늬 배경이 됩니다. $토큰 지원.

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
  { name: '5월', value: 3600 },
  { name: '6월', value: 4800 },
];
return (
  <VStack $css={{ gap: '$spacing-400' }}>
    <ResponsiveContainer width="100%" height={220}>
      <LineChart data={data}>
        <CartesianGrid horizontalFill={['$gray-10', '$background-1']} />
        <XAxis dataKey="name" />
        <YAxis />
        <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} />
        <ChartTooltip />
      </LineChart>
    </ResponsiveContainer>
    <ResponsiveContainer width="100%" height={220}>
      <LineChart data={data}>
        <CartesianGrid vertical verticalFill={['$gray-10', '$background-1']} />
        <XAxis dataKey="name" />
        <YAxis />
        <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} />
        <ChartTooltip />
      </LineChart>
    </ResponsiveContainer>
  </VStack>
);
}

전체 배경 fill

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
];
return (
  <ResponsiveContainer width="100%" height={240}>
    <LineChart data={data}>
      <CartesianGrid fill="$gray-10" />
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

Props

extends recharts CartesianGrid

Prop

Type

개요

기본

수직 그리드

점선 + stroke 토큰

줄무늬 배경 (zebra)

전체 배경 fill

Props

On this page