Web Components Axis Options
In the Ignite UI for Web Components category chart component, an Axis provides base properties for specifying appearance of axis main lines, tickmarks, titles, and axis labels.
By default, you do not need to explicitly set the labels. The category chart component will use the first appropriate string property that it finds within the data you provided and will explicitly set which property to use for the labels.
The Ignite UI for Web Components category chart component allows you full control over configuring, formatting and styling the font of the labels displayed on your chart. You can change the rotation angle, margin, horizontal/vertical alignment, opacity, padding and visibility.
The following code example shows how to style labels on the x-axis using style properties:
<igc-category-chart id="chart" width="700px" height="500px" x-axis-label-text-style="10pt Verdana" x-axis-label-top-margin="5" x-axis-label-text-color="gray" y-axis-label-text-style="10pt Verdana" y-axis-label-right-margin="5" y-axis-label-text-color="gray"> </igc-category-chart>
The axis title feature of the Ignite UI for Web Components category chart allows you to add contextual information to the x and y axes of the chart. You can customize the look and feel of the category chart's x-axis and y-axis titles in many different ways such as applying different font styles, margins, and alignment.
The following code example shows how to set and customize the titles on the x-axis and y-axis:
<igc-category-chart id="chart" width="700px" height="500px" x-axis-title="Countries" x-axis-title-text-color="gray" x-axis-title-text-style="12pt Verdana" x-axis-title-angle="0" y-axis-title="Trillions of Watt-hours (TWh)" y-axis-title-text-style="12pt Verdana" y-axis-title-text-color="gray" y-axis-title-angle="90" y-axis-title-left-margin="5"> </igc-category-chart>
Tick marks display points on the axes. They represent a certain numeric point on a scale or the value of the category in a category axis. You can change the length, thickness and color of the x-axis and y-axis labels.
The following code snippet demonstrates how to set the color, length and thickness of the tickmark on the x-axis.
<igc-category-chart id="chart" width="700px" height="500px" x-axis-tick-length=15 x-axis-tick-stroke-Thickness="2" x-axis-tick-stroke="gray" y-axis-tick-length="0"> </igc-category-chart>
In the category chart component, the range on numeric axes is the difference in numeric values from the beginning of the axis to the end or from the smallest to largest values in the data. The range minimum is the lowest value of the axis. The range maximum is the highest value of the axis. By default, the category chart component will calculate the minimum and maximum values for the y-axis range based on the lowest and highest data points in order to maximize the chart plot area. The automatic calculation of an axis' minimum and maximum values may not be appropriate for your set of data points. For example, if your data has a minimum value of 850, you may want to set the minimum value of the axis using y-axis’s
yAxisMinimumValue property 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 can be applied to the axis maximum value and the highest value of data points using y-axis’s
The following sample code demonstrates how to change the axis range on the y-axis.
<igc-category-chart id="chart" width="700px" height="500px" y-axis-minimum-value="0" y-axis-maximum-value="1000"> </igc-category-chart>
In the category chart component, the
yAxisInterval property specifies how frequently major gridlines and axis labels are rendered on an axis. Similarly, the
yAxisMinorInterval property specifies how frequently minor gridlines are rendered on an axis.
The following code snippet demonstrates how to configure the interval on the y-axis.
<igc-category-chart id="chart" width="700px" height="500px" y-axis-interval="100" y-axis-major-stroke="black" y-axis-major-stroke-thickness="1" y-axis-minor-interval="20" y-axis-minor-stroke="gray" y-axis-minor-stroke-thickness="0.5"> </igc-category-chart>
The Axis Gap feature of the category chart allows setting the gap between series of the chart.
The property accepts a numeric float value between 0 and 1. The value represents a relative width of the gap out of the available number of pixels between series. 0 - no gap is rendered between series; 1 - maximum available gap is rendered between series.
To set the category chart with
xAxisGap of 0.125 the following code can be used:
<igc-category-chart id="chart" width="700px" height="500px" x-axis-gap="0.125"> </igc-category-chart>
The Axis Overlap feature of the category chart component allows setting overlap of rendered categories.
The property accepts a numeric float value between -1 and 1. The value represents a relative overlap out of the available number of pixels dedicated to each series.
- Negative value (up to -1): the categories are pushed away from each other producing a gap between themselves.
- Positive value (up to 1): the categories are overlapping each other. Value of 1 directs the chart to render categories on top of each other.
The following code example sets the
xAxisOverlap to 0.
<igc-category-chart id="chart" width="700px" height="500px" x-axis-overlap=0> </igc-category-chart>