ASP.NET Core MVC Controls | ComponentOne
In This Topic
    Axis Class
    In This Topic
    File
    wijmo.chart.js
    Module
    wijmo.chart
    Derived Classes
    FlexRadarAxis

    Represents an axis in the chart.

    Constructor

    Properties

    Methods

    Events

    Constructor

    constructor

    constructor(position?: Position): Axis
    

    Initializes a new instance of the Axis class.

    Parameters
    Optional

    The position of the axis on the chart.

    Returns
    Axis

    Properties

    actualMax

    Gets the actual axis maximum.

    It returns a number or a Date object (for time-based data).

    Type
    any

    actualMin

    Gets the actual axis minimum.

    It returns a number or a Date object (for time-based data).

    Type
    any

    axisLabels

    Gets the array with actual axis labels.

    Type
    string[]

    axisLine

    Gets or sets a value indicating whether the axis line is visible.

    The default value for this property is true.

    Type
    boolean

    axisType

    Gets the axis type.

    Type
    AxisType

    binding

    Gets or sets the comma-separated property names for the itemsSource property to use in axis labels.

    The first name specifies the value on the axis, the second represents the corresponding axis label. The default value is 'value,text'.

    Type
    string

    format

    Gets or sets the format string used for the axis labels (see Globalize).

    Type
    string

    groupsOptions

    Gets or sets label groups settings for the axis.

    Label groups are created by modifying the groupDescriptions property of the ICollectionView object used as an itemsSource.

    The default value is **null** and the axis label groups are not displayed.

    To display groups you should create groups in collection view and specify the groupsOptions for the axis.

    For example,

     let view = new CollectionView( getData(), {
        groupDescriptions: [ 
          new PropertyGroupDescription('category'), 
          new PropertyGroupDescription('subCategory')]
        });
     const chart = new FlexChart('#theChart', {
        itemsSource: view,
        bindingX: 'product',
           series: [ { binding:'sales' } ],
           axisX: { groupsOptions: { display : AxisGroupsDisplay.Show } },
      });
    

    Type
    IAxisGroupsOptions

    hostElement

    Gets the axis host element.

    Type
    SVGGElement

    itemFormatter

    Gets or sets the itemFormatter function for the axis labels.

    If specified, the function takes two parameters:

    • render engine: The IRenderEngine object to be used in formatting the labels.
    • current label: An object with the following properties:
      • value: The value of the axis label to format.
      • text: The text to use in the label.
      • pos: The position in control coordinates at which the label is to be rendered.
      • cls: The CSS class to be applied to the label.

    The function returns the label parameters of labels for which properties are modified.

    For example:

    chart.axisY.itemFormatter = function(engine, label) {
        if (label.val > 5){
            engine.textFill = 'red'; // red text
            label.cls = null; // no default CSS
         }
        return label;
    }
    
    Type
    Function

    itemsSource

    Gets or sets the items source for the axis labels.

    Names of the properties are specified by the binding property.

    For example:

    // default value for Axis.binding is 'value,text'
     chart.axisX.itemsSource = [ { value:1, text:'one' }, { value:2, text:'two' } ];
    
    Type
    any

    labelAlign

    Gets or sets the label alignment.

    By default the labels are centered. The supported values are 'left' and 'right for the X-axis, 'top' and 'bottom' for the Y-axis.

    Type
    string

    labelAngle

    Gets or sets the rotation angle of the axis labels.

    The angle is measured in degrees with valid values ranging from -90 to 90.

    Type
    number

    labelMax

    Gets or sets a value that determines whether the maximum axis value should be always labeled.

    The default value for this property is **false**.

    Type
    boolean

    labelMin

    Gets or sets a value that determines whether the minimum axis value should be always labeled.

    The default value for this property is **false**.

    Type
    boolean

    labelPadding

    Gets or sets the label padding, in pixels.

    The default value for this property is 5 pixels.

    Type
    number

    labels

    Gets or sets a value indicating whether the axis labels are visible.

    The default value for this property is true.

    Type
    boolean

    logBase

    Gets or sets the logarithmic base of the axis.

    If the base is not specified the axis uses a linear scale.

    Use the logBase property to spread data that is clustered around the origin. This is common in several financial and economic data sets.

    Type
    number

    majorGrid

    Gets or sets a value indicating whether the axis includes grid lines.

    Type
    boolean

    majorTickMarks

    Gets or sets the location of the axis tick marks.

    Type
    TickMark

    majorUnit

    Gets or sets the number of units between axis labels.

    If the axis contains date values, then the units are expressed in days.

    Type
    number

    max

    Gets or sets the maximum value shown on the axis.

    The value can be a number or a Date object (for time-based data).

    The default value for this property is null, which causes the chart to calculate the maximum value based on the data.

    Type
    any

    min

    Gets or sets the minimum value shown on the axis.

    The value can be a number or a Date object (for time-based data).

    The default value for this property is null, which causes the chart to calculate the minimum value based on the data.

    Type
    any

    minorGrid

    Gets or sets a value indicating whether the axis includes minor grid lines.

    Type
    boolean

    minorTickMarks

    Gets or sets the location of the minor axis tick marks.

    Type
    TickMark

    minorUnit

    Gets or sets the number of units between minor axis ticks.

    If the axis contains date values, then the units are expressed in days.

    Type
    number

    name

    Gets or sets the axis name.

    Type
    string

    origin

    Gets or sets the value at which an axis crosses the perpendicular axis.

    Type
    number

    overlappingLabels

    Gets or sets a value indicating how to handle overlapping axis labels.

    The default value for this property is OverlappingLabels.Auto.

    Type
    OverlappingLabels

    plotArea

    Gets or sets the plot area for the axis.

    Type
    PlotArea

    position

    Gets or sets the position of the axis with respect to the plot area.

    Type
    Position

    reversed

    Gets or sets a value indicating whether the axis is reversed (top to bottom or right to left).

    The default value for this property is false.

    Type
    boolean

    title

    Gets or sets the title text shown next to the axis.

    Type
    string

    Methods

    convert

    convert(val: number, maxValue?: number, minValue?: number): number
    

    Converts the specified value from data to pixel coordinates.

    Parameters
    Optional

    The max value of the data, it's optional.

    The min value of the data, it's optional.

    Returns
    number

    convertBack

    convertBack(val: number): number
    

    Converts the specified value from pixel to data coordinates.

    Parameters
    • val: number

      The pixel coordinates to convert back.

    Returns
    number

    onRangeChanged

    onRangeChanged(e?: EventArgs): void
    

    Raises the rangeChanged event.

    Parameters
    Returns
    void

    Events

    rangeChanged

    Occurs when the axis range changes.

    Arguments
    EventArgs