data | BarChartItem[] | DEFAULT_DATA | data={data} | Category data. In overlay mode, use the first two bars in each category for back and front layers, each with its own name, value, color, and number format. See the data model. Omitted data uses built-in sample values. |
orientation | BarChartOrientation | "vertical" | orientation={value} | Chart orientation, vertical or horizontal. |
mode | BarChartMode | "single" | mode={value} | Bar arrangement within each category. |
width | number | string | 800 | width="Example" | Overall chart width; supports 100%. Geometry is recalculated from final rendered width. |
height | number | string | 400 | height="Example" | Overall chart height; geometry is recalculated from final rendered height. |
barWidth | number | string | 32 | barWidth="Example" | Thickness of one bar: width when vertical or height when horizontal. Responsive minimum is 2px. |
barGap | number | string | 4 | barGap="Example" | Space between adjacent bars in one category in group mode; minimum 4px. |
groupGap | number | string | 20 | groupGap="Example" | Reserved space between a category’s content and cell edges; minimum 4px. |
segmentGap | number | string | 0 | segmentGap="Example" | Gap between segments in stack mode; 0 removes it. |
cornerRadius | number | string | 8 | cornerRadius="Example" | Bar corner radius. |
roundedStart | boolean | true | roundedStart | Keep rounded corners at the bar start: bottom for vertical bars or left for horizontal bars. |
roundedEnd | boolean | true | roundedEnd | Keep rounded corners at the bar end: top for vertical bars or right for horizontal bars. |
xLabels | string[] | — | xLabels={xLabels} | Override category labels. Falls back to ChartGroup.xLabels, then data item names. |
yMin | number | — | yMin={42} | Numeric-axis minimum, automatic or inherited from ChartGroup by default. |
yMax | number | — | yMax={42} | Numeric-axis maximum. In automatic mode it equals the actual data maximum without rounding upward; may inherit ChartGroup. |
yTicks | number[] | — | yTicks={yTicks} | Explicit numeric-axis ticks, replacing automatic nice ticks; may inherit ChartGroup. |
yTickCount | number | — | yTickCount={42} | Target count for automatic ticks. |
yTickFormatter | (value: number) => string | — | yTickFormatter={(value) => { /* handle value */ }} | Format numeric-axis labels. Defaults to K formatting or inherits ChartGroup. |
showXAxis | boolean | — | showXAxis | Show the bottom axis and labels. |
showYAxis | boolean | — | showYAxis | Show left-side numeric labels. |
showGrid | boolean | — | showGrid | Show grid lines. |
showGuides | boolean | — | showGuides | Shared chart API switch; BarChart currently draws no extra guide graphic. |
showHoverLabel | boolean | — | showHoverLabel | Show a numeric label on a hovered or focused bar. When showHoverPanel=true and this is omitted, labels are off by default. An explicit value takes priority. |
alwaysShowHoverLabel | boolean | false | alwaysShowHoverLabel | Keep numeric hover labels visible. May coexist with showHoverPanel when both are enabled. |
adaptiveContrast | boolean | — | adaptiveContrast | Adaptive black-and-white contrast for black value text using solid host background and bars at the same origin. Colored series and nodes are unchanged. The sRGB grayscale threshold is 0.5 and follows bar shape and opacity; background images and cross-chart transforms are unsupported. Inherits ChartGroup or defaults to true. |
showHoverPanel | boolean | true | showHoverPanel | Show a generated panel for the current bar or cell on hover or focus. On by default. false returns to numeric hover labels unless showHoverLabel is explicitly set. |
hoverPanelVariant | ChartHoverPanelVariant | "light" | hoverPanelVariant={value} | Hover panel appearance variant. |
hoverPanelPlacement | ChartHoverPanelPlacement | "pointer" | hoverPanelPlacement={value} | Hover panel position by data anchor, pointer, or fixed plot pin. |
showHoverPanelLabel | boolean | false | showHoverPanelLabel | Show the current category above hover panel data. |
hoverMode | ChartGroupHoverMode | — | hoverMode={value} | Hover hit model. cell creates a full category hit region bounded by neighboring category centers, responding for all bars or segments in that category. |
activeCellIndex | number | null | — | activeCellIndex={42} | Controlled index of the hovered category; inherits ChartGroup when omitted. |
onCellHoverChange | (index: number | null) => void | — | onCellHoverChange={(value) => { /* handle value */ }} | Callback when the hovered category changes. |
valueFormat | NumberFormatOptions | — | valueFormat={value} | Component-level number format for bar value labels. notation auto or compact uses English k/m/b/t abbreviations. Falls back to NumberFormats. |
labelFormatter | ( value: number, context: BarChartValueLabelContext, ) => string | — | labelFormatter={(value) => { /* handle value */ }} | Custom bar-value label formatter. Takes priority over global, component, and item valueFormat. |
xLabelAutoCull | boolean | — | xLabelAutoCull | Cull category labels using final rendered size. Keep at least 4px between full texts; hide all if even endpoint labels cannot fit. Data bars, axes, and hit cells remain. |
xMaxLabelCount | number | — | xMaxLabelCount={42} | Maximum visible category labels; may inherit ChartGroup. |
valueLabelAutoCull | boolean | true | valueLabelAutoCull | Automatically cull permanently visible values from alwaysShowHoverLabel according to rendered size. Hover and focus values remain. |
valueMaxLabelCount | number | — | valueMaxLabelCount={42} | Maximum number of permanently visible bar value labels. |
yLabelAutoCull | boolean | — | yLabelAutoCull | Automatically cull numeric-axis labels. |
yMaxLabelCount | number | — | yMaxLabelCount={42} | Maximum visible numeric-axis labels; may inherit ChartGroup. |
colors | (BarChartColor | undefined)[] | — | colors={colors} | Color palette. Missing entries fall back to colorMode. |
colorMode | BarChartColorMode | "sequence" | colorMode={value} | Shared chart color mode. |
color | BarChartColor | — | color={value} | Primary color for monochrome modes. |
monochromeColor | BarChartColor | "Primary" | monochromeColor={value} | Source color for fading monochrome mode. |
mutedMonochromeColor | BarChartColor | "Black4" | mutedMonochromeColor={value} | Source color for muted monochrome mode. |
showBaseLayer | boolean | false | showBaseLayer | Show final-size same-color base bars at 4% opacity, off by default. They do not animate, change real bars or hit areas, or affect the timeline. Independent of overlay mode’s back-layer data bar; horizontal bars use final width. |
appearMotion | boolean | true | appearMotion | Enable chart appearance motion. |
appearOnView | boolean | true | appearOnView | Play appearance after entering the viewport, using the outermost same-origin page position in an iframe. |
appearanceProgress | number | — | appearanceProgress={42} | Controlled appearance progress. |
defaultAppearanceProgress | number | 0 | defaultAppearanceProgress={42} | Initial uncontrolled appearance progress. |
appearanceDuration | number | — | appearanceDuration={42} | Override total automatic playback duration. |
appearAnchorId | string | — | appearAnchorId="Example" | ID of the appearance trigger anchor. |
appearAnchorPoint | AnchorPoint | "top" | appearAnchorPoint={value} | Position on the anchor compared with the viewport trigger. |
appearViewportPoint | number | "top" | "center" | "bottom" | 0.7 | appearViewportPoint={42} | Position of the viewport trigger line. |
scrollAppearance | boolean | { distance?: number | string } | false | scrollAppearance={scrollAppearanceOptions} | Enable a scroll-driven appearance timeline; same-origin iframes also respond to the outer page. |
scrollAppearanceDistance | number | string | 320 | scrollAppearanceDistance="Example" | Scroll distance mapped to full appearance progress. |
onAppearanceProgressChange | (progress: number) => void | — | onAppearanceProgressChange={(value) => { /* handle value */ }} | Callback after internal appearance progress changes. |
loading | boolean | — | loading | Data waiting state. Keeps canvas size, axes, and grid while holding bars at the appearance start and pausing interaction. When cleared, motion follows viewport conditions. Does not render Skeleton; reads ancestor Frame loading context. |
children | Snippet | — | <BarChart>Content</BarChart> | Additional content after the chart body, without arguments. Does not replace axes or data series. |
class | string | "" | class="my-component" | Additional class on the root layer. |
style | string | "" | style="width: 100%;" | Additional inline style on the root layer. |
enableResponsive | boolean | true | enableResponsive | Enable root Frame responsive behavior. |
enableContext | boolean | true | enableContext | Enable root Frame context behavior. |
enableScaleObserver | boolean | false | enableScaleObserver | Enable root Frame scale observation. |
enableDefaultMotion | boolean | true | enableDefaultMotion | Enable root Frame default motion. |
