Ignite UI for React - from Infragistics

Ignite UI for React includes a wide range of easy to use React UI components that have been designed and optimized for high-performance, high-volume data scenarios. It includes a grid, charts, gauges and the Excel library.

You can build amazing experiences with Ignite UI for React. Ignite UI for React includes the world’s fastest, virtualized real-time, live-data React grid with interactive responsive web design features like built-in column types & templating support, column sorting, filtering, and more. The high-performance, streaming financial & business charts can render millions of data points in milliseconds with interactive panning & zooming, touch support, callout layers, trend lines and markers with full styling capability. The included Microsoft Excel library has read / write XLS & XLSX file capability, support for more than 300 Excel formulas and reporting with charting & sparklines.

Browser Support

Latest ✔️	Latest ✔️	Latest ✔️	Latest ✔️	Latest ✔️

Data Grid Docs

The Ignite UI for React Data Grid is both lightweight and developed to handle high data volumes. The React Grid offers powerful data visualization capabilities and superior performance on any device. With interactive features that users expect. Fast rendering. Unbeatable interactions. And the best possible user experience that you wouldn’t otherwise be able to achieve with so little code on your own.

React Charts & Graphs

The full-featured Ignite UI for React chart component is built for speed, simplicity, and beauty. It gives you access to more than 65 high-performance React charts such as – Bubble charts, Donut charts, Financial/Stock charts, Pie chart, Line chart and more. With our React component for business and stock charting, you are enabled to build stunning data visualizations, apply deep analytics, and render voluminous data sets in seconds. Flawless experience while scrolling through an unlimited number of rows and columns is guaranteed.

Keeping in mind the customization and configuration your users expect, the Ignite UI for React charts brings on rich interactivity, full touch-screen support that will run on any browser, intuitive API, minimal hand-on coding, and the same chart features that you come across with Google Finance and Yahoo Finance Charts - price overlays, trendlines, volume indicators, value overlays, and more.

Overview

Grids

Components	Status	Documentation	Released Version	Package
Grid	✅	Docs	18.3	igniteui-react-grids
Tree Grid	✅	Docs	18.3	igniteui-react-grids
Pivot Grid	✅	Docs	18.3	igniteui-react-grids
Hierarchical Grid	✅	Docs	18.6	igniteui-react-grids

Components

Group	Components	Status	Documentation	Released Version	Package
Lists	List	✅	Docs	16.11	igniteui-react
	Tree	✅	Docs	16.16	igniteui-react
	Spreadsheet	✅	Docs	16.11	igniteui-react-excel
Layouts	Accordion	✅	Docs	18.9	igniteui-react
	Avatar	✅	Docs	16.11	igniteui-react
	Card	✅	Docs	16.11	igniteui-react
	Carousel	✅	Docs	18.7	igniteui-react
	Dock Manager	✅	Docs	16.11	igniteui-dockmanager
	Expansion Panel	✅	Docs	16.11	igniteui-react
	Stepper	✅	Docs	16.11	igniteui-react
	Tabs	✅	Docs	16.11	igniteui-react
Menus	Toolbar	✅	Docs	18.2	igniteui-react-charts
	Navigation Bar (Navbar)	✅	Docs	16.11	igniteui-react
	Navigation Drawer	✅	Docs	16.11	igniteui-react
Frameworks	Excel Library	✅	Docs	16.11	igniteui-react-excel
Gauges	Bullet Graph	✅	Docs	16.11	igniteui-react-gauges
	Linear Gauge	✅	Docs	16.11	igniteui-react-gauges
	Radial Gauge	✅	Docs	16.11	igniteui-react-gauges
Data Entry & Display	Badge	✅	Docs	16.11	igniteui-react
	Button	✅	Docs	16.11	igniteui-react
	Button Group	✅	Docs	16.11	igniteui-react
	Checkbox	✅	Docs	16.11	igniteui-react
	Chip	✅	Docs	16.11	igniteui-react
	Color Editor	✅	Docs	18.7	igniteui-react-inputs
	ComboBox	✅	Docs	16.11	igniteui-react
	Dropdown	✅	Docs	16.11	igniteui-react
	Icon	✅	Docs	16.11	igniteui-react
	Icon Button	✅	Docs	16.11	igniteui-react
	Input	✅	Docs	16.11	igniteui-react
	Mask Input	✅	Docs	16.11	igniteui-react
	Date Time Input	✅	Docs	16.11	igniteui-react
	Radio & Radio Group	✅	Docs	16.11	igniteui-react
	Select	✅	Docs	16.11	igniteui-react
	Rating	✅	Docs	16.11	igniteui-react
	Switch	✅	Docs	16.11	igniteui-react
	Text Area	✅	Docs	16.11	igniteui-react
