Overview

Smart.Chart for React is Smart.Chart is a lightweight and powerful chart component. It offers many advanced features and supports two different rendering technologies - SVG and HTML5 Canvas - and over 30 chart types. You can use our React Chart to add interactive charts to your website, build custom dashboards, or use it in your mobile applications. Smart.Chart offers excellent cross-browser compatibility and works well with both desktop and mobile browsers. Learn about all Chart features here. To get started with the React Chart, see React Chart Docs

Data Binding

Bind data easily with various local and remote data sources, such as Array, CSV, TSV, JSON, XML. You can export the Chart to an Image and you can also Print the Chart.

Axis Settings

Chart axis are fully configurable. You can change the position of the X axis and the Y axis. Flipping the positions is also optional. It is possible to rotate the labels as well. See here

Mobile optimized

The React Chart is responsive and has a device-optimized look and behavior on PCs, tablets and mobile phones.

Appearance & Styles

The React Charts come with over 25 predefined color schemes. You can also modify the appearance to better suit your application's needs by using the Chart API. The chart colors, labels, tick marks can be styled. You can choose a custom background for the chart as well.

SVG & Canvas Rendering

React Chart supports Vector-based rendering which is perfect for responsive web development and scaling. Optionally you can choose the HTML5 Canvas rendering option as well.

Chart Types

Our React Chart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently the chart supports the following series:

• column - a column chart is used to display series of grouped data with rectangular columns the size of which is proportional to the displayed data. The columns can be vertical or horizontal.
• stackedcolumn - stacked column chart
• stackedcolumn100 - percentage stacked columns
• line - a line chart is a type of chart used to connect a series of data points by straight line segments. It is one of the most widely used types of chart to represent trends over time.
• pie - a pie chart is used to display the data in a series as a circle divided into slices where the area of each slice is proportional to the values of the series.
• donut - a donut chart is a variation of the pie chart where the data is represented as a ring. JQWidgets JQuery donut chart supports different colors for each slice, animation and formatting of the labels.
• bar - a bar chart is a variation of the column chart where the colums are horizontal.
• candlestick - a candlestick chart is used in finance and is a way to represent open, high, low and close volumes per period.
• ohlc - an ohlc chart (Open High Low Close) is a type of chart used in finance to display the movements of price over time.
• bubble - a bubble chart is used to represent data with three dimensions where two of the values are plotted through the x and y location and the third through the size.
• scatter - a scatter chart is used to display values for two variables of a series through their coordinates. The values are represented as a collection of points.
• stackedline - stacked line chart
• stackedline100 - percentage stacked line chart
• spline - a spline chart is a varition of the line chart with smooth lines connecting the value points.
• stackedspline - stacked spline chart
• stackedspline100 - percentage stacked spline chart
• polar - a polar chart is used to represent data consisting of multiple variables on a two dimensional circular area using two or more shapes.
• spider - a spider chart is a varation of the polar chart. The difference is that the data is represented on a two dimensional spider web.
• area - an area chart is used to connect the value points with streight lines
• stacked area- a stacked area chart with streight lines between the points
• area spline - a smooth area chart connecting the value points
• waterfall - a waterfall chart is used to display the cumulative effect of sequential data.

Column Series

React Stacked Column Series

React Percentage Stacked Column Series

React Chart Line Series

React Chart Stacked Line Series

React Chart Percentage Stacked Line Series

Spline Chart

Area React Chart

Stacked Area React Chart

Area Spline React Chart

Multiple React Chart Series

React Chart with Negative Values

3d Charts coming soon

React 3d Chart is coming in Q4 2022 with Column, StackedColumn, Pie, Donut, Bar, Line and Area Chart types.