Display a list of bars with names and values
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.
BarsList expects data in the following format:
Use valueFormatter prop to format the value displayed next to the bar. The function receives the numeric value and must return a string.
Use barsLabel and valueLabel props to display column headers above the bars and values:
Control the spacing between bars with the barGap prop:
Set the minimum bar width with the minBarSize prop:
Control the height of bars with the barHeight prop:
Use barColor and barTextColor props to set the default background and text colors for all bars:
Set autoContrast prop to automatically adjust text color based on background color:
Each bar can have its own color by setting the color property in the data:
Use getBarProps to pass additional props to each bar element. For example, it can be used to add custom styling or event handlers:
Use renderBar to completely customize how each bar is rendered: