Buy now Log in
English
Espanol Deutsch
MindFusion menu
  • Products
    • Suites
      • JavaScript
      • WinForms
      • WPF
      • .NET MAUI
      • Java
      • Diagramming
      • Scheduling
    • JavaScript
      • Diagram
      • Scheduler
      • Chart
      • Data Grid
      • Keyboard
      • Free JS Chart
    • ASP.NET MVC
      • Diagram
    • Blazor
      • Diagram
      • Chart
    • Java
      • Diagram
      • Scheduler
      • Chart
      • Spreadsheet
      • Keyboard
    • WinForms
      • Diagram
      • Scheduler
      • Spreadsheet
      • Chart & Gauge
      • Report
      • Map
      • Virtual Keyboard
      • Dock Control
    • WPF
      • Diagram
      • Scheduler
      • Gantt Chart
      • Spreadsheet
      • Chart & Gauge
      • Report
      • Map
      • Virtual Keyboard
      • UI
    • ActiveX
      • Diagram
    • .NET MAUI
      • Diagram
      • Scheduler
      • Chart
    • Android
      • Diagram
      • Chart
    • iOS
      • Diagram
    • WinUI
      • Diagram
    • WordPress
      • Org Chart Plugin
    • Applications
      • XML Viewer
      • InSight Diagrammer
  • Support
    • Forums
    • Documentation
    • FAQ
    • Help Desk
  • Company
    • About Us
    • Contacts
    • Blog
    • Newsletter
    • Services
    • Clients
    • Testimonials
    • Join Us
  • Downloads
  • Web Store
HomeProductsCharting for Javascript
OverviewSamplesHelpBuy

Bar Chart

Three series of bars grouped together with labels inside bars. The axes render labels and scale divisions. Contains customizable grid and a legend.

JavaScript Chart Control: Bar Chart
Run Download

Bar Chart 3D

Groups of 3D bars, which can also be rendered as cylinders. Uses an image as a background. Axes show scale divisions and a title label. Bars have inner labels.

3D Bar Chart in JavaScript
Run Download

Bubble Chart

A bubble chart with two series, a vertical grid and axes with labels and scale divisions. Each bubble renders custom labels. The chart has a custom highlight stroke and a legend.

JavaScript Bubble Chart
Run Download

Candlestick Chart

The traditional financial chart for a period of 30 days. Candles with open, close, high and low values on a vertical grid with custom colors. The chart features labels on axes with value ticks and a title.

JS Chart Library: Candlestick Chart
Run Download

Car Gauges

A set of two oval and two linear gauges that were customized to imitate the gauges of a car. You will learn how to adjust the scales, pointers and overall appearance on both types of gauges shipped with the chart library.

JavaScript Chart Component: Car Gauges
Run Download

Clock

The oval gauge is customized to render a classical watch. The sample uses custom painting of the background to achieve the gradient 3D effect visible on the watch.

JavaScript Chart Control: Clock Gauge
Run Download

Combination Chart

The Dashboard control is used to hold two text components, a legend and a plot with 2 bar series drawn as stacked bars and one line series.

A Combination Chart in JavaScript
Run Download

Compass

The oval gauge is used here to create a custom compass. The sample uses custom painting for all compass elements - foreground, background, scale and pointer.

JavaScript Gauge Control: Compass
Run Download

Cross Hair

An area chart with a Cross Hair renderer that is represented by a custom class, which derives from Renderer2D.

An Area Chart with Cross Hair Marker
Run Download

Custom Data

The chart uses as a data provider a collection with custom objects and the chart automatically retrieves the values for each bubble and its label.

JavaScript Chart Library: Custom Data
Run Download

Dashboard

A dashboard with two types of charts and an oval gauge. All dashboard elements use custom colors. Both charts show labels on the axes. The title is rendered with a stack panel.

JavaScript Dashboard Library
Run Download

DateTime Series

The area chart reads its data from DateTime values and renders labels in custom DateTime format. The chart also uses a horizontal grid and a title with custom font size.

JavaScript Chart Control: DateTime Series
Run Download

Equalizer

A combination of multiple linear and oval gauges that were customized to present an equalizer. The gauges use custom painting on both background and scales, custom colors and gradients.

JavaScript Gauge Library: Equalizer
Run Download

Full Bar Chart

A horizontal stacked bar chart that uses a custom series derived from BarSeries. The chart also has customized tooltips.

Full Bar Chart in JavaScript
Run Download

Functions

An oval gauge is customized and painted only halfway to render a scale where a function's values are displayed. The gauge uses custom painting for background, foreground and pointers.

JavaScript Oval Gauge
Run Download

Funnel Chart

