Blog Help & Support Contact About Login

 Show Nav

Custom 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.