MindFusion Charts & Gauges for JavaScript

A high-performance, modular ES6 charting and gauge library built to power technical dashboards, real-time analytics, and data-dense SaaS UIs.

Official Product Page · API Reference · Technical Forum

Interactive Redesigned Gallery

AI Infrastructure Dashboard	Cyberpunk Cockpit Dashboard	Studio Equalizer Mixer
Radar Spider Analysis	Minimal Precision Clock	Stock Trend Candlestick

---

Why MindFusion Charts

• All-in-One Data Visualizer: Over 20+ chart types (line, area, bar, pie, doughnut, radar, bubble, scatter, step, funnel) integrated with advanced Oval and Linear Gauges on a single canvas.
• Advanced Multi-Axis Architectures: Seamlessly synchronize metrics with vastly different scales using an unlimited number of independent X and Y axes on a single plot.
• Custom Gauge Drawing: Leverage powerful, high-performance canvas events to design completely bespoke gauge components—from high-fidelity automotive dashboards to professional studio audio faders.
• Dynamic CSS Theme Integration: Style every visual element—including plots, axes, legends, fonts, and data labels—declaratively using external stylesheets and CSS Custom Properties (CSS variables).
• Zero Runtime Dependencies: Written in pure ES6 JavaScript/TypeScript with full modular support; compatible with React, Vue, Svelte, Angular, or vanilla JS out of the box.

---

Key Features

Multi-Stage Data Visualization

Visualize sequential processes, conversion flows, and progress pipelines with a versatile suite of specialized charts. Maintain absolute control over segment spacing, neck dimensions, and step parameters using high-fidelity funnel, stacked, and step-area renderers.

Bespoke Gauge Interfaces

Utilize flexible custom drawing hooks to create stunning, interactive instruments. Build neon-glowing car dashboards, highly-responsive linear equalizer faders, and minimalist analog clocks that accurately track sub-minute increments.

High-Performance Rendering

Engineered to render vast datasets with sub-second response times. Optimized for real-time data streaming, rolling-window feeds, and high-frequency environments, the library maintains fluid, lag-free performance even when visualizing tens of thousands of data points.

Native TypeScript Support

Type definitions ship directly with the package, offering strict type checking, autocomplete, and inline documentation for a friction-free development workflow.

---

Getting Started with the Samples

To run these redesigned, high-fidelity samples locally:

1. Navigate to the project root directory.
2. Launch your preferred local web server or run npm start in your terminal. This will launch a local server and open the centralized sample portal in your default browser.
3. Alternatively, you can open any .html sample directly in your web browser.

---

Install (Using npm)

npm install @mindfusion/charting

Or reference the local script files included in this repository:

<script src="Scripts/drawing.js" type="text/javascript"></script>
<script src="Scripts/controls.js" type="text/javascript"></script>
<script src="Scripts/common.js" type="text/javascript"></script>
<script src="Scripts/common-collections.js" type="text/javascript"></script>
<script src="Scripts/charting.js" type="text/javascript"></script>

---

Quick Start (ES6 Class API)

import { Controls, Charting, Collections, Drawing } from '@mindfusion/charting';

// 1. Initialize the Bar Chart
const canvas = document.getElementById('myChart');
const chart = new Controls.BarChart(canvas, Charting.BarLayout.SideBySide);

// 2. Define Data Series & Labels
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
const series = new Collections.ObservableCollection([
    new Charting.BarSeries(new Collections.List([12, 17, 22, 13, 18, 25]), months)
]);
series.item(0).title = "Revenue";
series.item(0).supportedLabels = Charting.LabelKinds.InnerLabel | Charting.LabelKinds.XAxisLabel;

chart.series = series;

// 3. Customize Theme via Brushes
chart.plot.seriesStyle = new Charting.UniformSeriesStyle(
    new Drawing.Brush("#26a69a"), // Modern Teal Fill
    new Drawing.Brush("#ffffff"), // Crisp white stroke
    1                             // 1px thickness
);

// 4. Render
chart.draw();

---

Interactive Samples Gallery

Every sample in this repository has been fully modernized, optimized, and converted to our signature high-fidelity styling using the Inter font family and a vibrant, professional palette.

Modernized Hero Showcase

• SaaS Dashboards & Analytics
  • AI Infrastructure Dashboard — A unified control center tracking multi-metric API Latency, Token Consumption, and Cluster Load (Oval Gauge) in a synchronized 70/30 grid layout.
  • Office Operational Efficiency — Demonstrates how to bind the multi-dimensional Bubble Chart to completely custom business objects dynamically.
