BarsList

BarsList

이름과 값이 있는 막대 목록을 표시하는 컴포넌트예요. 명시적인 축 없이 여러 항목의 값을 가로 막대로 비교할 때 유용해요.

출처: 문서

본문

Usage

BarsList 컴포넌트는 이름과 값이 있는 막대 목록을 표시해요. 필수 prop은 data뿐이에요. data는 name과 value 속성을 가진 객체 배열이에요.

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

function Demo() {
  return <BarsList data={data} />;
}

Data format

BarsList는 다음 형식의 데이터를 기대해요.

export const data = [
  { name: 'React', value: 950000 },
  { name: 'Vue', value: 320000 },
  { name: 'Angular', value: 580000 },
  { name: 'Svelte', value: 145000 },
];

Value formatter

valueFormatter prop으로 막대 옆에 표시되는 값을 형식화할 수 있어요. 함수는 숫자 값을 받고 문자열을 반환해야 해요.

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

function Demo() {
  return <BarsList data={data} valueFormatter={(value) => value.toLocaleString('en-US')} />;
}

Labels

barsLabel과 valueLabel prop으로 막대와 값 위에 열 헤더를 표시할 수 있어요.

Bar gap

barGap prop으로 막대 사이의 간격을 제어할 수 있어요.

Minimum bar size

minBarSize prop으로 막대의 최소 너비를 설정할 수 있어요.

Bar height

barHeight prop으로 막대의 높이를 제어할 수 있어요.

Bar color

barColor와 barTextColor prop으로 모든 막대의 기본 배경과 텍스트 색을 설정할 수 있어요.

Auto contrast

autoContrast prop을 설정하면 배경 색에 따라 텍스트 색을 자동으로 조정해요.

Custom colors

데이터 안의 color 속성을 설정해 각 막대가 고유한 색을 갖게 할 수 있어요.

Get bar props

getBarProps로 각 막대 요소에 추가 props를 전달할 수 있어요. 예를 들어 커스텀 스타일이나 이벤트 핸들러를 추가하는 데 사용할 수 있어요.

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

function Demo() {
  return (
    <BarsList
      data={data}
      valueFormatter={(value) => value.toLocaleString('en-US')}
      barTextColor="white"
      getBarProps={(barData) => ({
        style: {
          backgroundColor: barData.value > 500000 ? '#10a37f' : undefined,
          fontWeight: barData.value > 500000 ? 700 : undefined,
        },
      })}
    />
  );
}

Custom bar rendering

renderBar로 각 막대가 렌더링되는 방식을 완전히 커스터마이즈할 수 있어요.

import { BarsList } from '@mantine/charts';
import { Tooltip } from '@mantine/core';
import { data } from './data';

function Demo() {
  const maxValue = Math.max(...data.map((item) => item.value));

  return (
    <BarsList
      data={data}
      renderBar={(barData, defaultBar) => {
        const percentage = ((barData.value / maxValue) * 100).toFixed(1);

        return (
          <Tooltip label={`${percentage}%`}>{defaultBar}</Tooltip>
        );
      }}
    />
  );
}

더 알아보기 (Learn more)

• Heatmap
• BulletChart