Charts & analytics
Interactive playground for bk-bar-chart, combo/donut/gauge, bk-matrix, and bk-slicer, same pattern as Calendar, Input, and Table demos. Tweak controls on the left; the live component updates on the right. No changes to the library controls themselves.
Preview
A working preview of Charts & analytics in the Brickclay style. Try it.
Interactive playground
Bar chart with live toolbar options. Generated markup reflects current settings.
size class: normal · turn on resizable to get the drag handle (best with compact density)
<bk-bar-chart chartId="playground" dim="driver" title="Safety Score by Driver" variant="score" orientation="horizontal" density="compact" selectionMode="multi" [viewMode]="chart" [expandable]="true" [exportable]="true" [switchable]="true" [sortable]="true" [loading]="false" [data]="scores" [selectedKeys]="selected" (selectionChange)="onSelect($event)"> </bk-bar-chart>
Cross-filter
Two charts share selection state, click a driver in either chart. Click several to multi-select.
Chart gallery
Static examples, bar, combo, donut, gauge, KPI strip.
Matrix playground
Power BI-style bk-matrix, hierarchical, cross-tab, or paginated simple mode.
| State | Total Billings | Storage | Service | Transportation | Others | Volume | Invoice Credits % | Total |
|---|---|---|---|---|---|---|---|---|
Wisconsin | $203,339 | $45,000 | $82,000 | $52,000 | $24,339 | 3,754,848 | 0.12% | 4,161,526 |
Washington | $189,420 | $38,000 | $76,000 | $48,000 | $27,420 | 2,910,032 | -0.05% | 3,288,872 |
| − Virginia | $412,880 | $92,000 | $168,000 | $102,000 | $50,880 | 6,204,416 | 0.08% | 7,030,176 |
| Northern VA & Maryland & Washington DC | $412,880 | $92,000 | $168,000 | $102,000 | $50,880 | 6,204,416 | 0.08% | 7,030,176 |
Utah | $156,200 | $31,000 | $62,000 | $41,000 | $22,200 | 1,985,600 | -0.13% | 2,298,000 |
| + Texas | $521,400 | $118,000 | $210,000 | $142,000 | $51,400 | 8,420,160 | 0.04% | 9,462,960 |
Total | $1,483,239 | $324,000 | $598,000 | $385,000 | $176,239 | 23,275,056 | 0.06% | 26,241,534 |
Slicer playground
bk-slicer: single/multi, search, hierarchical parent→child.
Slicer bar + chart dashboard
Mini report page: slicer bar filters the bar chart below (trip-detail pattern).
Event log
Interact with any section above.
API quick reference
| Control | Selector | Key inputs / outputs |
|---|---|---|
Bar chart | bk-bar-chart | data, selectedKeys, selectionChange, drillThrough, toolbar: view/table, export, drill |
Combo chart | bk-combo-chart | categories, barSeries, lineSeries, stacked |
Donut chart | bk-donut-chart | data, dim, selectionChange |
Matrix | bk-matrix | rows, measures, paginated, interactive, drillThroughEnabled |
Slicer | bk-slicer | options[].children, mode, selectedChange |
Slicer bar | bk-slicer-bar | fields, filters, filtersChange |