The MindFusion.Charting library 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.
Official webpage https://mindfusion.eu/javascript-chart.html
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.
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 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.
-
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.
Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via Twitter or our company blog. A YouTube channel with interactive video tutorials is available here.
The end-user license agreement for JS Chart is here.