Interactions	Ripple	✅	Docs	16.11	igniteui-react
	Slider & Range Slider	✅	Docs	16.11	igniteui-react
	Zoom Slider	✅	Docs	16.11	igniteui-react-charts
Notifications	Banner	✅	Docs	16.11	igniteui-react
	Snackbar	✅	Docs	16.11	igniteui-react
	Toast	✅	Docs	16.11	igniteui-react
	Dialog	✅	Docs	16.11	igniteui-react
Scheduling	Calendar	✅	Docs	16.11	igniteui-react
	Date Picker	✅	Docs	16.11	igniteui-react

Charts & Maps

Group	Components	Status	Documentation	Released Version	Package
Charts	Bar Chart	✅	Docs	16.11	igniteui-react-charts
	Bar Chart	✅	Docs	16.11	igniteui-react-charts
	Bubble Chart	✅	Docs	16.11	igniteui-react-charts
	Column Chart	✅	Docs	16.11	igniteui-react-charts
	Composite Chart	✅	Docs	16.11	igniteui-react-charts
	Data Pie Chart	✅	Docs	16.11	igniteui-react-charts
	Donut Chart	✅	Docs	16.11	igniteui-react-charts
	Financial/Stock Chart	✅	Docs	16.11	igniteui-react-charts
	Line Chart	✅	Docs	16.11	igniteui-react-charts
	Pie Chart	✅	Docs	16.11	igniteui-react-charts
	Point Chart	✅	Docs	16.11	igniteui-react-charts
	Polar Chart	✅	Docs	16.11	igniteui-react-charts
	Radial Chart	✅	Docs	16.11	igniteui-react-charts
	Scatter Chart	✅	Docs	16.11	igniteui-react-charts
	Shape Chart	✅	Docs	16.11	igniteui-react-charts
	Spline Chart	✅	Docs	16.11	igniteui-react-charts
	Sparkline Chart	✅	Docs	16.11	igniteui-react-charts
	Stacked Chart	✅	Docs	16.11	igniteui-react-charts
	Step Chart	✅	Docs	16.11	igniteui-react-charts
	Treemap	✅	Docs	16.11	igniteui-react-charts
Maps	Geographic Area Map	✅	Docs	16.11	igniteui-react-maps
	Geographic Contour Map	✅	Docs	16.11	igniteui-react-maps
	Geographic High Density Map	✅	Docs	16.11	igniteui-react-maps
	Geographic Bubble Map	✅	Docs	16.11	igniteui-react-maps
	Geographic Symbol Map	✅	Docs	16.11	igniteui-react-maps
	Geographic Polygon Map	✅	Docs	16.11	igniteui-react-maps
	Geographic Polyline Map	✅	Docs	16.11	igniteui-react-maps
Dashboards	Dashboard Tile	✅	Docs	18.7	igniteui-react-dashboards

Create New App

The fastest way to kickstart your React application using Ignite UI for React is using the Ignite UI CLI.

  npm i -g igniteui-cli
  ig new <project name> --framework=react --type=igr-ts
  cd <project name>
  ig add grid <component name>
  ig start

This will initialize a new application and add a single page to it with a pre-configured grid component. If you need to add other components and therefore the packages they reside in, you can either init the Ignite UI CLI prompt again using the ig command and choose from the list of templates or use the following commands to install the packages needed directly.

  npm install --save igniteui-react-charts igniteui-react-core
  npm install --save igniteui-react-excel igniteui-react-core
  npm install --save igniteui-react-gauges igniteui-react-core
  npm install --save igniteui-react-grids igniteui-react-core 
  npm install --save igniteui-react-maps igniteui-react-core
  npm install --save igniteui-react-excel igniteui-react-core
  npm install --save igniteui-react-spreadsheet igniteui-react-core

Or

  yarn add igniteui-react-charts igniteui-react-core
  yarn add igniteui-react-excel igniteui-react-core
  yarn add igniteui-react-gauges igniteui-react-core
  yarn add igniteui-react-grids igniteui-react-core
  yarn add igniteui-react-maps igniteui-react-core
  yarn add igniteui-react-excel igniteui-react-core
  yarn add igniteui-react-spreadsheet igniteui-react-core

After executing those commands, your new project will be built and served. It will automatically open in your default browser and you will be able to use Ignite UI for React components in your project.

Importing Modules

First we have to import the required modules of the components we want to use. We will go ahead and do this for the Category Chart component.

import { IgrCategoryChartModule } from "igniteui-react-charts/ES5/igr-category-chart-module";

IgrCategoryChartMapModule.register();

Using Components

We are now ready to use the CategoryChart component in our markup! Let's go ahead and define it:

// App.txs
render() {
    return (
        <div style={{height: "100%", width: "100%" }}>
             <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px">
             </IgrCategoryChart>
        </div>
    );
}

Running Application

Finally, we can run our new application by using one of the following commands:

npm run start