Responsive Ready to Use Charts - Finecharts

Check out other items on Codecanyon

Check out other items on Themeforest

Finecharts is a ready-to-use chart and graph kit for dashboards and admin UIs. Drop in the bundled HTML pages, or lift the CSS, scripts, and js/settings/* patterns into your own Bootstrap-based project. Initialization and theme-aware refresh hooks are wired so you can ship faster for clients or your own products.

Product Overview

Finecharts (v5) is a practical shortcut to learn, demo, and integrate real chart libraries with consistent layout, dark/light theming, and copy-paste-friendly structure.

There are several different ways to use Finecharts:

1. Use ready-made graphs and charts on the included dashboard-style demo pages.
2. Let each page’s settings script rebuild charts when the user toggles light/dark (data-bs-theme).
3. Copy markup and a matching js/settings/<page>-settings.js file, then customize text, data, and options.

Requirements

• A modern desktop browser (Chrome, Firefox, Safari, Edge).
• An HTML/code editor.
• Any normal web hosting (shared hosting, VPS, static host, or local stack such as XAMPP/MAMP/WAMP)—no build step, no Node.js required.
• Demos target Bootstrap 5 patterns; adapt if your stack differs.

Optional: A handful of demos load scripts in ways that work best over http:// or https:// (not double-clicking the file from the desktop). If something looks off offline, open the same folder through your host or your editor’s “Live Preview” / local site URL.

Installation

1. Unzip the file you downloaded from CodeCanyon.
2. Open the HTML Files package and locate the Main folder (live demos) and Documentation (integration guide).
3. Upload the Main folder to your web server (FTP, cPanel File Manager, or your host’s usual static file workflow).
4. Open the site in your browser (e.g. https://example.com/main/).
5. Open Documentation/index.html for file structure, script order, and FineChartTheme notes.

How it Works

We’ve kept the workflow simple: each chart page loads its library (CDN or bundled), then shared theme scripts, then one settings file that builds the charts and registers a refresh for theme changes.

You might want pre-styled panels for an existing admin template, a reference while learning a new library, or quick pages for a client demo—how you use Finecharts is up to you.

File Structure

In the HTML Files download you will typically find:

1. Main – Demo site: HTML pages, css/, js/ (including js/settings/), img/, licenses/, etc.
2. Documentation – In-depth guide (index.html) for integration and theming.

Copy and Paste Contents

Ready-to-use demo pages (each with a matching script under js/settings/):

1. index.html – Sparkline-style charts (jQuery Sparkline)
2. chartjs.html – Chart.js
3. apexcharts.html – ApexCharts
4. peity.html – Peity
5. echarts.html – Apache ECharts
6. lightweight-charts.html – TradingView Lightweight Charts
7. uplot.html – uPlot
8. plotly.html – Plotly.js
9. billboard.html – Billboard.js
10. observable-plot.html – Observable Plot
11. d3.html – D3-based SVG examples
12. sigma.html – Sigma / graph visualization
13. frappe.html – Frappe Charts
14. toast-ui-chart.html – Toast UI Chart

Use of resources

• Layout and components follow Bootstrap; see their docs if you are new to the grid and utilities.
• jQuery is used where noted (e.g. sparklines and legacy shell helpers).
• Font Awesome (or bundled icon CSS) for icons—check the version included with the theme files.
• Chart.js – Chart.js documentation
• ApexCharts – ApexCharts documentation
• Apache ECharts – ECharts documentation
• Plotly.js – Plotly JavaScript documentation
• D3 – D3 documentation
• uPlot – uPlot
• Billboard.js – Billboard.js
• Observable Plot – Observable Plot
• Lightweight Charts – TradingView Lightweight Charts
• Toast UI Chart – Toast UI Chart
• Frappe Charts – Frappe Charts
• Peity – Peity
• jQuery Sparkline – see the plugin docs bundled with or linked from your sparkline demo.

Third-party licenses are summarized in Main/licenses/THIRD-PARTY-LICENSES.md for redistribution.

Change log

DATE : March 30, 2026 (v5.0.7) - Bootstrap 5 layout with light/dark theme via data-bs-theme - Modern chart stack: Chart.js, ApexCharts, ECharts, Plotly, D3, uPlot, Billboard.js, Observable Plot, Lightweight Charts, Toast UI Chart, Frappe Charts, Sigma, Peity, Sparklines - Central FineChartTheme + per-page js/settings/* pattern and theme refresh registration - New Documentation guide (script order, integration checklist, library notes)