# HTML Charts

> 41 free Chart.js charts for dashboards. Each reads a grid on the same page and redraws it – no API, no install, and no data leaves the browser.

Built and maintained by Kai Jones, data analyst (CV: https://kaijxnes.com). Source: https://github.com/kaijxnes/HTML-Charts

How it works: add a grid with the chart's columns to the dashboard page, add an HTML container that runs JavaScript, paste the snippet. Charts look for generic headers (Month Key, Metric 1…, Dimension A…); map other names with data-columns='{"key":"Header"}' on the placeholder div. All demo data on the site is random.

## Charts

- [Monthly Bars](https://viz.kaijxnes.com/monthly-bars.html): A $ metric by month as bars, with a toggle between three metrics, 6-month average cards and a second metric as a line. Script: https://viz.kaijxnes.com/charts/monthly-bars-1.1.0.js
- [Stacked Segments](https://viz.kaijxnes.com/stacked-segments.html): Metric × units by month, stacked by segment (any combination of three dimensions), with filters and a ranking. Script: https://viz.kaijxnes.com/charts/stacked-segments-1.1.0.js
- [Segment Breakdown](https://viz.kaijxnes.com/segment-breakdown.html): The stacked segment view for grids with the month first and two dimensions – starts on Dimension A, combine with Dimension C. Script: https://viz.kaijxnes.com/charts/segment-breakdown-1.1.0.js
- [Cost vs Return](https://viz.kaijxnes.com/cost-vs-return.html): Cost against return (units × value) by month: net return, ROI, cost per unit vs value per unit and a monthly table. Script: https://viz.kaijxnes.com/charts/cost-vs-return-1.1.0.js
- [Month Heatmap](https://viz.kaijxnes.com/month-heatmap.html): A heatmap of a $ metric by start month and month index – per month, cumulative or per unit – with every month's curve against the average. Script: https://viz.kaijxnes.com/charts/month-heatmap-1.1.0.js
- [KPI Scorecard](https://viz.kaijxnes.com/kpi-scorecard.html): Up to six metrics as cards with the latest value, change vs the previous month, a 3-month average or last year, and a sparkline; click one for its trend. Script: https://viz.kaijxnes.com/charts/kpi-scorecard-1.1.0.js
- [Time Series Trio](https://viz.kaijxnes.com/time-series-trio.html): Three metrics, each on its own row: a scorecard for the latest 7/28/90 days or months against the period before, next to a chart of all the data over time. Script: https://viz.kaijxnes.com/charts/time-series-trio-1.1.0.js
- [Funnel](https://viz.kaijxnes.com/funnel.html): Counts through ordered stages as a funnel, with step and overall conversion, the biggest drop-off and a conversion curve per segment. Script: https://viz.kaijxnes.com/charts/funnel-1.1.0.js
- [Change Bridge](https://viz.kaijxnes.com/change-bridge.html): A waterfall from one total to another, showing how much each item added or took away – e.g. last period to this period. Script: https://viz.kaijxnes.com/charts/change-bridge-1.1.0.js
- [Pareto](https://viz.kaijxnes.com/pareto.html): Items ranked largest first with a cumulative share line, showing how few items make up 80% of the total. Script: https://viz.kaijxnes.com/charts/pareto-1.1.0.js
- [Target Pacing](https://viz.kaijxnes.com/target-pacing.html): Month-to-date actual against target by day, with a month-end projection, % of target and the daily rate needed to hit it. Script: https://viz.kaijxnes.com/charts/target-pacing-1.1.0.js
- [Quadrant Scatter](https://viz.kaijxnes.com/quadrant-scatter.html): Each item plotted by two metrics, sized by a third, split into four quadrants at the averages – spot the high-value, low-cost winners. Script: https://viz.kaijxnes.com/charts/quadrant-scatter-1.1.0.js
- [Mix Shift](https://viz.kaijxnes.com/mix-shift.html): How the share of a total moves between segments month by month, as 100% stacked bars with gains and losses in points. Script: https://viz.kaijxnes.com/charts/mix-shift-1.1.0.js
- [Calendar Heatmap](https://viz.kaijxnes.com/calendar-heatmap.html): A daily metric laid out as a calendar, one square per day, with averages by weekday and totals by month. Script: https://viz.kaijxnes.com/charts/calendar-heatmap-1.1.0.js
- [Year over Year](https://viz.kaijxnes.com/year-over-year.html): A metric by calendar month for this year against the two before, monthly or year to date, with the YTD change. Script: https://viz.kaijxnes.com/charts/year-over-year-1.1.0.js
- [Leaderboard](https://viz.kaijxnes.com/leaderboard.html): A ranked table for any month with change vs the month before, rank movement, share, a 12-month total and a trend sparkline. Script: https://viz.kaijxnes.com/charts/leaderboard-1.1.0.js
- [Distribution](https://viz.kaijxnes.com/distribution.html): A histogram of one value per row (e.g. per customer or order), with median, mean, P10–P90 and how much the top 10% hold – optionally split into groups. Script: https://viz.kaijxnes.com/charts/distribution-1.1.0.js
- [Target Attainment](https://viz.kaijxnes.com/target-attainment.html): Actual against target for every item as bullet bars, coloured by % of target, with the overall position and who's furthest ahead or behind. Script: https://viz.kaijxnes.com/charts/target-attainment-1.1.0.js
- [Anomaly Watch](https://viz.kaijxnes.com/anomaly-watch.html): A daily or monthly metric against its rolling average with a normal band, flagging the points that are unusually high or low. Script: https://viz.kaijxnes.com/charts/anomaly-watch-1.1.0.js
- [Treemap](https://viz.kaijxnes.com/treemap.html): Rectangles sized by value, grouped by one dimension and split by a second – click a group to zoom in. Script: https://viz.kaijxnes.com/charts/treemap-1.1.0.js
- [Small Multiples](https://viz.kaijxnes.com/small-multiples.html): A small chart per segment, side by side, with the latest value and change – on the same scale or each on its own. Script: https://viz.kaijxnes.com/charts/small-multiples-1.1.0.js
- [Variance Table](https://viz.kaijxnes.com/variance-table.html): A table of up to three metrics by segment for any month against the previous month or last year, with colour-coded changes and totals. Script: https://viz.kaijxnes.com/charts/variance-table-1.1.0.js
- [Gauges](https://viz.kaijxnes.com/gauges.html): Up to 12 KPIs as dials against their targets, with red/amber/green zones and a target marker. Script: https://viz.kaijxnes.com/charts/gauges-1.1.0.js
- [Combo Chart](https://viz.kaijxnes.com/combo-chart.html): Bars for one metric with one or two more as lines on a second axis, grouped by day, week, month, quarter or year. Script: https://viz.kaijxnes.com/charts/combo-chart-1.1.0.js
- [Flow (Sankey)](https://viz.kaijxnes.com/flow-sankey.html): How a total flows from one dimension to another – e.g. source to outcome – as bands sized by value. Click a node to highlight its flows. Script: https://viz.kaijxnes.com/charts/flow-sankey-1.1.0.js
- [Box Plot](https://viz.kaijxnes.com/box-plot.html): The spread of a value within each group – median, middle 50%, whiskers, mean and outliers – to compare groups fairly. Script: https://viz.kaijxnes.com/charts/box-plot-1.1.0.js
- [Radar Compare](https://viz.kaijxnes.com/radar-compare.html): Compare up to five segments across several metrics on one radar, each metric scored 0–100 against the best segment. Script: https://viz.kaijxnes.com/charts/radar-compare-1.1.0.js
- [Bump Chart](https://viz.kaijxnes.com/bump-chart.html): How each segment's rank changes month by month – who's rising, who's falling and how often the leader changes. Script: https://viz.kaijxnes.com/charts/bump-chart-1.1.0.js
- [Indexed Growth](https://viz.kaijxnes.com/indexed-growth.html): Every segment's trend indexed to 100 at a base month, so growth can be compared regardless of size. Script: https://viz.kaijxnes.com/charts/indexed-growth-1.1.0.js
- [Dumbbell](https://viz.kaijxnes.com/dumbbell.html): Before and after for every item as two joined dots, coloured by whether it got better or worse. Script: https://viz.kaijxnes.com/charts/dumbbell-1.1.0.js
- [Correlation Matrix](https://viz.kaijxnes.com/correlation-matrix.html): How strongly up to six metrics move together across rows, as a colour-coded matrix – click a cell to see the scatter. Script: https://viz.kaijxnes.com/charts/correlation-matrix-1.1.0.js
- [Time Series Stack](https://viz.kaijxnes.com/time-series-stack.html): Up to six metrics, each on its own row with a latest-range scorecard and a chart of all the data over time. Script: https://viz.kaijxnes.com/charts/time-series-stack-1.1.0.js
- [Time Series – 1 metric](https://viz.kaijxnes.com/time-series-single.html): One metric with a scorecard for the latest 7/28/90 days against the period before, next to its full history. Script: https://viz.kaijxnes.com/charts/time-series-trio-1.1.0.js
- [Time Series – 2 metrics](https://viz.kaijxnes.com/time-series-duo.html): Two metrics, each with a latest-range scorecard and a chart over time. Script: https://viz.kaijxnes.com/charts/time-series-trio-1.1.0.js
- [KPI Scorecard – 3 metrics](https://viz.kaijxnes.com/kpi-scorecard-trio.html): Three KPI cards with the latest value, change and sparkline, and a trend chart for the selected one. Script: https://viz.kaijxnes.com/charts/kpi-scorecard-1.1.0.js
- [Combo Chart – bar + line](https://viz.kaijxnes.com/combo-bar-line.html): One metric as bars and one as a line on a second axis – e.g. a total and a rate. Script: https://viz.kaijxnes.com/charts/combo-chart-1.1.0.js
- [Variance Table – 1 metric](https://viz.kaijxnes.com/variance-table-single.html): One metric by segment for any month against the previous month or last year. Script: https://viz.kaijxnes.com/charts/variance-table-1.1.0.js
- [Funnel – no segments](https://viz.kaijxnes.com/funnel-simple.html): A single funnel from stage counts, with step and overall conversion and the biggest drop-off. Script: https://viz.kaijxnes.com/charts/funnel-1.1.0.js
- [Treemap – one level](https://viz.kaijxnes.com/treemap-flat.html): One tile per item, sized by value. Script: https://viz.kaijxnes.com/charts/treemap-1.1.0.js
- [Quadrant Scatter – 2 metrics](https://viz.kaijxnes.com/quadrant-scatter-plain.html): Items plotted by two metrics, split into quadrants at the averages, without bubble sizing. Script: https://viz.kaijxnes.com/charts/quadrant-scatter-1.1.0.js
- [Radar Compare – 4 metrics](https://viz.kaijxnes.com/radar-compare-four.html): Segments compared across four metrics on a radar. Script: https://viz.kaijxnes.com/charts/radar-compare-1.1.0.js

## Full reference

- [llms-full.txt](https://viz.kaijxnes.com/llms-full.txt): every chart's columns, options and use cases in one file
- [About](https://viz.kaijxnes.com/about.html): why it was built and how it works

## Setup

- [How to set up](https://viz.kaijxnes.com/platforms.html): MicroStrategy, plain web pages, Tableau, Looker, Power BI and Qlik

## Optional

- [Chart.js 4.4.1 copy](https://viz.kaijxnes.com/chart.umd-4.4.1.js): unmodified, MIT-licensed
- [Author CV](https://kaijxnes.com): Kai Jones, data analyst