React Axis Options
In all Ignite UI for React charts, the axes provide properties for visual configurations such as titles, labels, and ranges. These features are demonstrated in the examples provided below.
Axis Titles Example
The axis titles feature of the React charts, allows you to add contextual information to the your chart. You can customize the look and feel of the axis titles in many different ways such as applying different font styles, colors, margins, and alignments.
Axis Labels Example
The React Charts allows you full control over configuring, formatting, and styling the font of the labels displayed on an axis in your chart. You can change the rotation angle, margin, horizontal and vertical alignment, color, padding, and visibility of axis labels. The following example shows how to use these features of axes.
Axis Labels Management
The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis.
This enhanced calculation is something that you need to opt-in to, which you can do by setting the
useEnhancedIntervalManagement property to true. Then, if you prefer to display as many labels as can fit in the dimensions of the axis without manually setting the
interval property of the axis, you can set the
enhancedIntervalPreferMoreCategoryLabels property on the axis to true.
The chart also has the ability to consider auto-rotation of the labels if they will not fit in the allotted space as well as the ability to apply an automatic margin to the plot area to ensure the labels can fit. This is something that can be opted into initially by first setting the
autoMarginAndAngleUpdateMode property on the chart to either
SizeChangingAndZoom. This will tell the chart when to re-evaluate the auto margin and angle applied to the labels, if desired.
After setting the
autoMarginAndAngleUpdateMode, you can set the
shouldAutoExpandMarginForInitialLabels property to true to opt into the automatic margin or set the
shouldConsiderAutoRotationForInitialLabels property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the
autoExpandMarginMaximumValue to provide extra space or a maximum possible margin, respectively.
Axis Range Example
In the React charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the
By default, charts will calculate the minimum and maximum values for the numeric and time axis range based on the lowest and highest corresponding value points in your data, but this automatic calculation may not be appropriate for your set of data points in all cases. For example, if your data has a minimum value of 850, you may want to set the
yAxisMinimumValue to 800 so that there will be a space value of 50 between the axis minimum and the lowest value of data points. The same idea can be applied to the axis minimum value and the highest value of data points using the
Axis Modes & Scale
IgrCategoryChart controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the
yAxisIsLogarithmic property is set to true or on linear scale when this property is set to false (default value). With the
yAxisLogarithmBase property, you can change base of logarithmic scale from default value of 10 to other integer value.
IgrFinancialChart and control allows you to choose how your data is represented along the y-axis using
yAxisMode property that provides
PercentChange modes. The
Numeric mode will plot data with the exact values while the
PercentChange mode will display the data as percentage change relative to the first data point provided. The default value is
In addition to
yAxisMode property, the
IgrFinancialChart control has
xAxisMode property that provides
Ordinal modes for the x-axis. The
Time mode will render space along the x-axis for gaps in data (e.g. no stock trading on weekends or holidays). The
Ordinal mode will collapse date areas where data does not exist. The default value is
Axis Gap Example
xAxisGap property of the React charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap.
xAxisMinimumGapSize property of the React charts, determines the minimum amount of pixels to use for the gap between the categories, if possible.
The following example shows the average maximum temperature in Celsius in New York City's Central Park represented by a Column Chart with an
xAxisGap initially set to 1, and so there will be a full category's width between the columns. There is a slider that allows you to configure the gap in this example so that you can see what the different values do.
Axis Overlap Example
xAxisOverlap property of the React charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
The following example shows a comparison of the highest grossing worldwide film franchises compared by the total world box office revenue of the franchise and the highest grossing movie in the series, represented by a Column Chart with an
xAxisOverlap initially set to 1, and so the columns will completely overlap each other. There is a slider that allows you to configure the overlap in this example so that you can see what the different values do.
You can find more information about related chart features in these topics:
The following is a list of API members mentioned in the above sections: