HTML Charts / Monthly Bars
Free Chart.js chart for HTML containers
Monthly Bars
A $ metric by month as bars, with a toggle between three metrics, 6-month average cards and a second metric as a line.
v1.1.0Live demo · random data1–4 metrics0 dimensionsneeds a dateOver timeKPIs
Live demo – the chart is reading the random grid underneath, exactly as it reads a real one
Demo grid · … rows of random valuesIn use this is your grid, tucked behind the chart
When to use it
Use it when you track one value per month and want to see the trend, how recent months compare with the six-month average, and whether thin months can be trusted.
Questions it answers
- Is this month above or below our recent average?
- Which months had too few units to rely on?
- How does the 18- or 24-month view compare with 12?
How to use it
- On your dashboard page, add a grid with the columns below (or map your own header names – see below). Keep it on the same page – tuck it behind the chart rather than hiding it, and make it tall.
- Add an HTML container (one that runs JavaScript) and paste the snippet.
- View the page. The chart finds the grid, reads every row and draws itself; it updates when filters change the grid.
| Default header | Key | What it's for | |
|---|---|---|---|
Month Key | month | Required | One bar per month (e.g. 202608). |
Metric 1 | v12 | Required | $ value per unit. Metric 2 and Metric 3 add the toggle. |
Metric 1 Avg | a12 | Optional | Filled for the latest 6 months only – drives the average cards (also Metric 2/3 Avg). |
Units | units | Optional | Units – how many users, customers or orders – drawn as the line. |
Month Index | idx | Optional | Used to order months if the month key can't be read. |
<div data-chart-embed="monthly-bars" style="height:100%"></div>
<script>
(function () {
var s = document.createElement("script");
s.src = "https://viz.kaijxnes.com/charts/monthly-bars-1.1.0.js";
s.integrity = "sha384-MEl3utPKIPYLdHMwiF5iUp0gm00Wy3HpjZtTGXLqrh71BhNvnRtIwRXJ8zPVe6Gm";
s.crossOrigin = "anonymous";
document.head.appendChild(s);
})();
</script>- Script URL
https://viz.kaijxnes.com/charts/monthly-bars-1.1.0.js- Integrity (SRI)
sha384-MEl3utPKIPYLdHMwiF5iUp0gm00Wy3HpjZtTGXLqrh71BhNvnRtIwRXJ8zPVe6Gm- Chart.js
https://viz.kaijxnes.com/chart.umd-4.4.1.js·sha384-dug+JxfBvklEQdJ4AYuBBAIScUz0bVN73xpy273gcAwHjb3qI0fXmuYNaNfdyYJG
The integrity value pins this exact version: the browser refuses to run the script if a single byte changes. New versions get a new file name and a new snippet, so a dashboard only changes when you paste the new snippet.
Your own column names
The chart looks for the default headers above. If your grid's headers are different, map them by key with data-columns on the placeholder – the chart then shows your names too. data-labels (same keys) changes just the on-screen names, and data-title changes the heading.
<div data-chart-embed="monthly-bars" data-columns='{"month":"Your Month Header","v12":"Your Metric Header"}' data-title="Your title" style="height:100%"></div>
<script>
(function () {
var s = document.createElement("script");
s.src = "https://viz.kaijxnes.com/charts/monthly-bars-1.1.0.js";
s.integrity = "sha384-MEl3utPKIPYLdHMwiF5iUp0gm00Wy3HpjZtTGXLqrh71BhNvnRtIwRXJ8zPVe6Gm";
s.crossOrigin = "anonymous";
document.head.appendChild(s);
})();
</script>What it does
- Bars for the chosen metric by month; click a card or button to switch
- Cards with the 6-month average of each metric
- Dashed average line; months outside the window are faded
- Units as a line on its own axis
- Optional low-volume flag: add
data-min-volume="600"to stripe and badge months with fewer Units than that (on in this demo)
Data & security
- Reads only what is drawn on the page for the viewer, so the viewer's normal permissions still apply
- Calculations happen in the viewer's browser; nothing is uploaded or sent anywhere
- The only downloads are this script and Chart.js, both integrity-checked
- No logins, API keys, cookies or browser storage
More charts
Stacked SegmentsStacked bars, Segments, Filters, Large gridsSegment BreakdownStacked bars, Segments, Large gridsCost vs ReturnKPIs, ROI, Cost per unitMonth HeatmapHeatmap, Curves, Large gridsKPI ScorecardKPI cards, Sparklines, ComparisonsTime Series TrioTime series, Scorecards, Date rangesFunnelFunnel, Conversion, SegmentsChange BridgeWaterfall, Variance, DriversParetoRanking, 80/20, CumulativeTarget PacingTargets, Projection, DailyQuadrant ScatterScatter, Bubbles, QuadrantsMix ShiftShare, 100% stacked, TrendsCalendar HeatmapCalendar, Daily, Weekday patternsYear over YearYoY, Year to date, SeasonalityLeaderboardRanking, Table, SparklinesDistributionHistogram, Percentiles, GroupsTarget AttainmentTargets, Bullet bars, RankingAnomaly WatchAnomalies, Rolling average, AlertsTreemapTreemap, Hierarchy, ShareSmall MultiplesSmall multiples, Trends, SegmentsVariance TableTable, Variance, Month vs monthGaugesGauges, Targets, KPIsCombo ChartBar + line, Dual axis, Time seriesFlow (Sankey)Sankey, Flows, Two dimensionsBox PlotBox plot, Spread, GroupsRadar CompareRadar, Profiles, Many metricsBump ChartRanks, Over time, MoversIndexed GrowthGrowth, Index, Over timeDumbbellBefore / after, Change, RankingCorrelation MatrixCorrelation, Many metrics, ScatterTime Series StackTime series, Scorecards, Up to 6 metricsTime Series – 1 metricTime series, Scorecard, 1 metricTime Series – 2 metricsTime series, Scorecards, 2 metricsKPI Scorecard – 3 metricsKPI cards, Sparklines, 3 metricsCombo Chart – bar + lineBar + line, Dual axis, 2 metricsVariance Table – 1 metricTable, Variance, 1 metricFunnel – no segmentsFunnel, Conversion, 0 dimensionsTreemap – one levelTreemap, Share, 1 dimensionQuadrant Scatter – 2 metricsScatter, Quadrants, 2 metricsRadar Compare – 4 metricsRadar, Profiles, 4 metrics