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 ✔

React Grid

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.

Current list of controls include:

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