• Precision Instruments & Gauges
  • Studio Equalizer Rack — A highly-stylized audio mixer showcasing vertical linear faders with neon cyan slots and customized rotary gain knobs.
  • Cyberpunk Car Dashboard — A dark-themed cockpit interface integrating a neon-glowing Speedometer, Tachometer, Battery scale, and Oil pressure gauge.
  • Analog Precision Clock — A minimalist, high-fidelity analog watchface featuring fluid movements and tapered hands.
• Advanced Statistical Charting
  • Area Chart & Opacity — Visually stunning area trends supporting smooth Spline Curves and Stepped layers, with a real-time area opacity controller.
  • Financial Date-Time Trend — Tracks multi-year revenue performance mapped directly to a dynamic date-time axis, completed with high-contrast, dark-themed tooltips.
  • Multi-Plot Consolidated Revenue — Syncs Step-Area, Bar, and Scatter renderers across three parallel plots, sharing a single consolidated vertical scale.
  • Crosshair Data Tracker — Tracks hovering crosshair coordinates dynamically across multiple translucent area series.
  • Group & Category Labels — Demonstrates how to organize massive datasets cleanly using the AnnotationRenderer for multi-level axis grouping.

Complete Sample Directory

• BarChart — Fully dynamic comparative bar chart supporting Side-by-Side, Stacked, and Overlay layouts.
• BarChart3D — Modernized agricultural dataset rendered on a high-fidelity 3D bar & cylinder rendering engine.
• LineChart — Multi-series, responsive line analysis with curved, stepped, and standard polyline rendering modes.
• RadarChart — Multi-dimensional radar analysis with custom spiderweb grid settings and adjustable area opacity.
• PieChart — Dynamic pie & doughnut distribution chart with real-time slice detaching and interactive padding.
• NestedPieChart — A multi-layered sales analysis featuring an inner annual doughnut series and an outer departmental breakdown.
• DateTimeSeries — Interactive multi-year area visualization mapping a dynamic date-time series.
• CombinationChart — Links multiple stacked bar datasets with a line trend renderer on a unified canvas.
• Compass — A highly-detailed radial compass rendered completely custom using the OvalGauge API.
• Thermometer — A minimalist vertical thermometer utilizing the customized LinearScale API.

---

Custom CSS Theme Demonstration

One of MindFusion's most powerful features is complete visual separation of concerns. Take a look at our CSS Styling Sample, which styles all components completely externally.

Our custom stylesheet CssStyling.css defines:

#barChart, #areaChart, #pieChart {
    --mfc-plot-background: #0d0f1a;
    --mfc-legend-background: #121526;
    --mfc-legend-title-brush: #00f0ff;          /* Neon Cyan */
    --mfc-common-series-fill-0: #ff007f;        /* Neon Pink */
    --mfc-common-series-fill-1: #00f0ff;        /* Neon Cyan */
    --mfc-axis-labels-font-name: 'Inter', sans-serif;
}

This enables effortless corporate branding and seamless dynamic dark/light theme switching with zero JavaScript rendering overhead.

---

History & Changelog

Version 2.1 (Latest)

• Tower Charts: Introduced TowerChart control and TowerRenderer component for comparing structured 3D sequence and duration data side-by-side.
• Enhanced Modular Build: Complete modular ES6 class transpilation of all chart, plot, and gauge controllers.

Version 2.0

• ES6 Modernization: Fully rewritten in ES6 classes, properties, and module modules.
• FunctionSeries: Added FunctionSeries class to plot mathematical functions natively.
• Origin Axis rendering: Area charts now render relative to the axis Origin for highly accurate baseline area tracking.

Version 1.2

• Advanced Tooltips: Added comprehensive properties to the ToolTip styling engine.
• Flexible Arguments: All series constructors now accept raw JavaScript arrays.
• Baseline Alignment: Added axis.origin and multi-axis label alignments.

---

Technical Support

Get professional, enterprise-grade assistance whenever you need it:

• Developer Forum: MindFusion Forum
• Product Help Desk: Help Desk Support
• Direct Support Email: support@mindfusion.eu
• Administrative Sales: sales@mindfusion.eu
• Telephone Support: (+359) 889 199 729

Licensing

This repository's code samples demonstrate standard deployment for commercial licenses. Read the full End-User License Agreement here.

Copyright (C) 2026, MindFusion LLC. All rights reserved.

Built with 💙 by MindFusion. Devise, design, deliver.