Titles
Chart Titles
Overview
ZingChart allows you to use chart titles and subtitles to personalize your data visualizations. The "source" object also allows you to quickly add a data source to your chart.
Title
A title adds a header in a prominent location on your chart. Many of the standard ZingChart attributes can be used to style and position the title's text and background.
Basics
The first step to adding a title is to add the "title" object.
title: { }
At the minimum, you will need to add the "text" attribute to your "title" object.
title: {
text: 'My Title'
}
Title Styling and Positioning
Many of the standard styling and positioning attributes can be applied to modify the title object. For example, we can use "padding", "offset-x", "offset-y", height, and width attributes to move and resize the title. We can also change various font attributes, as well as the appearance of the title object.
title: {
text: 'My Title',
width: '150px',
height: '30px',
offsetX: '10px',
offsetY: '10px',
backgroundColor: '#333',
color: '#FFF',
borderRadius: '4px',
fontWeight: 'none'
}
To see all title attributes, visit our JSON Syntax page.
Subtitle
A subtitle is used to provide additional information to supplement your chart's title. This feature lets you add information in a prominent location under the title.
Basics
The first step to adding a subtitle is to add the "subtitle" object.
subtitle: { }
At the minimum, you will need to add the "text" attribute to your "subtitle" object.
subtitle: {
text: 'My Subtitle'
}
Subtitle Styling and Positioning
Just as with the title object, many of the same styling and positioning attributes can be used with a subtitle.
subtitle: {
text: 'My Subtitle',
color: '#7CA82B',
fontStyle: 'italic',
fontSize: 14
}
To see all subtitle attributes, visit our JSON Syntax page.
Source
The source feature places a text label on a chart to indicate a data source. By default, the source will appear in the bottom right corner of a chart. It can be useful when showing charts that contain data from an external source.
Basics
The first step to adding a source is to add the "source" object.
source: { }
At the minimum, you will need to add the "text" attribute to your "source" object.
source: {
text: 'Source: Department of Labor'
}
Source Styling and Positioning
Many of the same attributes are available to style and position the source object.
source: {
text: 'Source: Department of Labor',
backgroundColor: '#C30',
color: '#FFF',
width: '150px',
borderRadius: '4px'
}
To see all source attributes, visit our JSON Syntax page.
Summary
Titles, subtitles, and sources are very important aspects of a good chart. Titles and subtitles allow the user to quickly understand the purpose of a chart, while a source backs up your data. Don't forget, a comprehensive list of available attributes and objects can be found on our JSON configuration pages for title, subtitle, and source.