Demo · “Chart” block
Numbers you get at a glance.
Bar, line, area, donut and pie – in the website’s colours, matching light and dark. Enter the values in the “Chart” blockBuilding block of a page, such as text, image, gallery, map or form. You put pages together from blocks; each block has fields for its content and options for its display. or take them from a source of the website. All values on this page are examples.
Bar
Requests per month
Line
Visitors this week
Show as table
| This week | Last week | |
|---|---|---|
| Mon | 1,240 | 1,100 |
| Tue | 1,310 | 1,150 |
| Wed | 980 | 1,020 |
| Thu | 1,402 | 1,210 |
| Fri | 1,720 | 1,480 |
| Sat | 2,105 | 1,690 |
| Sun | 1,930 | 1,600 |
Donut
Visits by device
Show as table
| Share | |
|---|---|
| Smartphone | 61 % |
| Computer | 33 % |
| Tablet | 6 % |
Horizontal bars
Most visited pages
Stacked area
Where visitors come from
Show as table
| Search engines | Direct | Campaigns | |
|---|---|---|---|
| Wk 40 | 820 | 410 | 120 |
| Wk 41 | 870 | 400 | 260 |
| Wk 42 | 910 | 430 | 380 |
| Wk 43 | 980 | 450 | 300 |
| Wk 44 | 1,020 | 470 | 240 |
How it works
Easy to enter, the same everywhere.
-
“Chart” block
Labels one per line, values per series – numbers written as usual. Up to eight series, as number, percent, size or duration.
-
In the website’s design
Colours from the kitIn KLXM Studio, the package of design and building blocks for a website: layout, colours, fonts and the matching blocks. A kit can be adapted or switched – the content stays., stepped separately for light and dark and checked for colour vision deficiency; light on dark in dark sections automatically.
-
Readable for everyone
Below every chart “Show as table” with all values – even without JavaScript – plus a sentence for screen readers.
-
No third-party servers
The chart engine (Apache ECharts) is hosted on your server and only loads once a chart comes into view. No cookies, strict security rules (Content Security PolicyServer header that specifies from which sources a page may load scripts, styles, images and so on. It makes attacks such as cross-site scripting considerably harder.developer.mozilla.org (opens in a new tab)).
-
Swappable engine
Pages and extensions describe charts in their own format – the engine can be swapped later without touching content.
-
In the admin too
Dashboard, requests and notifications use the same charts; extensions can offer their own data sources for the block.