v1.4 · Stable

Chart

One component for every chart primitive, with zero external dependencies. Tier 1 is pure SCSS (donut, gauge, bars, sparkline); Tier 2 adds an interactive renderer via ng_chart.js (line, area, bar). The value is data, passed through --ng-chart-value or data-values.

Shared tokens & colors

--ng-chart-valueThe data (e.g. 70%) — not a cosmetic override.
--ng-chart-fillSeries/arc color (default --ng-primary-bg).
--ng-chart-trackEmpty-track color (default --ng-fill).

Add .ng-chart-<color> for any of the 20 color tokens. Label: .ng-chart-label.

Donut · Tier 1

conic-gradient + radial mask. Sizes .xs .sm .md .lg .xl (default md).

index.html
<div class="ng-chart-donut ng-chart-primary" style="--ng-chart-value: 70%">
    <span class="ng-chart-label">70%</span>
</div>
Live preview
70%
45%

Gauge · Tier 1

Half circle (180°). Sizes .xs .sm .md .lg .xl (default md).

index.html
<div class="ng-chart-gauge ng-chart-success" style="--ng-chart-value: 72%">
    <span class="ng-chart-label">72%</span>
</div>
Live preview
72%

Bars · Tier 1

Column chart (flex + height %). For bars the sizes set the bar width: .sm .md .lg (default md). Chart height is the token --ng-chart-bars-height (default 8rem). Color per bar with .ng-chart-<color> on the single .ng-chart-bar.

index.html
<div class="ng-chart-bars ng-chart-primary">
    <div class="ng-chart-bar" style="--ng-chart-value: 65%"></div>
    <div class="ng-chart-bar" style="--ng-chart-value: 40%"></div>
    <div class="ng-chart-bar" style="--ng-chart-value: 90%"></div>
</div>
Live preview

Sparkline · Tier 1

Inline SVG <polyline> (points in the markup). The .area variant adds a soft fill.

index.html
<span class="ng-chart-sparkline ng-chart-success area">
    <svg viewBox="0 0 100 30" preserveAspectRatio="none">
        <polyline points="0,22 17,14 33,18 50,8 67,16 83,5 100,10"></polyline>
    </svg>
</span>
Live preview

Interactive · Tier 2 (ng_chart.js)

Pass the data as attributes; the JS renders in real pixel coordinates (round dots, no distortion), auto-scales, is responsive, and shows a tooltip on hover. data-chart = line | area | bar.

index.html
<!-- requires ng_chart.js in the foot -->
<div class="ng-chart-js ng-chart-primary"
     data-chart="line"
     data-values="3,7,4,8,6,9,5"
     data-labels="Mon,Tue,Wed,Thu,Fri,Sat,Sun"
     data-dots="true"></div>
Live preview (hover)

Tier 2 attributes

data-chartline · area · bar
data-valuesCSV numbers (the data).
data-labelsOptional labels for the tooltip.
data-min / data-maxOptional bounds (default: data min/max; bar → 0).
data-dotsline/area: show points.

One component, layered: Tier 1 is SCSS-only; Tier 2 needs ng_chart.js in your foot. No external charting library.