Bar micro chart displays a compact comparison of small numeric values. Use it inside KPI cards, table cells, summaries, dense admin panels, reports, or as a simple dashboard chart when a small bar chart is enough.
Use full ECharts charts for complex analytics, detailed axes, legends, drilldown, zooming, or advanced chart interactions.
import { MchartBar } from '@ngstarter-ui/components/micro-chart';
| Prop | Type | Default |
|---|---|---|
data* Array of numeric values to be displayed in the chart. | number[] | [] |
labels Array of strings to be used as labels for the data points. | string[] | [] |
gap The gap between bars. | number | 0.2 |
radius The corner radius of the bars. | number | 0 |
highlight Whether to highlight bars on hover. | boolean | false |
responsive Whether the chart should resize automatically to fit its container. | boolean | false |
fillGradient Whether to use a gradient fill for the bars. | boolean | false |
xAccessor Function to access the x-value (index by default). | (d: any, i: number) => any | – |
yAccessor Function to access the y-value (value by default). | (d: any) => any | – |
tooltip Optional template for the tooltip. | TemplateRef<any> | – |
tooltipPosition Position of the tooltip. | OverlayPosition | 'after-center' |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.