We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Overview

The HTML5 JavaScript charts supports large collection of series types that range from line to specialized financial chart. Pie and doughnut can be used to illustrate numeric proportion, whereas financial chart are used to present financial data. Better visualization and analysis of data can be done with the help of multiple axes, trackball, drilldown operations, and zooming features.


Chart types

Plot more than 32 chart types. Each chart type is easily configurable with built-in support for creating stunning visual effects:

  • Line or Area type charts and graphs for representing time-dependent data, showing trends in data at equal intervals.
  • Column or Bar type charts and graphs for comparing the frequency, count, total, or average of data in different categories. They are ideal for showing variations in the value of an item over time.
  • Pie or Pyramid type charts and graphs to represent data in proportions.
  • Bubble or Scatter charts and graphs to plot financial or scientific data.
  • Candle or Hilo type charts and graphs for stock analysis.
  • Range type charts and graphs to represent high and low values at a point.
  • Radar or Polar type charts and graphs to plot data points in terms of angles and values.
  • Waterfall charts and graphs to represent the cumulative effects of sequential positive or negative values.

High performance

Several data-rendering optimizations are included for best possible performance when plotting large volumes of data as well as handling a high frequency of real-time data.

Chart Performance


Axis types

Plot any type of data in a graph with the help of different axes types: numeric, category, date-time, date-time category, and logarithmic.

Numeric axis

A numeric axis is used to represent numeric data in charts.

Date-time axis

A date-time axis is used to represent dates in charts and displays dates as axis labels with different formats.

Category axis

A category axis is used to represent non-numerical data in charts and displays text labels instead of numbers.

Date-time category axis

A date-time category axis is used to display date values with nonlinear intervals to display business days by skipping holidays.

Logarithmic axis

A logarithmic scale is used to visualize data with both lower orders of magnitude (e.g., 10-6) and higher orders of magnitude (e.g., 106) in graphs.


Customizable chart axes

JavaScript chart axis elements can be customized further to make an axis more readable.

Custom Label Position

Label position

Enhance the space for rendering data points by moving the axis labels inside the plot area.

Label Rotation

Label rotation

Uses rotation to prevent labels from overlapping when the space for an axis is small.

Inversed Axis

Inversed axis

Reverse the axis labels and ticks. This swaps the higher and lower ranges of an axis.

Axis Range

Smart ranges

Adds padding to the start and end ranges of an axis to avoid data cropping at the edges.

Opposed Axis

Opposed axes

When the chart has multiple axes, this feature arranges the axes smartly by moving them to the opposite position from their default positions.

Smart Labels

Smart axis labels

Avoids overlapping of axis labels by trimming, wrapping, rotating, hiding, or placing them on multiple rows.

Multiple Pane

Multiple panes

Use multiple panes to show different types of series for clear visualization of data. An indicator for the financial series can be visualized better by adding separate panes.

Multilevel Labels

Multilevel labels

Organizes or groups data points in charts based on different categories. Both main category labels and subcategory labels can be rotated and trimmed to avoid overlapping.

Axis Crossing

Axis crossing

Move the origin of an axis to any point within the chart area for better visualization of data. This allows the axis to cross an associate axis.

Multiple Axis

Multiple axis

Plot different types of data against different axes in the same graph with the help of the multiple axes feature. Data about temperature can be plotted in Celsius and Fahrenheit with two different axes.


Strip lines

Draw special attention to any region of the chart or graph with the help of strip lines. You can also annotate the highlighted region with notes. For example, different climate information for a year can be highlighted by using strip lines.


Technical indicators

Use technical indicators to analyze the past and predict future market trends based on historic price, volume, or open interest.


Trendlines

Predict future trends with predetermined data for any measurement such as the stock market, target revenue, etc., with the help of trendlines in JavaScript charts.


Error bars

Handle any error or uncertainty in the measurements by adding error bars to the data points.


Annotations

Mark any specific area of interest by adding custom elements (shapes, images) to make charts more information-intensive.


Selection

Select a data point in a series for easy understanding of the selected data. Adding pattern and color to the selected data makes charts more interactive.

Selection


Range selection

Allows advanced data visualization by selecting a subset of data that can then be processed further in the grid or charts.

Range Selection


User interaction

The end user experience is greatly enhanced by including a set of user interaction features such as zooming and panning, crosshair, trackball, drill-down, events, and tooltip.

Zooming

Zoom

Visualize data points in any region of the chart by zooming the region using rectangular selection, pinch, or mouse wheel.

Tooltip

Tooltip

Add an interactive pop-up for data points with information on mouse hover.

Trackball

Trackball

Track data points that are close to the mouse position or touch contact. Trackball displays information about pop-up data with more customizable options.

Crosshair

Crosshair

Inspect or target any data point on mouse move with the help of crosshair. A thin horizontal line and a vertical line indicate the data point with the information displayed in an interactive tooltip.


Legends

Display additional information about the chart series with the help of a legend. The legend can also be used to select or collapse series.

Positioning

Dock the legend anywhere in the chart area to make the chart fit best on the page.

Icon customization

Customize legend icons with available built-in shapes such as rectangles, circles, diamonds, pentagons, triangles, crosses, and straight lines to improve the readability of charts and graphs.

Legend customization

Customize the look and feel of the legend with background and text-style options.

Paging

Enable paging when the legend items exceed the bounds. Each legend item can be viewed by navigating between the pages.


Data labels and markers

Annotate data points with labels to improve the readability of data. The readability can further be enhanced by adding markers or customizable symbols.

Connector lines

Connect labels at a distance from the chart to their data points with the help of a Bezier curve or straight lines.

Data label template

Add a template to display data labels with any HTML element such as images, DIV, and spans to make data more informative.

Data label customization

Customize the look and feel of data labels with font style, size, and color options. Also, position the label at the top, bottom, or center of the data point.

Data point marker

Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. In addition to these shapes, use images to make the point more attractive.


Smart labels

Arranges data labels smartly to avoid overlapping when the data point values fall in close range.


Grouped slice

Allows the points in pie series to be grouped. The grouped slices can be split into individual points by clicking the slice.


Empty points

Missed data in the data set for the series is elegantly handled with empty points. This will be useful when plotting stock data where the skipped holidays can be handled with this behavior.


Vertical chart

Invert the vertical bar or a horizontal line by rotating the series.


Real-time chart

Updates the chart dynamically with the live data that changes over seconds or minutes like stock prices, temperature, etc.


Animation

The chart series can be animated when rendering and refreshing the chart and graph widgets.

Animation


Globalization

JavaScript charts enable users from different locales to use them by formatting dates, currency, and numbering to suit preferences. Charts and graphs use the Essential JS 2 internalization library for handling value formatting.


Exporting

Exporting

Export, PDF, SVG, image

Export JavaScript charts to PDF documents or as image formats such as SVG, PNG, and JPEG in client-side.

Print

Print

Print the rendered JavaScript charts and graphs directly from the browser. Multiple charts or graphs in a webpage can also be printed together.


Localization

Localization

Localization

All the JavaScript chart strings in the user interface can be localized as needed. Charts and graphs use the Essential JS 2 localization library to localize the strings.

RTL

Right to left {RTL}

The JavaScript charts and graphs support right-to-left rendering, allowing the series, axis direction, and layout of the chart to be displayed from right to left. This improves the user experience and accessibility for RTL languages.


70+ JAVASCRIPT UI CONTROLS

Integrates with Top Frameworks

Built-in integration with the most popular third-party frameworks, like Angular 2+, and React.

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon