BubbleChart

BubbleChart

버블 차트 컴포넌트예요. 세 개의 데이터 차원(가로, 세로, 크기)을 동시에 시각화할 때 유용해요.

출처: 문서

본문

Usage

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

function Demo() {
  return (
    <BubbleChart
      h={60}
      data={data}
      dataKey={{ x: 'change_in_median_home_price', y: 'percentage_of_households' }}
    />
  );
}

Change color

다른 컴포넌트와 같은 방식으로 theme에서 색을 참조할 수 있어요. 예를 들어 blue, red.5, orange.7 등이에요. 유효한 CSS 색상 값도 허용돼요.

Change area color depending on color scheme

color 속성에 CSS 변수를 사용할 수 있어요. 색상 스킴에 따라 달라지는 CSS 변수를 정의하려면 light/dark mixins 또는 light-dark function을 사용하세요.

Remove tooltip

withTooltip={false}로 설정하면 툴팁을 제거할 수 있어요. 커서 라인도 함께 사라지고 차트와의 상호작용이 비활성화돼요.

Value formatter

툴팁의 값을 형식화하려면 valueFormat prop을 사용하세요. 숫자 값을 받아 형식화된 값을 반환하는 함수예요.

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

function Demo() {
  return (
    <BubbleChart
      h={60}
      data={data}
      dataKey={{ x: 'change_in_median_home_price', y: 'percentage_of_households' }}
      valueFormatter={(value) => `${value.toFixed(2)} USD`}
    />
  );
}

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);
  }
}

단일 색상 스킴 앱이라면 CSS 변수 대신 gridColor, textColor prop을 쓸 수 있어요.

더 알아보기 (Learn more)

• ScatterChart
• RadialBarChart