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.
Date-time axis
A date-time axis displays a sequence of date-time values as axis labels, plotting date-time data in charts.
Category axis
A category axis represents non-numeric data in charts and displays text labels instead of numbers.
Logarithmic axis
A logarithmic scale is used in chart axes when visualizing data with both lower and higher orders of magnitude.
Multiple axes
Plot many types of data series against multiple axes on the same chart to represent data series with different units or scales.
Inverse axis
Axis labels and ticks in React Charts can be inverted. This swaps the higher and lower ranges of a chart’s axis.
Opposed axis
When a chart has multiple axes, this feature smartly rearranges them by moving them to positions opposite their defaults.
Synchronized charts
Multiple charts can work together, so the actions on one chart are mirrored on the others.
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.
Axis label rotation
Use rotation to prevent chart axis labels from overlapping. Improve readability when the space for an axis is small.
Axis label positioning
Increase the space for rendering data points by positioning the chart axis labels inside or outside the plot area.
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.
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.
Recurring striplines
Apply striplines repeatedly in equal and regular intervals.
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.