Syncfusion Feedback


Overview

React Charts plots all types of data in a graph by supporting different axis types: numeric, category, date-time, and logarithmic. Their axis elements can be customized to enhance readability.


Chart axis types

Numeric axis

A numeric axis represents numeric data on the x-axis and y-axis of the chart.

Numeric axis documentation

Date-time axis

A date-time axis displays a sequence of date-time values as axis labels, plotting date-time data in charts.

Date-time axis documentation

Category axis

A category axis represents non-numeric data in charts and displays text labels instead of numbers.

Category axis documentation

Logarithmic axis

A logarithmic scale is used in chart axes when visualizing data with both lower and higher orders of magnitude.

Logarithmic axis documentation


Multiple axes

Plot many types of data series against multiple axes on the same chart to represent data series with different units or scales.

Multiple axis documentation


Inverse axis

Axis labels and ticks in React Charts can be inverted. This swaps the higher and lower ranges of a chart’s axis.

Inversed chart axis documentation


Opposed axis

When a chart has multiple axes, this feature smartly rearranges them by moving them to positions opposite their defaults.

Opposed axis documentation


Synchronized charts

Multiple charts can work together, so the actions on one chart are mirrored on the others.

Synchronized chart documentation


Smart chart axis label

The control automatically handles overlapping chart axis labels by trimming, wrapping, rotating, or hiding them. You can also place them on multiple rows to ensure readability and prevent clutter.

Smart axis label documentation


Axis label rotation

Use rotation to prevent chart axis labels from overlapping. Improve readability when the space for an axis is small.

Axis label rotation documentation


Axis label positioning

Increase the space for rendering data points by positioning the chart axis labels inside or outside the plot area.

Axis label position documentation


Striplines

Striplines are horizontal or vertical bands in charts that visually highlight specific regions or intervals to emphasize important data points or ranges. They are commonly used to indicate target ranges or thresholds or to separate different sections of a chart visually.

Horizontal striplines

A horizontal stripline is a visual element used in charts to highlight or mark a specific range or threshold along the vertical axis.

Horizontal stripline documentation

Vertical striplines

A vertical stripline is a visual element used in charts to highlight or mark a specific range or threshold along the horizontal axis.

Vertical stripline documentation

Recurring striplines

Apply striplines repeatedly in equal and regular intervals.

Recurring stripline documentation

Segment striplines

Apply a stripline to a specific segment of the chart rather than the entire length of the axis.


Pure React Components

Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.

Scroll up icon