ChartTooltip

개요

ChartTooltip은 디자인 시스템 기본 스타일이 내장됩니다. contentStyle, labelStyle, itemStyle로 일부만 오버라이드 가능하며 기본값과 merge됩니다.

스타일	기본값
`backgroundColor`	`semantic.background[1]`
`border`	`1px solid semantic.border.default`
`borderRadius`	`global.radius[100]`
`padding`	`global.spacing[300]`
`boxShadow`	`global.elevation[16]`
`fontSize`	`global.fontSize[200]`
`fontFamily`	`global.font.sans`
label `color`	`semantic.text[1]`
label `fontWeight`	`semiBold`
item `color`	`semantic.text[2]`
`cursor.fill`	`semantic.background[2]`

기본

() => {
const data = [
  { name: '1월', revenue: 1200, cost: 800 },
  { name: '2월', revenue: 3400, cost: 1200 },
  { name: '3월', revenue: 2800, cost: 1000 },
  { name: '4월', revenue: 4100, cost: 1500 },
];
return (
  <ResponsiveContainer width="100%" height={260}>
    <BarChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis />
      <Bar dataKey="revenue" fill="$primary-50" name="매출" />
      <Bar dataKey="cost" fill="$gray-40" name="비용" />
      <ChartTooltip />
    </BarChart>
  </ResponsiveContainer>
);
}

스타일 오버라이드

contentStyle, labelStyle, itemStyle은 토큰 기본값과 병합되며 같은 속성에서 충돌하면 소비자 값이 우선합니다.

() => {
const data = [
  { name: '1월', revenue: 1200 },
  { name: '2월', revenue: 3400 },
  { name: '3월', revenue: 2800 },
  { name: '4월', revenue: 4100 },
];
return (
  <ResponsiveContainer width="100%" height={260}>
    <BarChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis />
      <Bar dataKey="revenue" fill="$primary-50" name="매출" />
      <ChartTooltip
        contentStyle={{ borderRadius: 12, padding: 16 }}
        labelStyle={{ fontSize: 14 }}
      />
    </BarChart>
  </ResponsiveContainer>
);
}

cursor 비활성화

cursor={false}면 hover 배경이 그려지지 않습니다. undefined일 때만 기본값(background-2)이 적용되므로, null이나 false를 전달하면 그대로 전달됩니다.

() => {
const data = [
  { name: '1월', revenue: 1200 },
  { name: '2월', revenue: 3400 },
  { name: '3월', revenue: 2800 },
  { name: '4월', revenue: 4100 },
];
return (
  <ResponsiveContainer width="100%" height={240}>
    <BarChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis />
      <Bar dataKey="revenue" fill="$primary-50" name="매출" />
      <ChartTooltip cursor={false} />
    </BarChart>
  </ResponsiveContainer>
);
}

Props

extends recharts Tooltip

Prop

Type

개요

기본

스타일 오버라이드

cursor 비활성화

Props

On this page