Declarative SVG charts with responsive sizing and theme-aware colors.
Explore interactive tooltips, series legends and compact reporting views.
Smooth editorial traffic trend with tooltip.
<div class="chart" data-chart="area" data-labels='["Apr","May","Jun","Jul","Aug","Sep","Oct","Nov"]' data-series='[{"name":"Views","data":[62,78,74,91,98,108,121,142]},{"name":"Returning","data":[31,37,44,48,55,59,66,73]}]' data-height="250" data-format="compact" role="img" aria-label="Area example chart for newsroom metrics"></div>Compare newsletter performance week over week.
<div class="chart" data-chart="line" data-labels='["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]' data-series='[{"name":"Opens","data":[32,41,39,51,48,57,61]},{"name":"Clicks","data":[10,15,12,21,19,25,27]}]' data-height="245" data-format="percent" role="img" aria-label="Line example chart for newsroom metrics"></div>See editorial output by desk or by channel.
<div class="chart" data-chart="bar" data-labels='["News","Business","Culture","Tech","Science","Sports"]' data-series='[{"name":"Published","data":[41,29,22,19,16,11]},{"name":"Scheduled","data":[12,7,8,8,4,5]}]' data-height="235" data-format="compact" role="img" aria-label="Bar example chart for newsroom metrics"></div>Combine scheduled and published output.
<div class="chart" data-chart="bar" data-labels='["Apr","May","Jun","Jul","Aug","Sep","Oct","Nov"]' data-series='[{"name":"Web","data":[32,35,44,39,41,49,55,61]},{"name":"Newsletter","data":[14,16,18,22,25,27,28,31]}]' data-height="240" data-format="compact" data-stacked role="img" aria-label="Bar example chart for newsroom metrics"></div>Audience sources share an interactive legend.
<div class="chart" data-chart="donut" data-labels='["Search","Direct","Social","Referral"]' data-series='[{"name":"Search","value":46},{"name":"Direct","value":29},{"name":"Social","value":16},{"name":"Referral","value":9}]' data-height="224" data-format="percent" data-center="Traffic sources" role="img" aria-label="Donut example chart for newsroom metrics"></div>Dense summary cards with miniature trend lines.
<div class='ui-stat-row'><div class='stat'><span class='text-muted'>Today's views</span><strong class='stat-value'>12.8K</strong><div class="chart" data-chart="sparkline" data-labels='["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]' data-series='[{"name":"Views","data":[4,8,5,11,14,10,17]}]' data-height="60" data-format="compact" data-legend="false" role="img" aria-label="Sparkline example chart for newsroom metrics"></div></div><div class='stat'><span class='text-muted'>New subscribers</span><strong class='stat-value'>248</strong><div class="chart" data-chart="sparkline" data-labels='["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]' data-series='[{"name":"Subscribers","data":[5,7,6,8,9,10,12]}]' data-height="60" data-format="compact" data-legend="false" role="img" aria-label="Sparkline example chart for newsroom metrics"></div></div></div>No charting dependency required; all graphics use SVG and CSS theme variables.
| Attribute | Value | Purpose |
|---|---|---|
data-chart | line, area, bar, donut, sparkline | Type of SVG visualization. |
data-labels | JSON array | X-axis labels or category names. |
data-series | JSON array of series objects | Use {name,data,color?} for line, area, bar and sparkline; use {name,value,color?} for donut. |
data-height | pixels | Explicit chart height. |
data-format | number, compact, percent, currency, duration | Tooltip and axis formatter. |
data-stacked | Boolean attribute | Stack bar series into one column. |
data-legend="false" | Boolean string | Hide the series legend. |
data-y-max | number | Override calculated axis maximum. |
data-center | text | Center caption inside donut. |
For dynamic updates: change data-series, then call window.NBCharts.render(element).