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.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
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.
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:
| Group | Name | Description | Packages |
|---|---|---|---|
| Charts | Bar Chart | Use the category chart component to analyze and automatically choose the best chart type to represent data. Learn about our chart types for visualization. | igniteui-react-charts igniteui-react-core |
| Line Chart | Create a data chart that displays multiple instances of visual elements in the same plot area in order to create composite chart views. | igniteui-react-charts igniteui-react-core |
|
| Doughnut Chart | Use the doughnut chart component to display multiple variables in concentric rings for hierarchical data visualization. View the demo for more information. | igniteui-react-charts igniteui-react-core |
|
| Financial Chart | Use the financial chart component to visualize financial data using a simple API. View the demo, dependencies, usage and toolbar for more information. | igniteui-react-charts igniteui-react-core |
|
| Pie Chart | Create a colorful pie chart to display categorical data in Ignite UI for data visualization. View the demo for more information. | igniteui-react-charts igniteui-react-core |
|
| Sparkline | The sparkline component is a lightweight charting control. It is intended for rendering within a small scale layout such as within a grid cell, but can also be rendered alone. | igniteui-react-charts igniteui-react-core |
|
| Geographic Map | Use this map component to display data with geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery map | igniteui-react-maps igniteui-react-core |
|
| Gagues | Bullet Graph | Create data presentations using the bullet graph component to display ranges or compare multiple measurements. View our data visualization tools. | igniteui-react-gauges igniteui-react-core |
| Linear Gauge | Use the linear gauge component to visualize data with a simple and concise view. Learn about the configurable elements, dependencies and code snippets. | igniteui-react-gauges igniteui-react-core |
|
| Radial Gauge | Create a colorful radial gauge to display a number of visual elements, such as needle, tick marks and ranges. View our data visualization tools. | igniteui-react-gauges igniteui-react-core |
|
| Grids | Grid | Use Grid component to simplify the complexities of the grid domain into manageable API so that a user can bind a collection of data. | igniteui-react-grids igniteui-react-core igniteui-react-inputs igniteui-react-layouts |
| Spreadsheet | Spreadsheet component allows visualizing and editing of spreadsheet data. Features include activation, cell editing, conditional formatting, selection, clipboard. | igniteui-react-spreadsheet igniteui-react-excel igniteui-react-core |
|
| Frameworks | Excel Library | Use the Excel Library to work with spreadsheet data using Microsoft Excel features. Easily transfer data from excel to your application. | igniteui-react-excel igniteui-react-core |
| Interactions | Zoom Slider | The Zoom Slider control provides zooming functionality to range-enabled controls. This component features a horizontal scroll bar, a thumbnail of the whole range, and a resizable zoom-range window. | igniteui-react-charts igniteui-react-core |
| Core | Expansion Panel | A lightweight accordion component which can be rendered in two states - collapsed or expanded. The expansion panel can be toggled using mouse click, or keyboard interactions. | igniteui-react |
| Tree | Use this tree component to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. | igniteui-react | |
| Chip | The chip component helps people enter information, make selections, filter content, or trigger actions. | igniteui-react | |
| Snackbar | Use the snackbar component to provide feedback about an operation by showing a brief message at the bottom of the screen. | igniteui-react | |
| Toast | A super lightweight and small pop-up component that is used for displaying a message content, notifying end-users about the status of a changed record. | igniteui-react | |
| Slider | A component that allows selection in a given range by moving the thumb along a track. | igniteui-react | |
| Range Slider | A components that allows selection of a range by moving the thumb along a track. | igniteui-react | |
| Avatar | The avatar component helps to display initials, images, or icons in your application. | igniteui-react | |
| Badge | A component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. | igniteui-react | |
| Button | A component that lets you enable clickable elements that trigger actions in your React app. | igniteui-react | |
| Calendar | The calendar component is used to show dates and weekdays. It is also the best way for providing monthly or yearly views to end-users. It also lets you restrict the minimum and maximum date ranges that people can navigate through. | igniteui-react | |
| Card | Use this component to display text, images, icons, and buttons in a visually rich presentation that can serve as an entry point to more detailed information. Cards can be used to create a multimedia dashboard. | igniteui-react | |
| Checkbox | A standard checkbox component that enables users to select basic checked and unchecked states or an additional indeterminate state. | igniteui-react | |
| Form | The form component is used for setting up a contact form and/or a registration page that fit in any application's requirements. You can easily provide React form validation, define form orientation, and configure or customize your desired layout as well. | igniteui-react | |
| Icon | This component allows you to easily display font or choose from a large set of predefined SVG icons, but it also gives you the ability to create custom font icons for your project. | igniteui-react | |
| Icon Button | Use this component to add registered icons as buttons in your application. | igniteui-react | |
| Input | A lightweight and powerful input component with a variety of additional features over the standard HTML input | igniteui-react | |
| List | The list component is extremely useful when presenting a group of items. You can create a simple list of textual items, or a more complex one, containing an array of different layout elements. | igniteui-react | |
| Navigation Bar (Navbar) | The navbar component informs the user of their current position in an app. The Navigation Bar can also provide links to quick actions such as search or favorite, helping users navigate smoothly through an application without trying to move to invalid routes or states. | igniteui-react | |
| Navigation Drawer | This component provides side navigation that can be expanded or collapsed within the content. A mini version provides quick access to navigation even when closed. | igniteui-react | |
| Radio | Use this component to allow the user to select a single option from an available set of options that are listed side by side. | igniteui-react | |
| Radio Group | The wrapping component for a set of radio buttons allowing for a single choice. | igniteui-react | |
| Ripple | Use this component if you need to create an animation in response to a touch or a mouse click. | igniteui-react | |
| Switch | A binary choice selection component that behaves similarly to the switch component in iOS. | igniteui-react |
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.
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();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>
);
}Finally, we can run our new application by using one of the following commands:
npm run start