Show Nav

Calendar Charts

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Overview

Calendar charts display data activity over the course of several months up to a full calendar year. They are useful for comparing data over time (similar to heat maps) and to highlight specific dates (holidays, birthdays). Browse the ZingChart Gallery for more calendar chart examples.

Calendar Type

In the chart object, add a type property. Set the value to 'calendar'. The default chart displays as a 12 month calendar of the current year.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Notes:

Options Data

Create an options object, and add a values array of arrays.

Calendar Values

In each array, provide the calendar dates with corresponding number values in the following format.

options: {
  values: [
    ['YYYY-MM-DD', val1],
    ['YYYY-MM-DD', val2],
    ...,
    ['YYYY-MM-DD', valN]
  ]
}

To return the values, call the %data-day and %v tokens, respectively.

Additional Values

You can also provide optional string values in the following format:

options: {
  values: [
    ['YYYY-MM-DD', val1, 'info0', 'info1', ..., 'infoN'],
    ['YYYY-MM-DD', val2, 'info0', 'info1', ..., 'infoN'],
    ...,
    ['YYYY-MM-DD', valN, 'info0', 'info1', ..., 'infoN']
  ]
}

To return the values, call the tokens as %data-info0, %data-info1, and so on.

Options Configuration

Use the options object to define and configure the calendar chart.

Calendar Year

Use the year object to configure the calendar year. Without specification, the calendar will default to the current year. Add a text property, and provide the calendar year as the value. You can style the year using inherited background, border, and font/text properties.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Starting Month

Use the startMonth property to set the month that the calendar chart begins on. Without specification, the calendar will start in January. Provide a value between 1-12, with 1 indicating January and 12 indicating December.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Ending Month

Use the endMonth property to set the month the calendar chart ends on. Without specification, the calendar will end in December. Provide a value between 1-12, with 1 indicating January and 12 indicating December.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

First Day of the Week

Use the firstday property to set the day of the week the calendar begins on: Sunday ('s') or Monday ('m'). Without specification, Sunday is set as the first day of the week, which is the norm in most North American countries. In most of Europe, however, Monday is considered the first day of the week.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Color Palette

Use the palette array to set the color palette for the calendar and scale indicator. Provide two color, HEX, or RGB values, separated by commas, to represent the negative and positive values.

palette: ['negativeColor', 'positiveColor']
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Scale Indicator

Use the scale object to configure the scale indicator. Inside:

  • Use the direction property to set the scale direction: 'h' (horizontal) or 'v' (vertical).
  • Use the label object to style the indicator labels using inherited font/text properties.
  • Use the pointer object to style the scale pointer with the type property (to set the shape) and inherited background, border, and line properties.
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Row Configuration

Use the rows property to set the layout to 1, 2, 3, 4, 6, or 12 calendar rows.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Month (1-12)

Use the month object to set the month labels and style the cells by month. Inside:

  • Use the values array to set the month labels and the item object to style them with inherited font/text properties.
  • Use the items object to style the cells by specified month. Add an 'm-N' object for each month you want to style (with N representing the month number, ranging from 1-12), and provide the alpha and backgroundColor properties. To style the borders, add an outline object and provide the borderColor and borderWidth properties.
  • Use the outline object to style the cell borders by active and inactive months with the borderColor and borderWidth properties.
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Weekday (1-7)

Use the weekday object to set the weekday labels and style the cells by row. Inside:

  • Use the values array to set the weekday labels and the item object to style them with inherited font/text properties.
  • Use the items object to style the cells by row. Add a 'wd-N' object for each row you want to style (with N representing the row number, ranging from 1-7), and provide the alpha and backgroundColor properties.
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Week (1-54)

Use the week object to style the cells by column. Inside:

  • Use the items object to style the cells by column. Add a 'w-N' object for each column you want to style (with N representing the column number, ranging from 1-54), and provide the alpha and backgroundColor properties.
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Individual Day

Use the day object to style the cells by day. Inside:

  • Use the items object to style the cells by individual day. Add a 'd-YYYY-MM-DD' object for each day you want to style (with YYYY-MM-DD representing the year, month, and day) , and provide the alpha and backgroundColor properties.
  • Use the inactive object to style the cells of all inactive days with the alpha and backgroundColor properties.
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Plot Configuration

Use the plot object to configure the tooltips and value boxes.

Tokens

Calendar charts use the following tokens.

Token Description
%data-day The calendar date.
%v The calendar value.
%data-info0, %data-info1, etc. (Optional) Additional calendar values.

Refer to the Tokens Tutorial for a full list of available tokens.

Tooltips

Use the tooltip object to configure the tooltips. Refer to the tooltip JSON page for a full list of properties.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Value Boxes

Use the valueBox object to configure the value boxes. Refer to the valueBox JSON page for a full list of properties.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Summary

Got a question about how calendar charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.