MindFusion.Charting for JavaScript: Interactive HTML5 Charts and Gauges

About MindFusion.Charting

MindFusion's JavaScript Charting Library, a part of MindFusion.JavaScript Pack, provides to HTML5 / JavaScript applications the ability to create and display various kinds of charts and gauges. The component supports bar, pie, doughnut, scatter, bubble, candlestick, line, area, radar and polar charts. Many features of the chart output can be customized in a way that suits your project best. Charts can have different styles, colors, fonts and pictures. The control's programming model comprises more than 200 methods and properties.

Getting Started

To run the samples locally:

1. Navigate to the project root directory.
2. Run npm start in your terminal. This will launch a local web server and open the samples in your default browser.

Features

• Multiple Chart Types: Supports a wide variety of chart types including bar, pie, doughnut, scatter, bubble, candlestick, line, area, radar, and polar charts.
• Gauges: Create and customize oval and linear gauges.
• Interactivity: Supports user interactions like zooming, panning, and moving the legend.
• Data Binding: Bind charts to a list of custom objects.
• Customization: Extensive customization options for styles, colors, fonts, and more.
• Multiple Axes: Build plots with multiple X and Y axes.
• TypeScript: Developed in TypeScript and transpiled to JavaScript.

Source Code

A MindFusion.Charting license can be purchased with the control's complete source code. The control is being developed in TypeScript and transpiled to JavaScript.

Samples

MindFusion.Charting comes with the following examples, which demonstrate different aspects of the control's functionality:

• AreaChart: This sample demonstrates various properties of the AreaChart control. Change property values in this panel to see their effect in chart above.
• BarChart: This sample demonstrates various properties of the BarChart control. Change property values in this panel to see their effect in chart above.
• BarChart3D: This sample demonstrates various properties of the BarChart3D control. Change property values in tab panels to see their effect in the chart.
• BubbleChart: This sample demonstrates various properties of the BubbleChart control. Change property values in tab panels to see their effect in the chart.
• CandlestickChart: Demonstrates how to create a candlestick chart, used to display open, close, high and low prices of stocks for a period of time.
• CarGauges: Shows how to use the gauge controls to imitate a vehicle dashboard.
• Clock: Shows how to use the oval gauge to create an analog clock.
• Compass: Shows how to use the oval gauge to create a compass.
• CustomData: This sample shows how a list of TypeScript objects can be used directly in a chart by means of a custom series class that implements the Series interface.
• Dashboard: Shows how to build a dashboard with dynamic layout.
• DateTimeSeries: This sample shows how to use the DateTimeSeries class and apply different label formats.
• DateTimeSeriesTooltips: This sample expands on the DateTimeSeries example by showing one way to implement custom tooltips for a chart.
• Equalizer: Shows how to use linear gauges to build equalizer UI.
• FunnelChart: This sample demonstrates various properties of the FunnelChart control.
• GroupLabels: This sample shows how to display labels for bar groups by using the AnnotationRenderer class.
• Interactivity: Use mouse click and drag to pan the chart. Dragging while pressing the CTRL key zooms the selected area of the chart. The legend can be moved too.
• LineChart: This sample demonstrates various properties of the LineChart control. Change property values in this panel to see their effect in chart above.
• ListBinding: This sample shows how to bind the chart to a list of custom TypeScript objects by setting the list as DataSource.
• MultipleAxes: Demonstrates how to set up multiple axes.
• MultiplePlots: This sample shows how to build a dashboard containing multiple plots that share a common axis.
• PieChart: This sample demonstrates various properties of the PieChart control. Change property values in this panel to see their effect in chart above.
• RadarChart: This sample demonstrates various properties of the RadarChart control. Change property values in this panel to see their effect in chart above.
• SynchronizedScroll: Demonstrates how you can synchronize scroll positions of two plots by configuring them to use a shared Axis instance.
• Thermometer: Shows how to use a linear gauge to create a thermometer.

History

Version 2.0

• ES6 modules, classes and properties
• FunctionSeries class
• Area charts are now rendered relatively to axis' Origin too

Version 1.2

• Axis origin
• toolTips property added to SimpleSeries class specifies tooltips for data values.
• dataLabelsBackground, dataLabelsBorderStroke, dataLabelsBorderDashStyle, dataLabelsBorderThickness properties added to Theme.
• innerLabelRotation, outerLabelRotation and stackOuterLabels
• All Series can accept now simple JavaScript array-s as arguments
• The ToolTip class is greatly extended with many new properties
• The Color.knownColors field lists all standard CSS color names
• Brush and Pen instances can be created with simple strings that specify the HTML code of the color
• yLabelAlignment property of BiaxialChart
• FontStyle.Underline fixed
• Stacked BarChart crashes fixed

Version 1.1

• FunnelChart control
• Theme XML serialization
• Label rotation for axes
• PieChart outer labels fixed.
• LegendRenderer borders fixed.
• Hit-testing in pie and radar charts fixed
• Bubbles in bubble charts alignments fixed
• Chart zoom buttons scaling fixed

Version 1.0

• Initial release

Contact Us

For any questions you might have about using the control:

• Email: [email protected]

For administrative and sales information:

• Email: [email protected]

Our website:

• https://www.mindfusion.dev

Telephone for technical support:

• (+359) 889 199 729

Copyrights

Copyright (C) 2025, MindFusion LLC, Bulgaria All rights reserved.