Mantine UIFAQColors generator

BarsList

Display a list of bars with names and values

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/charts

Usage

BarsList component displays a list of bars with names and values. The only required prop is data – an array of objects with name and value properties.

React
950000
Vue
320000
Angular
580000
Svelte
145000
Next.js
720000
Nuxt
180000
Remix
95000
import { BarsList } from '@mantine/charts';
import { data } from './data';

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

Data format

BarsList expects data in the following format:

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

Value formatter

Use valueFormatter prop to format the value displayed next to the bar. The function receives the numeric value and must return a string.

React
950,000
Vue
320,000
Angular
580,000
Svelte
145,000
Next.js
720,000
Nuxt
180,000
Remix
95,000
import { BarsList } from '@mantine/charts';
import { data } from './data';

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

Labels

Use barsLabel and valueLabel props to display column headers above the bars and values:

Traffic Source
Visits
React
950,000
Vue
320,000
Angular
580,000
Svelte
145,000
Next.js
720,000
Nuxt
180,000
Remix
95,000
import { BarsList } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarsList
      data={data}
      barsLabel="Traffic Source"
      valueLabel="Visits"
      valueFormatter={(value) => value.toLocaleString('en-US')}
    />
  );
}

Bar gap

Control the spacing between bars with the barGap prop:

React
950,000
Vue
320,000
Angular
580,000
Svelte
145,000
Next.js
720,000
Nuxt
180,000
Remix
95,000
import { BarsList } from '@mantine/charts';
import { data } from './data';

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

Minimum bar size

Set the minimum bar width with the minBarSize prop:

React
950,000
Vue
320,000
Angular
580,000
Svelte
145,000
Next.js
720,000
Nuxt
180,000
Remix
95,000
import { BarsList } from '@mantine/charts';
import { data } from './data';

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

Bar height

Control the height of bars with the barHeight prop:

React
950,000
Vue
320,000
Angular
580,000
Svelte
145,000
Next.js
720,000
Nuxt
180,000
Remix
95,000
import { BarsList } from '@mantine/charts';
import { data } from './data';

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

Bar color

Use barColor and barTextColor props to set the default background and text colors for all bars:

React
950,000
Vue
320,000
Angular
580,000
Svelte
145,000
Next.js
720,000
Nuxt
180,000
Remix
95,000
import { BarsList } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarsList
      data={data}
      barColor="teal.6"
      barTextColor="white"
      valueFormatter={(value) => value.toLocaleString('en-barsUS')}
    />
  );
}

Auto contrast

Set autoContrast prop to automatically adjust text color based on background color:

Yellow
1,200,000
Cyan
800,000
Lime
600,000
Dark Blue
400,000
Dark Red
200,000
import { BarsList } from '@mantine/charts';
import { data } from './data';

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

Custom colors

Each bar can have its own color by setting the color property in the data:

Traffic Source
Visits
React
850,000
Vue
620,000
Angular
540,000
Svelte
380,000
Next.js
920,000
Nuxt
410,000
Remix
295,000
import { BarsList } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarsList
      data={data}
      barsLabel="Traffic Source"
      valueLabel="Visits"
      variant="filled"
      valueFormatter={(value) => value.toLocaleString('en-US')}
    />
  );
}

Get bar props

Use getBarProps to pass additional props to each bar element. For example, it can be used to add custom styling or event handlers:

React
950,000
Vue
320,000
Angular
580,000
Svelte
145,000
Next.js
720,000
Nuxt
180,000
Remix
95,000
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

Use renderBar to completely customize how each bar is rendered:

Traffic Source
Visits
React
950000
Vue
320000
Angular
580000
Svelte
145000
Next.js
720000
Nuxt
180000
Remix
95000
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}
      barsLabel="Traffic Source"
      valueLabel="Visits"
      renderBar={(barData, defaultBar) => {
        const percentage = ((barData.value / maxValue) * 100).toFixed(1);

        return (
          <Tooltip
            label={`${barData.name}: ${percentage}% of total traffic`}
            position="top"
            withArrow
          >
            {defaultBar}
          </Tooltip>
        );
      }}
    />
  );
}

Heatmap

Getting started