Wijmo
Chart
5.20231.904
wijmo.chart Class Axis Wijmo API Class

Axis Class

Represents an axis in the chart.

Heirarchy

Constructors

Properties

Methods

Events

Constructors

constructor

  • Initializes a new instance of the Axis class.

    Parameters

    • Optional position: Position

      The position of the axis on the chart.

    Returns Axis

Properties

actualMax

actualMax: any

Gets the actual axis maximum.

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

actualMin

actualMin: any

Gets the actual axis minimum.

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

axisLabels

axisLabels: string[]

Gets the array with actual axis labels.

axisLine

axisLine: boolean

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

The default value for this property is true.

axisType

axisType: AxisType

Gets the axis type.

binding

binding: string

Gets or sets the comma-separated property names for the Axis.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'.

format

format: string

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

groupsOptions

groupsOptions: IAxisGroupsOptions

Gets or sets label groups settings for the axis.

Label groups are created by modifying the ICollectionView.groupDescriptions property of the ICollectionView object used as an FlexChart.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 } },
  });

hostElement

hostElement: SVGGElement

Gets the axis host element.

itemFormatter

itemFormatter: Function

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;
}

itemsSource

itemsSource: any

Gets or sets the items source for the axis labels.

Names of the properties are specified by the Axis.binding property.

For example:

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

labelAlign

labelAlign: string

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.

labelAngle

labelAngle: number

Gets or sets the rotation angle of the axis labels.

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

labelMax

labelMax: boolean

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

The default value for this property is false.

labelMin

labelMin: boolean

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

The default value for this property is false.

labelPadding

labelPadding: number

Gets or sets the label padding, in pixels.

The default value for this property is 5 pixels.

labels

labels: boolean

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

The default value for this property is true.

logBase

logBase: number

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.

majorGrid

majorGrid: boolean

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

majorTickMarks

majorTickMarks: TickMark

Gets or sets the location of the axis tick marks.

majorUnit

majorUnit: number

Gets or sets the number of units between axis labels.

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

max

max: any

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.

min

min: any

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.

minorGrid

minorGrid: boolean

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

minorTickMarks

minorTickMarks: TickMark

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

minorUnit

minorUnit: number

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

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

name

name: string

Gets or sets the axis name.

origin

origin: number

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

overlappingLabels

overlappingLabels: OverlappingLabels

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

The default value for this property is OverlappingLabels.Auto.

plotArea

plotArea: PlotArea

Gets or sets the plot area for the axis.

position

position: Position

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

reversed

reversed: boolean

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.

title

title: string

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

Methods

convert

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

  • Converts the specified value from data to pixel coordinates.

    Parameters

    • val: number

      The data value to convert.

    • Optional maxValue: number

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

    • Optional minValue: number

      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

Events

rangeChanged

rangeChanged: Event<Axis, EventArgs>

Occurs when the axis range changes.