Show Nav

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"
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Styling & 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"
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
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"
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Styling & 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
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
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
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Styling & 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
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
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 Syntax page.