Version

Configuring the Chart Title and Subtitle (igDataChart)

Topic Overview

Purpose

This topic provides information on using the chart title and subtitle feature of the igDataChart™ control.

Required background

The following topic is a prerequisite to understanding this topic:

  • Adding igDataChart: This topic demonstrates how to add the igDataChart™ control to a page and bind it to data.

In this topic

This topic contains the following sections:

Introduction

Title and subtitle summary

The title and subtitle feature of the igDataChart control allows you to add information to the top section of the chart control. The following screenshot demonstrates a title and subtitle added with their default settings:

When adding a title, a subtitle or both to the chart control, the content of the chart automatically resizes allowing for the title and subtitle information.

The title and subtitle are added by setting the respective optional properties (title and subtitle) of the igDataChart control to strings representing the title/subtitle.

Configuring the Title/Subtitle

The title and subtitle of the igDatachart control is highly configurable. The title and subtitle’s font, font size, color and alignment can be styled.

Property settings

The following table maps the desired configuration to the property settings that manage it.

In order to: Use this property: And set it to:
Set the subtitle’s bottom margin. subtitleBottomMargin integer
Set the subtitle’s horizontal alignment. subtitleHorizontalAlignment string
Set the subtitle’s left margin subtitleLeftMargin integer
Set the subtitle’s right margin subtitleRightMargin integer
Set the subtitle’s text color subtitleTextColor string
Set the subtitle’s font style and text size subtitleTextStyle string
Set the subtitle’s left margin subtitleTopMargin integer
Set the title’s bottom margin titleBottomMargin integer
Set the title’s horizontal alignment titleHorizontalAlignment string
Set the title’s left margin titleLeftMargin integer
Set the title’s right margin titleRightMargin integer
Set the title’s text color titleTextColor string
Set the title’s font style and text size titleTextStyle string
Set the title’s left margin titleTopMargin integer

Example

Following are a chart title settings' table and an example that implements this configuration:

Property Value
title “Energy Production Per Country”
titleTextColor “#2e9ca6”
titleTextStyle “20pt Arial
subtitle “The top five Total Primary Energy producers”
subtitleTextColor “#2e9ca6”
subtitleTextStyle “14pt Arial
Chart Title and Subtitle

Related Content

Topics

The following topic provides additional information related to this topic:

  • Adding igDataChart: This topic demonstrates how to add the igDataChart control to a page and bind it to data.

View on GitHub