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: 150,
height: 30,
'offset-x': 10,
'offset-y': 10,
'background-color': "#333",
color: "#FFF",
'border-radius': "4px",
'font-weight': "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",
'font-style': "italic",
'font-size': 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",
'background-color': "#C30",
color: "#FFF",
width:150,
'border-radius':4
}
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.