Web Components Axis Options

    In all Ignite UI for Web Components 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 Web Components 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.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Axis Labels Example

    The Web Components 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.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    Axis Labels Management & Formatting

    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 SizeChanging or 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 autoExpandMarginExtraPadding and autoExpandMarginMaximumValue to provide extra space or a maximum possible margin, respectively.

    Custom label formats such as IgcNumberFormatSpecifier and IgcDateTimeFormatSpecifier can be added to each axis via the XAxisLabelFormatSpecifier and YAxisLabelFormatSpecifier collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the yAxisLabelFormat or xAxisLabelFormat need to be set to data item's property name on the IgcCategoryChartComponent, eg. {Date}. For the IgcFinancialChartComponent the number is the context because it uses a numeric axis, therefore this needs to be set to {0}.

    The following example formats the yAxis with a IgcNumberFormatSpecifier to reprerent $USD prices for top box office movies in the United States.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Axis Range Example

    In the Web Components 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 yAxisMinimumValue and yAxisMaximumValue options.

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Axis Modes & Scale

    In the IgcFinancialChartComponent and IgcCategoryChartComponent 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.

    The IgcFinancialChartComponent and control allows you to choose how your data is represented along the y-axis using yAxisMode property that provides Numeric and 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 Numeric mode.

    In addition to yAxisMode property, the IgcFinancialChartComponent control has xAxisMode property that provides Time and 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 Ordinal mode.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Axis Gap Example

    The xAxisGap property of the Web Components 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.

    The xAxisMaximumGap property of the Web Components charts, determines the maximum gap value to allow. This default is set to 1.0 but can be changed depending on what you set xAxisGap to.

    The xAxisMinimumGapSize property of the Web Components 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.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Axis Overlap Example

    The xAxisOverlap property of the Web Components 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.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Additional Resources

    You can find more information about related chart features in these topics:

    API References

    The following is a list of API members mentioned in the above sections:

    IgcDataChartComponent IgcFinancialChartComponent IgcCategoryChartComponent
    Axes ➔ IgcNumericYAxisComponent ➔ maximumValue yAxisMaximumValue yAxisMaximumValue
    Axes ➔ IgcNumericYAxisComponent ➔ minimumValue yAxisMinimumValue yAxisMinimumValue
    Axes ➔ IgcNumericYAxisComponent ➔ isLogarithmic yAxisIsLogarithmic yAxisIsLogarithmic
    Axes ➔ IgcNumericYAxisComponent ➔ logarithmBase yAxisLogarithmBase yAxisLogarithmBase
    Axes ➔ IgcCategoryXAxisComponent ➔ gap None xAxisGap
    Axes ➔ IgcCategoryXAxisComponent ➔ overlap None xAxisOverlap
    Axes ➔ IgcTimeXAxisComponent xAxisMode None
    Axes ➔ IgcPercentChangeYAxisComponent yAxisMode None
    Axes ➔ IgcNumericYAxisComponent ➔ labelSettings.angle yAxisLabelAngle yAxisLabelAngle
    Axes ➔ IgcNumericXAxisComponent ➔ labelSettings.angle xAxisLabelAngle xAxisLabelAngle
    Axes ➔ IgcNumericYAxisComponent ➔ labelSettings.textColor YAxisLabelForeground YAxisLabelForeground
    Axes ➔ IgcNumericXAxisComponent ➔ labelSettings.textColor XAxisLabelForeground XAxisLabelForeground
    Axes ➔ IgcNumericYAxisComponent ➔ labelSettings.visibility yAxisLabelVisibility yAxisLabelVisibility
    Axes ➔ IgcNumericXAxisComponent ➔ labelSettings.visibility xAxisLabelVisibility xAxisLabelVisibility