Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Bar Chart

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.

The NgStarter Angular Bar Chart component lets you show compact comparisons inside cards, rows, dashboards, and KPI summaries. It supports custom bar radius, highlighted bars, tooltips, labels, fill colors, and responsive micro chart layouts.

Basic bar micro chart

Use a basic bar micro chart for compact comparison inside a card, row, summary, or simple dashboard chart.

Bar micro chart with custom bar radius

Use custom radius when the bars need to match the surrounding visual style.

Bar micro chart with bar highlight

Use highlight when each bar needs a visible interaction target or background track.

Bar micro chart fill bar with gradient

Use gradient fill when the small chart needs more emphasis in a metric card or dashboard block.

Bar micro chart with tooltip

Use a tooltip when users need the exact label or value on hover.

Bar micro chart responsive

Use responsive mode when the container size can change after render.