Search results

AxisModel API in Vue Chart API component

Interface for a class Axis

Properties

border

LabelBorderModel

Border of the multi level labels.

coefficient

number

The polar radar radius position.

columnIndex

number

Specifies the index of the column where the axis is associated, when the chart area is divided into multiple plot areas by using columns.

<div id='Chart'></div>
let chart: Chart = new Chart({
...
    columns: [{ width: '50%' },
              { width: '50%' }],
    axes: [{
               name: 'xAxis 1',
               columnIndex: 1,
    }],
...
});
chart.appendTo('#Chart');

crossesAt

Object

Specifies the value at which the axis line has to be intersect with the vertical axis or vice versa.

crossesInAxis

string

Specifies axis name with which the axis line has to be crossed.

crosshairTooltip

CrosshairTooltipModel

Options to customize the crosshair ToolTip.

description

string

Description for axis and its element.

desiredIntervals

number

With this property, you can request axis to calculate intervals approximately equal to your specified interval.

edgeLabelPlacement

EdgeLabelPlacement

Specifies the position of labels at the edge of the axis.They are,

  • None: No action will be performed.
  • Hide: Edge label will be hidden.
  • Shift: Shifts the edge labels.

enableAutoIntervalOnZooming

boolean

If set to true, axis interval will be calculated automatically with respect to the zoomed range.

enableScrollbarOnZooming

boolean

Enables the scrollbar for zooming.

enableTrim

boolean

If set to true, axis labels will be trimmed based on the maximumLabelWidth.

interval

number

Specifies the interval for an axis.

intervalType

IntervalType

Specifies the interval types for the date-time axis, including Auto, Years, Months, Days, Hours, and Minutes. These types define the interval of the axis as follows:

  • Auto: Defines the interval of the axis based on data.
  • Years: Defines the interval of the axis in years.
  • Months: Defines the interval of the axis in months.
  • Days: Defines the interval of the axis in days.
  • Hours: Defines the interval of the axis in hours.
  • Minutes: Defines the interval of the axis in minutes.

isIndexed

boolean

If set to true, data points are rendered based on the index.

isInversed

boolean

If set to true, the axis will be rendered in an inversed manner.

labelFormat

string

Used to format the axis label, which accepts any global string format like ‘C’, ‘n1’, ‘P’, etc. It also accepts placeholders like ‘{value}°C’ where ‘value’ represents the axis label (e.g., 20°C).

labelIntersectAction

LabelIntersectAction

Specifies the actions like None, Hide, Trim, Wrap, MultipleRows, Rotate45, and Rotate90 when the axis labels intersect with each other.They are,

  • None: Shows all the labels.
  • Hide: Hides the label when it intersects.
  • Trim: Trim the label when it intersects.
  • Wrap: Wrap the label when it intersects.
  • MultipleRows: Shows the label in MultipleRows when it intersects.
  • Rotate45: Rotates the label to 45 degree when it intersects.
  • Rotate90: Rotates the label to 90 degree when it intersects.

labelPadding

number

Specifies the padding for the axis labels from axis.

labelPlacement

LabelPlacement

Specifies the placement of a label for category axis. They are,

  • betweenTicks: Renders the label between the ticks.
  • onTicks: Renders the label on the ticks.

labelPosition

AxisPosition

Specifies the placement of a labels to the axis line. They are,

  • inside: Renders the labels inside to the axis line.
  • outside: Renders the labels outside to the axis line.

labelRotation

number

The angle to which the axis label gets rotated.

labelStyle

FontModel

Options to customize the axis label.

lineBreakAlignment

TextAlignment

It specifies alignment of the line break labels.

lineStyle

AxisLineModel

Options for customizing axis lines.

logBase

number

The base value for logarithmic axis. It requires valueType to be Logarithmic.

majorGridLines

MajorGridLinesModel

Options for customizing major grid lines.

majorTickLines

MajorTickLinesModel

Options for customizing major tick lines.

maximum

Object

Specifies the maximum range of an axis.

maximumLabelWidth

number

Specifies the maximum width of an axis label.

maximumLabels

number

The maximum number of label count per 100 pixels with respect to the axis length.

minimum

Object

Specifies the minimum range of an axis.

minorGridLines

MinorGridLinesModel

Options for customizing minor grid lines.

minorTickLines

MinorTickLinesModel

Options for customizing minor tick lines.

minorTicksPerInterval

number

Specifies the number of minor ticks per interval.

multiLevelLabels

MultiLevelLabelsModel[]

Specifies the multi level labels collection for the axis.

name

string

A unique identifier for an axis. To associate an axis with a series, set this name to the xAxisName/yAxisName properties of the series.

opposedPosition

boolean

If set to true, the axis will render at the opposite side of its default position.

placeNextToAxisLine

boolean

Specifies whether axis elements like axis labels, axis title, etc has to be crossed with axis line.

plotOffset

number

Left and right padding for the plot area in pixels.

plotOffsetBottom

number

Bottom padding for the plot area in pixels.

plotOffsetLeft

number

Left padding for the plot area in pixels.

plotOffsetRight

number

Right padding for the plot area in pixels.

plotOffsetTop

number

Top padding for the plot area in pixels.

rangePadding

ChartRangePadding

Specifies the padding for the axis range in terms of interval. Available options are:

  • none: Padding cannot be applied to the axis.
  • normal: Padding is applied to the axis based on the range calculation.
  • additional: Interval of the axis is added as padding to the minimum and maximum values of the range.
  • round: Axis range is rounded to the nearest possible value divided by the interval.

rowIndex

number

Specifies the index of the row where the axis is associated, when the chart area is divided into multiple plot areas by using rows.

<div id='Chart'></div>
let chart: Chart = new Chart({
...
    rows: [{ height: '50%' },
           { height: '50%' }],
    axes: [{
               name: 'yAxis 1',
               rowIndex: 1,
     }],
...
});
chart.appendTo('#Chart');

scrollbarSettings

ScrollbarSettingsModel

Option to customize scrollbar with lazy loading.

skeleton

string

Specifies the skeleton format in which the dateTime will be processed.

skeletonType

SkeletonType

Specifies the format type to be used in dateTime formatting.

span

number

Specifies the number of columns or rows an axis has to span horizontally or vertically.

startAngle

number

The start angle for the series.

startFromZero

boolean

It specifies whether the axis to be start from zero.

stripLines

StripLineSettingsModel[]

Specifies the stripLine collection for the axis.

tabIndex

number

TabIndex value for the axis.

tickPosition

AxisPosition

Specifies the placement of a ticks to the axis line. They are,

  • inside: Renders the ticks inside to the axis line.
  • outside: Renders the ticks outside to the axis line.

title

string

Specifies the title of an axis.

titlePadding

number

Specifies the titlePadding from axis label.

titleRotation

number

Defines an angle to rotate axis title. By default, angle auto calculated based on position and orientation of axis.

titleStyle

FontModel

Options for customizing the axis title.

valueType

ValueType

Specifies the data types that the axis can handle. Available options include:

  • Double: Used for rendering a numeric axis to accommodate numeric data.
  • DateTime: Utilized for rendering a date-time axis to manage date-time data.
  • Category: Employed for rendering a category axis to manage categorical data.
  • Logarithmic: Applied for rendering a logarithmic axis to handle a wide range of values.
  • DateTimeCategory: Used to render a date time category axis for managing business days.

visible

boolean

If set to true, axis labels will be visible in the chart. By default, axis labels are enabled.

zoomFactor

number

The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Value ranges from 0 to 1.

zoomPosition

number

Position of the zoomed axis. Value ranges from 0 to 1.