< DHTMLX Suite 9.0: Grid Widget with Tree Mode, Data Grouping, Customizable Totals, Input Masks, and Much More

React Charts

A multi-faceted React chart library based on Material Design. Part of the Suite UI library which provides endless customization and configuration possibilities.

How It Works

5 Quick Steps to Integrate Charts with React
1
Create a Chart.js file and import files and styles of Chart
2
Create Chart class, which extends the Component class
3
Add an empty container for Chart with the reference to it in the el property using the ref property
4
When the component is initialized, initialize Chart and attach the instance of Chart to the container with the reference to it in the el property
5
Specify a set of configuration properties if needed

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Full control with JavaScript API
  • Wide customization options
  • Line and Spline charts
  • Bar and X-Bar charts
  • Area and Spline Area charts
  • Pie, Pie 3D, and Donut charts
  • Radar charts
  • Scatter charts
  • Stacked charts
  • Calendar heatmap chart
  • Mixed charts
  • Logarithmic scale
  • Custom scale labels
  • Custom templates for tooltips
  • Configurable legend
  • Ability to hide scales and grid lines
  • Ability to show a threshold line and baseline
  • Various shapes of points and markers (circle, triangle, rhombus, etc.)
  • Data loading in the JSON format
  • Export to PDF/PNG
  • Accessibility support

Dynamic React Charts - Live Update

With dhtmlxChart you're able to visualize the changes in data happening in real time

Why Choose DHTMLX React Chart Library?

Create well-formed interactive React charts

dhtmlxChart component provides 12 types of charts, each of which is designed to meet different needs. Bar charts, for example, display several data sets, plotted separately side by side or stacked. Pie charts can be represented in 2D and 3D styles. It is possible to combine different chart types on a single figure, e.g., linking line and bar graphs.

Easily adjust your React JS chart

Use DHTMLX feature-rich API to empower your charts with any desirable functionality. Every element can be modified; scales, series, and legend are entirely configurable. You can decide to hide gridlines or make them dashed, add a baseline and a threshold line for illustrating a target value, set a logarithmic scale, and much more.

Adapt your React JS chart library styling

DHTMLX charting library for React brings unlimited customization opportunities to meet your project requirements. Receive complete control over paddings, margins, sizes, and colors of all charts’ parts. You can add custom templates for tooltips and scale labels, apply bar gradient, set colors and transparency of the series filling, etc.

Use Angular and Vue.js wrappers

Apart from charts for React.js, our dev team suggests trying wrappers for the most popular and widely-used frameworks. Enjoy smooth integration into your web apps based on Angular and Vue.js. You can evaluate the capabilities of dhtmlxSuite UI components for free during a 30-day trial period.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components

dhtmlxChart Licensing

Individual Commercial Enterprise Ultimate
License Terms
Individual
Commercial
Enterprise
Ultimate
Developers
Individual
1
Commercial
5
Enterprise
20
Ultimate
Projects
Individual
1
Commercial
1
Enterprise
5
Ultimate
Use in SaaS (unlimited end-users)
Individual
Commercial
Enterprise
Ultimate
Source code
Individual
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Individual
Commercial
Enterprise
Ultimate
Support Plan
Individual
Standard Support
Commercial
Premium Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Individual
1 year
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Individual
Major, minor, and maintenance updates
Commercial
Major, minor, and maintenance updates
Enterprise
Major, minor, and maintenance updates
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Individual
10
Commercial
30
Enterprise
50
Ultimate
Response Time
Individual
72h
Commercial
48h
Enterprise
48h
Ultimate
24h
Personal Account Manager
Individual
Commercial
Enterprise
Ultimate
Functionality
Individual
Professional
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
Calendar heatmap chart
Individual
Commercial
Enterprise
Ultimate
Online export to PDF/PNG without watermark (Charts)
Individual
Free for 1 year
Commercial
Free for 1 year
Enterprise
Free for 1 year
Ultimate
Free for 3 years
Up to 40% off
If you choose the whole Suite library instead
of buying DHTMLX UI components separately:

Suite Individual - $799

Suite Commercial - $1699

Suite Enterprise - $3499

Suite Ultimate - $6999

demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

If you have an open-source (GNU GPL v2) project and you are not interested in PRO features, you may use DHTMLX Chart Standard Edition for free.
It comes without official technical support, but you can use the community forum instead.

Need help with DHTMLX Chart integration into your app? Contact us