Axis customization in TypeScript Chart control

18 Nov 20181 minute to read

Axis Crossing

An axis can be positioned dynamically within the chart area using the crossesAt and crossesInAxis properties. The crossesAt property specifies the value (date-time, numeric, or logarithmic) at which the axis line intersects another axis, while the crossesInAxis property defines the name of the axis with which the current axis should intersect. This customization is useful for emphasizing specific reference points or thresholds in the chart.

Title

A title can be added to an axis using the title property. Axis titles provide context and help users quickly understand the data represented along the axis.

Title Rotation

The orientation of the axis title can be adjusted using the titleRotation property. This property supports rotation values from 0 to 360 degrees, allowing better alignment based on the chart layout and available space.

Tick Lines Customization

The appearance of both major and minor tick lines can be customized using the majorTickLines and minorTickLines properties. These properties allow customization of the width, color, and size of tick lines to enhance chart readability.

Grid Lines Customization

Grid lines can be styled using the majorGridLines and minorGridLines properties. These options support customization of width, color, and dashArray, helping users distinguish data points and scales more effectively.

Multiple Axis

In addition to the primary X and Y axes, multiple additional axes can be added to a chart. Each series can be associated with a specific axis by mapping it to the axis using a unique axis name. This is useful for visualizing datasets with different units or scales within the same chart.

Inversed Axis

When an axis is inversed, the highest value is displayed closer to the origin, and the lowest value appears farther away. This behavior can be enabled by setting the isInversed property to true. Inversed axes are commonly used in scenarios such as ranking or inverted value representations.

Opposed Position

An axis can be placed on the opposite side of its default position by setting the opposedPosition property to true. This option is useful when displaying multiple axes or when optimizing space usage in complex chart layouts.