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.

https://app.zingsoft.com/demos/embed/ZV4ZMF3W
https://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.

https://app.zingsoft.com/demos/embed/UV2LS6ER
https://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.

https://app.zingsoft.com/demos/embed/ILUVLF7N
https://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.

https://app.zingsoft.com/demos/embed/KR0SSAHC
https://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.

https://app.zingsoft.com/demos/embed/MPQWGPV7
https://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' ]
https://app.zingsoft.com/demos/embed/CASSRF3S
https://app.zingsoft.com/demos/embed/CASSRF3S

Scale Indicator

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

https://app.zingsoft.com/demos/embed/BL2IR2B5
https://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.

https://app.zingsoft.com/demos/embed/3V00DFPL
https://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:

https://app.zingsoft.com/demos/embed/DB0I2GLY
https://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:

https://app.zingsoft.com/demos/embed/I66MYPBQ
https://app.zingsoft.com/demos/embed/I66MYPBQ

Week (1-54)

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

https://app.zingsoft.com/demos/embed/TKKTC8WF
https://app.zingsoft.com/demos/embed/TKKTC8WF

Individual Day

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

https://app.zingsoft.com/demos/embed/61LNCBKY
https://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-dayThe calendar date.
%vThe 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.

https://app.zingsoft.com/demos/embed/JHN4CK6J
https://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.

https://app.zingsoft.com/demos/embed/K4K5DOMD
https://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.