What's New in Ignite UI for React - High Performance Financial & Business Charts

As part of our Ignite UI for React release (take a peek at our general overview blog or our blogs on the React Data Grid and Excel Library) the native React UI toolset includes numerous controls to build modern experiences for web and mobile.

In this blog, I'll take you through everything there is to know about the React Data Chart included in our release.

High Performance Financial & Business Charts

Ignite UI for React includes a comprehensive native React charting library with a full set of business charts and financial charting capabilities. With over 60 different chart types from business charts, pie charts, gauges as well as line, bar, column and others, you can build any type of line of business, dashboard or analytics app. Our financial charting also includes built-in trend lines, financial indicators and volume indicators, all with a built-in toolbar for date range filtering and chart configuration.

Financial Chart

The Financial Chart control (igrFinancialChart) is a lightweight, high-performance chart. This chart can be easily configured to display financial data using an extremely simple and intuitive API. All you need to do is bind your single data source (a collection of data items) or multiple data sources (a collection of collections of data items) and the chart takes care of everything else. The chart offers multiple ways for the user to visualize and interpret the data, including several display modes for stock price and volume, and many financial indicators. The chart also makes use of label formatting to give the data context.

You can explicitly specify the chart type by setting the ChartType to:

• Bar
• Candle 
• Column
• Line

An example of the intuitive behavior of the Financial Chart control is that you do not need to explicitly tell it which columns to use for data. First, it will look for Open, High, Low, Close, Volume and Date columns to interpret the data. If it does not find those columns in the data source, it will use the first 6 numeric columns and the first date.

Panes

The financial chart has 5 main visual elements:

• Chart Toolbar for displaying configuration options.
• Prices Pane for displaying stock prices, trendlines, events, and overlays.
• Volume Pane for displaying trading volume.
• Indicators Pane is the secondary plotting area that renders for each selected indicator such as stock RSI, MACD.
• Navigation Pane for displaying zoombar with embedded chart preview.

Financial Chart provides various features to highlight, emphasize data to help users to understand and make decisions.

Legend

The Financial Chart comes with a built-in legend displayed between the toolbar and plotting area. This legend show titles of the data sources and it also shows the last value and percentage change between the first data item and the last data item.

Callouts Annotation

With the Callouts Annotation, you can annotate important data points in Financial Chart or even customize values in callout boxes based on your logic. For example, show stock split, dividends, or calculate maximum price in your data source.

Crosshairs Annotation

You can configure crosshairs to display as a horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at location of mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels.

Final Values Annotation

In Financial Chart, you can use the Final Values annotation to show values of the last data point in your data source(s). This annotation is rendered over the Y-Axis labels, as a colored box that matches color of a series.

Tooltip Types

The Financial Chart you can select one of three types of tooltips:

• Category Tooltip which renders combined tooltips for all series at a given date
• Item Tooltip which renders an individual tooltip for each series at a given date
• Default Tooltop which renders a tooltip only for series that is currently under mouse cursor

X-Axis Scale Breaks

In Financial Chart, you can define scale breaks on X-Axis to exclude custom ranges in your data source or any day of week. For example, exclude all data items that fall on weekends.

Customization

The financial chart control provides many visuals that can be customized, such as the navigation behavior, trend line layers, overlays, legend, chart titles and subtitles.

Category Chart

This charting control makes visualizing category data a breeze. Built on top of the market’s highest performing and feature rich data chart, the category chart simplifies the complexities of data visualization into a simplified API that anyone can use.

Easy Data Binding

Simply data bind a collection of data - or a collection of collections - to the dataSource property and the chart will analyze your data and automatically choose the best series to represent it. Or you can easily decide for yourself which type of chart to use too.

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px">
 </IgrCategoryChart>

A Wide Variety of Chart Types to Choose From

Make the most of your data with a chart for every need, including Line, Area, Column, Point, Spline, Waterfall and more.

Callouts Annotation

With the Callouts Annotation, you can annotate important data points in Category Chart or even customize values in callout boxes based on your logic. For example, calculate maximum values in your data source.

Crosshairs Annotation

You can configure crosshairs to display as horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels

Final Values Annotation

In Category Chart, you can use the Final Values annotation to show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels.

Highlight Layers

The Category Chart can display two new highlight layers when a user hovers over plotted data points.

Tooltip Types

In the Category Chart, you can select one of these types of tooltips

• Category Tooltip which renders the combined tooltips for all series in data category
• Item Tooltip which renders individual tooltip for each series in data category
• Default Tooltop which renders a tooltip only for series that is currently under mouse cursor

Data Chart

This is a base Chart component for Financial Chart and Category Chart. The Data Chart provides full features for our chart solutions. It provides over 75 Chart types and you can customize almost all aspects of chart controls with performance. You can show millions of data points with 10 ms refresh rate.

Data Chart provides highlight layers and annotation layers mentioned in Financial / Category Chart section to let end users interact with data. Core features of the Data Chart are:

• Real-Time Charting with Millions of Data Points
• Axes and Legend Support
• High-Density Scatter Series
• Hover Interactions
• Modular Design
• Financial Charting
• Trend Lines
• Interactive Panning and Zooming
• Scientific Charts
• Date/Time Axis
• Annotation Layers

We provide two types of charts - simple charts with simple APIs to visualize data and charts with APIs for depths and wide ranges of features. if you would like to show your data and let chart decide visual settings which I believe 80% of all cases, Financial / Category charts are right choice. If you would like to control "Everything", would like to show scientific charts, and are willing to learn all Chart APIs, the Data Chart would be a good choice. 

Other than charts, we have cool data visualization components available for the release!

Gauges / Bullet Graph

Like the meter on a car dashboard, Gauges / Bullet Graph are very powerful UIs to visualize real time data. For Ignite UI for React, we ported existing Gauges / Bullet Graph from other platforms.

Radial Gauge

The radial gauge component is a data visualization tool capable of displaying a gauge containing a number of visual elements, such as a scale with tick marks and labels, a needle, and a number of ranges. The component also has built-in support for animated transitions. This animation is easily customizable.

You can customize visuals for Backing, Scale, Labels, Tick Marks, Ranges and Needle.

Linear Gauge

The linear gauge component allows for visualizing data in the form of a linear gauge. It provides a simple and concise view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The component has also a built-in support for animated transitions.

Like Radial Gauge, you can customize visuals for Backing, Scale, Labels, Tick Marks, Ranges and Needle.

The linear gauge component can also configure orientation and direction.

Bullet Graph

The bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.

Get Started with Ignite UI for React

To get started with Ignite UI for React, you can visit the product page and browse online sample. You can also download a project that includes samples that can run on your local environment with npm packages.

Happy Coding!