Calendar Charts

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.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/ZV4ZMF3W

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.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/UV2LS6ER

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.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/ILUVLF7N

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.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/KR0SSAHC

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.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/MPQWGPV7

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']
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/CASSRF3S

Scale Indicator

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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/BL2IR2B5

Row Configuration

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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/3V00DFPL

Month (1-12)

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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/DB0I2GLY

Weekday (1-7)

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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/I66MYPBQ

Week (1-54)

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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/TKKTC8WF

Individual Day

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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/61LNCBKY

Plot Configuration

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

Tokens

Calendar charts use the following tokens.

TokenDescription

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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/JHN4CK6J

Value Boxes

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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/K4K5DOMD

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.