Configuring Axis Labels (igShapeChart)

The igShapeChart control allows you full control over configuring, formatting and styling the labels displayed on your chart. By default, you do not need to explicitly set the labels. The Shape Chart will use the first appropriate string property that it finds within the data you provided and will use that for the labels.

In this topic

This topic contains the following sections:

• Label Settings
• Styling
• Related Content
• Samples

Label Settings

In the igShapeChart control, you can change the rotation angle, margin, horizontal/vertical alignment, opacity, padding and visibility, of the x-axis and y-axis labels using the following properties:

Styling

The look and feel of the shape chart’s x-axis and y-axis labels can be styled in many aspects, the main of which are applying different font styles such as font type, font size and font weight to the labels. This can be achieved through the following properties:

Code Snippet

The following code example shows how to style labels on the x-axis using style properties:

In HTML:

$(function () {
            $("#chart").igShapeChart({
                dataSource: data,
                xAxisLabelTextStyle: "16pt Verdana",
                xAxisLabelRightMargin: "14",
                xAxisLabelTextColor: "red"
            });
        });

The following screenshot demonstrates the igShapeChart control with the x-axis label styled.

Related Topics:

• Getting Started with ShapeChart

• Binding to Shapefile Data

Samples

The following sample provides additional information related to this topic.

• Configuring Axis Labels: This sample demonstrates how to configure the axis labels for the igShapeChart control.