Interops
Angular2
Chart
5.20231.904
wijmo.angular2.chart Class WjFlexChartAxis Wijmo API Class

WjFlexChartAxis Class

Angular 2 component for the wijmo.chart.Axis class.

The wj-flex-chart-axis component must be contained in one of the following components: wijmo.angular2.chart.WjFlexChart , wijmo.angular2.chart.WjFlexChartSeries , wijmo.angular2.chart.finance.WjFinancialChart or wijmo.angular2.chart.finance.WjFinancialChartSeries.

Use the wj-flex-chart-axis component to add Axis controls to your Angular 2 applications. For details about Angular 2 markup syntax, see Angular 2 Markup.

The WjFlexChartAxis component is derived from the Axis class and inherits all its properties, events and methods.

Heirarchy

  • Axis
    • WjFlexChartAxis

Properties

Methods

Events

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.

initialized

initialized: EventEmitter<any>

This event is triggered after the component has been initialized by Angular, that is all bound properties have been assigned and child components (if any) have been initialized.

isInitialized

isInitialized: boolean

Indicates whether the component has been initialized by Angular. Changes its value from false to true right before triggering the initialized event.

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.

rangeChangedNg

rangeChangedNg: EventEmitter<any>

Angular (EventEmitter) version of the Wijmo rangeChanged event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional rangeChanged Wijmo event name.

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.

wjProperty

wjProperty: string

Gets or sets a name of a property that this component is assigned to. Default value is 'axes'.

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

created

  • created(): void

  • If you create a custom component inherited from a Wijmo component, you can override this method and perform necessary initializations that you usually do in a class constructor. This method is called in the last line of a Wijmo component constructor and allows you to not declare your custom component's constructor at all, thus preventing you from a necessity to maintain constructor parameters and keep them in synch with Wijmo component's constructor parameters.

    Returns void

onRangeChanged

Events

rangeChanged

rangeChanged: Event<Axis, EventArgs>

Occurs when the axis range changes.