A funnel chart with labels inside chart elements and a legend. The chart uses different appearance properties to customize the colors and fonts.

JavaScript Chart Library: Funnel Chart
Run Download

Group Labels

The sample uses four series with four data values and sets a label inside each bar in each series. The top labels are empty. Axes have tick marks and labels, the grid is crossed.

JavaScript Bar Chart with Group Labels
Run Download

Interactivity

Two types of charts - a bar and a pie that demonstrate how the library responds to actions performed by the users - drag, scroll, rotation, color change.

JavaScript Chart Library: User Interaction
Run Download

Line Chart with Tooltips

This sample shows how to build a line chart with multiple series and custom tooltips. We create two types of custom ChartSeries, which inherit from the Series2D class.

JavaScript Line Chart with Custom Series
Run Download

List Binding

The sample uses data binding to read the values and labels for a radar chart with three series. The chart also demonstrates the major customization options for radar/polar charts.

JavaScript Radar Chart with List Binding
Run Download

Multiple Axes

This combination chart is built by a dashboard that renders 5 different axes, a bar series and a line series. The chart also demonstrates how to use annotations - the label in the middle.

JavaScript Chart with Multiple Axes
Run Download

Multiple Plots

The sample uses a dashboard that holds hree different plots with three different renderers- for a step area, bar and scatter chart. Charts show labels at data points.

JavaScript Chart with Multiple Plots
Run Download

Nested Pie Chart

The standard PieChart control with a second PieRenderer instance that adds an outer doughnut PieSeries to the diagram.

Nested Pie Chart in JavaScript
Run Download

Pie Chart

A demonstrations of the major features for the pie chart control: labels, start angle, detached pieces, colors and rotation.

JavaScript Pie Chart
Run Download

Polyline Chart

A line chart with two series that demonstrate the major features of the line chart library: line types, data labels, interpolation, customizable legend, grid and axes.

Polyline Chart in JavaScript
Run Download

Radar Chart

A demonstration of the major features of the radar / polar chart: available chart types, grid options, angles, rotation types of labels and axis settings.

JavaScript Radar Chart
Run Download

Real-time Chart in React

The sample shows you how to integrate the JavaScript Chart library into a native React application that renders a financial chart, which is updated on regular intervals.

Real-time Chart in React
Run Download

Stacked Bar Chart

This is a bar chart that uses five custom data series with one data value to create a single stacked bar with custom tooltips.

Interactive Stacked Bar Chart
Run Download

Synchronized Scroll

A bar and a line chart use common X-axis that allows the user to perform synchronized scroll on both charts simultaneously. The sample uses the dashboard control, two plots and two chart renderers.

Synchronized Scroll in a JavaScript Chart
Run Download

Thermometer

The linear gauge is used to render a thermometer with scales in both Celsius and Fahrenheit. The sample uses custom painting for the background, foreground and the gauge scales and customizes a lot of the linear gauge's appearance settings.

JavaScript Gauge Library: Thermometer
Run Download

Value Gauge

This example shows a typical dashboard gauge that tracks the cost of a project. Custom drawing is used to paint the foreground of the gauge in differently colored sections.

Interactive Value Gauge in JavaScript
Run Download

Аrеа Chart

Three ареа series in a plot that shows labels and scale data on both axes. Users can adjust the brush opacity and the line type for the series. Includes a legend.

JavaScript Chart Library: Area Chart
Run Download

Pack for JavaScript

  • Diagramming
  • Charting
  • Scheduling
  • Grid
  • Mapping
  • UI
  • Data Grid

    News

  • Build an area chart in JavaScript with a cross hair marker that is implemented as a custom renderer class derived from Renderer2D.

    May 21st, 2025

  • Read the new tutorial how yo show marker lines on top of an area chart, which could be used to emphasize important or border values like dates on a timeline.

    May 12th, 2025

  • The new video tutorial explains in details how to build a devops flowchart from scratch with Mindfusion Diagramming for JavaScript

    May 5th, 2025

    Components

  • JavaScript
  • WinForms Pack
  • WPF Pack
  • .NET MAUI Pack
  • Java
  • Diagramming Pack
  • Scheduling Pack

    Get Products

  • Direct Downloads
  • License Scheme
  • XML Viewer

    Get Support

  • Forum
  • E-mail
  • Online Documentation
  • FAQ
  • Help Desk

    Company

  • Clients
  • Testimonials
  • About Us
  • Services
  • Contacts
  • Online Store
  • Blog
  • News Feed
  • Newsletter
  • E-mail: info@mindfusion.eu
    Phone: +359 889 199 729
    Fax: +359 2 931 54 38

Terms of Use Site Map Contact Us
Copyright © 2001-2018 MindFusion LLC. All rights reserved.