Version 24.2 (latest)

Configuring Axis Titles

Purpose

This topic provides information on configuring the x-axis and y-axis titles in the igFinancialChart control.

In this topic

This topic contains the following sections:

Property Settings

You can customize the look and feel of the igFinancialChart control’s x-axis and y-axis titles in many different ways, such as applying different font styles, margins, and alignment. This can be achieved by utilizing the following properties:

Property Name Property Type Description

string

Determines the text to be used for the x-axis and y-axis title.

enumeration

Determines the horizontal alignment of the x-axis title and the vertical alignment of the y-axis title.

number

Determines the angle rotation for the x-axis and y-axis titles.

number

Determines the margin to be applied to the x-axis or y-axis title.

number

Determines the left margin to be applied to the x-axis or y-axis title.

number

Determines the top margin to be applied to the x-axis or y-axis title.

number

Determines the right margin to be applied to the x-axis or y-axis title.

number

Determines the bottom margin to be applied to the x-axis or y-axis title.

string

Determines the font family applied to the x-axis or y-axis title.

string

Determines the color of the text for the x-axis or y-axis title.

Code Snippet

The following code examples show how to customize the titles on the x-axis and y-axis in the igFinancialChart control.

In JavaScript:

$(".selector").igFinancialChart({
    dataSource: data,
    xAxisTitleMargin: 10,
    xAxisTitle: "Historical Date",
    xAxisTitleTextStyle: "12pt Arial",
    yAxisTitleTextStyle: "14pt Arial",
    yAxisTitle: "Share Price",
    yAxisTitleAngle: 90,
    yAxisTitleTextColor: "Green"
});

The above code will result in a igFinancialChart that looks like the following:

financialchart jquery axis titles.png
Topic Description

This topic provides conceptual information about the igFinancialChart control including its main features, minimum requirements, and user functionality.

This topic explains how to bind data to the igFinancialChart control.

View on GitHub