ScatterChart

ScatterChart

산점도 차트 컴포넌트예요. 두 변수 사이의 분포와 상관관계를 시각화할 때 사용해요.

출처: 문서

본문

Usage

import { ScatterChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <ScatterChart
      h={350}
      data={data}
      dataKey={{ x: 'age', y: 'BMI' }}
      series={[{ name: 'test', color: 'blue.6' }]}
    />
  );
}

Multiple series

같은 차트에 여러 시리즈를 표시할 수 있어요.

Legend

차트 범례를 표시하려면 withLegend prop을 설정하세요. 범례 항목을 호버하면 해당 시리즈가 강조돼요.

Legend position

legendProps prop으로 recharts Legend 컴포넌트에 props를 전달할 수 있어요. 예를 들어 legendProps={{ verticalAlign: 'bottom', height: 50 }}은 범례를 하단에 두고 높이를 50px로 설정해요.

X and Y axis props

xAxisProps, yAxisProps로 recharts XAxis/YAxis 컴포넌트에 props를 전달할 수 있어요.

Right Y axis

차트 오른쪽에 추가 Y축을 표시하려면 withRightYAxis prop을 설정하세요. rightYAxisProps로 recharts YAxis에 props를, rightYAxisLabel로 라벨을 지정할 수 있어요. data 객체에 yAxisId: 'right'를 설정해 시리즈를 오른쪽 Y축에 바인딩해야 해요. yAxisId가 없는 시리즈는 왼쪽 Y축에 바인딩돼요. 두 축 모두 같은 dataKey.y 값을 사용하지만 스케일은 각 축에 배정된 시리즈로부터 독립적으로 계산돼요.

Value formatter

툴팁과 축 눈금의 값을 형식화하려면 valueFormat prop을 사용하세요. 숫자 값을 받아 형식화된 값을 반환하는 함수거나, x/y 값을 각각 형식화하도록 x, y 키를 가진 객체를 반환하는 함수예요.

import { ScatterChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <ScatterChart
      h={350}
      data={data}
      dataKey={{ x: 'age', y: 'BMI' }}
      valueFormat={{
        x: (value) => `${value} years`,
        y: (value) => `$${new Intl.NumberFormat('en-US').format(value)}`,
      }}
      series={[{ name: 'test', color: 'blue.6' }]}
    />
  );
}

Point labels

pointLabels prop을 x 또는 y로 설정하면 해당 축에 대해 데이터 포인트에 라벨을 표시해요.

Grid and text colors

--chart-grid-color, --chart-text-color로 그리드 라인과 텍스트 색을 바꿀 수 있어요. CSS modules로 색상 스킴에 따라 색을 바꿀 수 있어요.

.root {
  @mixin light {
    --chart-grid-color: alpha(var(--mantine-color-black), 0.15);
    --chart-text-color: var(--mantine-color-gray-7);
  }

  @mixin dark {
    --chart-grid-color: alpha(var(--mantine-color-white), 0.15);
    --chart-text-color: var(--mantine-color-dark-0);
  }
}

단일 색상 스킴이면 gridColor, textColor prop을 쓸 수 있어요.

Stroke dash array

strokeDasharray prop으로 그리드와 커서 라인의 stroke dash array를 제어할 수 있어요. 값은 교차하는 점선/간격의 길이를 나타내요. 예를 들어 strokeDasharray="10 5"는 10px 점선/5px 간격을 렌더링해요.

Units

unit prop으로 축 눈금과 툴팁 값 옆에 단위 라벨을 렌더링할 수 있어요.

Tooltip labels

툴팁에 표시되는 라벨을 커스터마이즈하려면 labels prop을 사용하세요.

Custom tooltip

tooltipProps.content로 recharts Tooltip 컴포넌트에 커스텀 툴팁 렌더러를 전달할 수 있어요.

Remove tooltip

withTooltip={false}로 툴팁을 제거해요. 커서 라인도 함께 사라지고 상호작용이 비활성화돼요.

Tooltip animation

기본적으로 툴팁 애니메이션은 비활성화돼요. tooltipAnimationDuration prop을 밀리초 숫자로 설정하면 툴팁 위치 변경을 애니메이션 처리해요.

Customize dots

recharts Scatter 컴포넌트에 props를 전달해 어떤 형태든 dot으로 사용할 수 있어요.

Reference lines

referenceLines prop으로 기준선을 렌더링해요. 기준선은 항상 차트 뒤에 그려져요.

Reference areas

referenceAreas prop으로 사각 영역을 강조할 수 있어요. 각 영역은 x1/x2(가로), y1/y2(세로) 값으로 경계가 정해져요. 한 쌍을 생략하면 반대 축 전체로 확장돼요. color를 theme color나 CSS 색상으로, label을 영역 안 텍스트로 설정하세요. 기준 영역은 포인트 뒤에 렌더링돼요.

Reference dots

referenceDots prop으로 개별 지점(피크, 이벤트, 기록값, 이상치)을 표시할 수 있어요. 각 dot은 x, y 좌표로 위치가 정해지고 r(반지름), color, label을 지원해요. 포인트 위에 렌더링돼요.

더 알아보기 (Learn more)

• RadarChart
• BubbleChart