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.

Demo

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.

Axis Labels

The 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> 

Axis Titles

The axis title feature of the 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> 

Axis Tickmarks

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> 

Axis Range

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 YAxisMaximumValue property.

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> 

Axis Interval

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> 

Axis Gap

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> 

Axis Overlap

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>