BarChart
Values side by side as bars, one group or stack per category, like invoices by status for each week. Bars stand up, or run across with orientation horizontal.
Master
Switch the bars and the orientation. Ranked picks out the top and bottom bar in the highlight intent. Turn the title, stacked, values, grid, legend and animate on and off.
| Current | Closing | Closed | Approved | Sent | Paid | |
|---|---|---|---|---|---|---|
| Week 1 | $600,000 | $15,000 | $20,000 | $15,000 | $10,000 | $15,000 |
| Week 2 | $550,000 | $25,000 | $30,000 | $35,000 | $15,000 | $20,000 |
| Week 3 | $240,000 | $335,000 | $55,000 | $15,000 | $10,000 | $20,000 |
| Week 4 | $230,000 | $165,000 | $235,000 | $15,000 | $10,000 | $20,000 |
| Week 5 | $60,000 | $50,000 | $285,000 | $155,000 | $60,000 | $65,000 |
| Week 6 | $20,000 | $30,000 | $15,000 | $350,000 | $185,000 | $75,000 |
| Week 7 | $20,000 | $90,000 | $15,000 | $230,000 | $145,000 | $175,000 |
Usage
Use BarChart to compare amounts across categories or periods. It is one component: pass categories and series. orientation vertical puts the categories along the bottom with bars standing up; horizontal lists them down the start with bars running across, best for long names or ranked lists like top customers. Bars sit side by side per category, or on top of each other with stacked, so the bar height is the total and the colors are its parts. barWidth thin draws 8px bars with rounded ends, for a long run of periods like a month of daily use. showValues writes each value at the end of its bar. On an upright chart, a grant, limit or target goes in referenceLines, a dashed line across the chart with its label and value at the end, drawn over the bars so it stays visible where they pass it; give that line values, one level per category, when it changes during the period and it steps instead. A forecast stays in the same series: projectedFrom names its first forecast category, and its bars draw see-through from there. marker draws a thin line down the chart at one category, like Today. A horizontal chart ignores all three. Hover or use the arrow keys for a tooltip with every series in that category. animate lets bars grow out from the baseline. Put the chart's title and report link in the Section or Card around it. ChartIntent: green | olive | cyan | orange | pink | gray | purple | yellow | red | mint (the kit category colors). title and subtitle write a heading over the chart; showHeader turns it off when the Card around it already says the same. highlight picks out one or more bars in the highlight intent, like the biggest and smallest in a ranked list. The keys under the chart are the kit Legend; legendPosition moves them over it or beside it. See contracts/barchart.json for the full contract. A legend beside the chart drops under it when the chart's own box is narrower than 360px.
Do's
- Comparing amounts across categories or periods.
- Parts of a total per period, with stacked.
- Long category names or a ranked list, like top customers by balance, with orientation horizontal.
- A ranked list where one or two bars matter most: sort the data and pick them out with highlight.
- A long run of periods, like usage per day for a month, with barWidth thin so the bars read as a light rhythm.
- Usage against a grant or limit over a period, like credits used by day against the grant: referenceLines, with values when the grant steps up partway.
- Actual and forecast periods in one run of bars: projectedFrom on the series, with a marker at today.
Don'ts
- Do not use it for a long, smooth trend. Use LineChart.
- Do not use it for one share of a total. Use PieChart.
- Do not draw charts with loose SVG or a chart library. Use the kit charts.
- Do not use raw hex; pick an intent.
- Do not use highlight on every bar; pick out one or two, or use a series intent.
- Do not use barWidth thin for a handful of categories; the bars get lost in wide bands. Keep wide.
- Do not fake a limit or target with an extra series. It shows in the legend, the tooltip and the table as data. Use referenceLines.
- Do not draw forecast bars as a second series in a lighter color. Use projectedFrom, so actual and forecast stay one series with one name.
- Do not fake a changing limit with several flat reference lines. Give the one line its values per category.
- Do not use referenceLines, marker or projectedFrom on a horizontal chart; they belong to a time axis and a horizontal chart ignores them.
<BarChart
label="Invoices by status by time"
title="Invoices by status"
subtitle="Last 7 weeks, all accounts"
categories={weeks}
series={statuses}
orientation="vertical"
highlightIntent="orange"
stacked
barWidth="wide"
legendPosition="bottom"
format="currency"
/>