HTML dashboard widget and chart kit

Build a data-rich dashboard with 26 ready-made SVG chart and KPI cards.

Radian packages gauges, forecasts, survey results, comparison charts, distributions, trends, and conversion views into one responsive dashboard page. Every visualization is drawn from editable JavaScript data with no chart-library dependency. The finance-flavored theme is only an example: replace the branding, labels, data, colors, and card arrangement to build dashboards for another industry, product, client, or internal project. The included values are static samples; there is no live feed or backend, and toolbar controls such as search, notifications, settings, and Details are visual only.

DOWNLOAD NOW Watch video

Homepage scroll · index.html

What's included

A broad visualization library inside one cohesive dashboard.

Mix, reorder, or remove cards to fit your reporting needs. The responsive grid, editable sample labels, and automatic header count make the page useful as both a complete concept and a source of individual widgets.

Five dashboard sections

Overview, Reports, Split Test, Breakdown, and Trends are organized within one index.html page. Additional screens and authentication are not included.

Extensive SVG chart set

Includes score, doughnut, pie, bar, column, stacked, grouped, line, area, radial, funnel, rings, sparklines, forecast, survey, matrix, spectrum, arc-poll, and comb visualizations drawn in vanilla JavaScript.

Centralized sample data

Update SCORE, DATA, FORECAST, SURVEY, SALES, and related objects in script.js to redraw the visualizations.

Scroll-triggered presentation

Numbers count up and chart paths animate when cards enter the viewport, with reduced-motion preferences respected.

Interactive range controls

Week, Month, Quarter, and Year controls redraw the forecast and sales cards from matching local data objects without a server request.

Search-ready toolbar layout

The toolbar provides a finished search-field treatment for future integration. The included field does not filter cards and hides below 1020px.

Dashboard chrome included

Notification, settings, Details, and chart-tool controls complete the interface visually. Menus and actions for those controls are not included.

Sticky section navigation

Icon links jump between dashboard sections, the breadcrumb tracks the active area, and the dock gains a frosted treatment on scroll.

Removable demo label

The dark strip identifies the showcase as a kit and can be deleted without affecting the dashboard below.

Editable accent system

Change --green (#1fc11b) in the CSS and its matching COLORS value in JavaScript to rebrand the charts consistently.

Responsive dashboard layout

Cards stack below 1040px, while the dock progressively removes secondary controls to preserve a practical one-row mobile header.

Poppins typography

Poppins loads from Google Fonts, with Helvetica Neue and Arial as fallbacks. Self-host it if your project requires offline use.

Video

Preview the visualizations and interactions together.

Watch the score gauge, report cards, range controls, and lower chart rows in a 1920×1080 dashboard walkthrough.

Score, reports, range tabs, and the lower chart rows in one clip.

The page

One page organized into five practical data views.

Card titles, questions, labels, and chart stages live in index.html; the package does not include additional application screens.

index.html Demo strip, dock, score hero, spectrum, reports, split test, breakdown, trends

Mobile friendly

Dense reporting views adapt cleanly for phones and tablets.

Cards become full-width below 1040px, and search, secondary icons, breadcrumbs, and demo notes progressively step away as available space narrows.

Radian credit score card on a phone — Score · 390px

Radian report cards stacked on a phone — Reports · 390px

Radian doughnut and pie cards on a phone — Breakdown · 390px

Brand, icon nav, and the avatar stay on one 54px row under 640px.
Cards stack. Spectrum callouts drop the extras so the strip fits.
The page does not grow sideways at 390px.

Easy to edit

Find editable content and data without hunting through the source.

Search [EDIT] to reach buyer-facing blocks. Section banners map the HTML, design tokens lead the CSS, and chart data objects sit near the top of the script.

index.html Demo strip, dock, card titles, questions, and every chart stage.
styles.css Tokens first. 1040 / 1180 / 1020 / 860 / 640 notes how the dock sheds pieces.
script.js SCORE, DATA, draw functions, range tabs, dock frost, and scroll-spy.

Code editor showing labeled Radian HTML, CSS, and JavaScript sections — Comments in the files point to what to edit. This is a stylized editor view of those labels.

Close-up

A restrained dashboard style that keeps data prominent.

Soft gray surfaces, dark ink cards, and a focused green accent give the leading score gauge and supporting metrics clear hierarchy.

Radian overview with the credit score gauge — Overview

The one page

Review the full dashboard and every major section.

The tall preview shows the complete page, followed by close-ups of Overview, Reports, Split Test, Breakdown, and Trends. Select a tile for the larger image.

Full Radian chart page from top to bottom — `index.html` Full page

Radian reports section with page side padding — `index.html` Reports

Radian split-test comb cards with page side padding — `index.html` Split test

Radian breakdown charts with page side padding — `index.html` Breakdown

Radian trends charts with page side padding — `index.html` Trends

In the zip

The complete source for the dashboard and its charts.

The package includes the dashboard HTML, responsive styles, chart-drawing JavaScript, setup guidance, and license terms. A live metrics API is not included, and this product-preview folder is not part of the buyer zip.

index.html The Radian widget page
assets/css/styles.css Tokens, cards, dock, and phone rules
assets/js/script.js SCORE, DATA, drawing, tabs, dock
README.md Setup and customization notes
LICENSE.txt Template license terms

Get the template

Start your next analytics interface with 26 visualizations ready to adapt.

Use the responsive HTML, CSS, and vanilla JavaScript as a complete dashboard or as a source of individual chart cards, then connect your own data layer.

Instant download after successful payment

Buy now — $20 By purchasing this product, you agree to the Terms and License.

Pay securely with PayPal VISA AMEX