Bars, gauges and charts for Home Assistant dashboards.
Every style set up from the visual editor, drawn by the card itself, and themed to match
your dashboard in light and dark.
1.2 brings the first history chart, a line chart with axes, hover readout and a compact layout. See the roadmap board for what is coming and in what order.
📖 The documentation is in the wiki, also published as a searchable site. This page is the summary. What changed in each version is on the releases page.
- Everything from the visual editor. Pick entities, choose a style, set colour bands and limits without writing YAML. YAML still works, and the editor and YAML always agree.
- One card, many styles. Switching from a bar to a ring or a gauge is one setting. Colour bands, actions, names and limits carry across.
- No chart library. Every style is drawn by the card's own code, so it stays small, loads fast on wall tablets, and follows your Home Assistant theme.
- Limits from anywhere. Minimum, maximum and target can each be a number or another entity.
| Style | Good for | Status |
|---|---|---|
| Classic bar | Batteries, levels, anything 0–100 | 1.0 |
| Thin bar | Storage, compact lists | 1.0 |
| Segmented bar | Signal strength, fill levels | 1.0 |
| Vertical / tank | Tanks, bins, water butts | 1.0 |
| Ring | CPU, memory, disk | 1.0 |
| Half circle with needle | Power, speed | 1.0 |
| Three-quarter arc | Temperature, humidity, CO₂ | 1.0 |
| Line chart | How a sensor changed over hours, days or months | 1.2 |
| Area and column charts | Filled history, totals per hour or day | Planned |
| Pie, donut, pictograph, tally | Sharing out a total, counting | Planned |
| Histogram, scatter, heatmap and more | Patterns over weeks | Planned |
Until Chartdeck is in the HACS default list, add it as a custom repository:
- Open HACS, choose ⋮ → Custom repositories.
- Add
https://github.com/tempus2016/chartdeckwith the type Dashboard. - Search for Chartdeck, download it, and reload your browser.
To install by hand, save chartdeck-card.js to <config>/www/ and add
/local/chartdeck-card.js as a dashboard resource of type module. The
Installation page has the detail.
Edit a dashboard, choose Add card, and search for Chartdeck. The editor walks you through the rest. The Quick start shows the same in pictures.
type: custom:chartdeck-card
style: ring
entities:
- sensor.cpu_usage
severity:
- from: 0
color: green
- from: 80
color: redEvery option is in the wiki.
- Something not right? Check Troubleshooting, then open an issue.
- Want a chart type that is not here yet? Use the New chart type form — the votes on those decide what comes next.
- Questions and dashboards to show off go in Discussions.
See CONTRIBUTING.md. Translations are the easiest place to start.
MIT.