Skip to content

Timeseries Chart Attributes

Time Axis

The xAxis object is used to configure components of Time Axis. You can create the xAxis object under dataSource.

Syntax:
	new FroalaCharts({
	    type: 'timeseries',
	    dataSource: {
			xAxis {
				plot: ' ', //Column Name
				showTimeSpanMarkerTooltipAt: , // Crosslines on time span markers 
				timemarker: [{
					// Attributes of Time Marker
				}],
				binning: { }, //Multipliers for each time unit
				outputTimeFormat: { }, //date/time format
				initialInterval: { } //the spread of the active window
			}
	    },
	});
AttributeTypeDescription
plotStringDefines the column, which will be plotted along this axis.
showTimeSpanMarkerTooltipAtNumberSpecifies how to show the time span marker tooltip. Valid values are [1,0]
timeMarkerArray(Time Marker Configuration)Array of TimeMarkerConfigs that will be shown along the axis.
binningObjectAn object to specify multipliers for each time unit in an array format.
outputTimeFormatObjectAn object to specify the date-time format for a specific time unit.
initialIntervalObjectAn object to set the initial spread of the active window.

Style Time Axis

You can add style to the x-Axis components using style object under xaxis object.

	new FroalaCharts({
	    "type": 'timeseries',
	    "dataSource": {
	        xAxis {
	            "plot": ' ', //Column Name
				"style": {
					"tick-mark": {}, //SVGStyle | String
					"tick-mark-major": {}, //SVGStyle | String
					"tick-mark-minor": {}, //SVGStyle | String
					"label": {}, //SVGStyle | String
					"label-major": {}, //SVGStyle | String
					"label-minor": {}, //SVGStyle | String
					"label-context": {} //SVGStyle | String
				}
	        }
	    },
	});
AttributeTypeDescription
tick-markSVGStyleStyles both major and minor ticks.
tick-mark-majorSVGStyleStyles the major tick of the time axis.
tick-mark-minorSVGStyleStyles the minor tick of the time axis.
labelSVGStyleStyles the labels of major and minor ticks on time axis.
label-majorSVGStyleStyles the labels of major ticks on time axis.
label-minorSVGStyleStyles the labels of minor ticks on time axis.
label-contextSVGStyleStyles the contextual label of the time axis.

Binning

To add multipliers for each time unit you can create a binning object under xaxis object.

	new FroalaCharts({
	    type: 'timeseries',
	    dataSource: {
	        xAxis: {
				binning: {
					"year": [Array of multipliers] // Ex - [1,2,3,5,10]
					"month": [Array of multipliers] // Ex - [1,2,3,4,6]
					"day": [Array of multipliers] // Ex - [1,2,3,5,6,10,15]
					"hour": [Array of multipliers] // Ex - [1,2,3,4,6,8,12]
					"minute": [Array of multipliers] // Ex - [1,2,3,4,5,6,10,12,15,20,30]
					"second": [Array of multipliers] // Ex - [1,2,3,4,5,6,10,12,15,20,30]
					"millisecond": [Array of multipliers] // Ex - [10,20,50,100,200,250,500]
				}
			},
		}
	});
AttributeTypeDescription
yearArrayAn array to specify the year's multipliers.
monthArrayAn array to specify the month's multipliers. Valid multipliers are: [1, 2, 3, 4, 6].
dayArrayAn array to specify the days's multipliers. Valid multipliers are: [1, 2, 3, 5, 6, 10, 15].
hourArrayAn array to specify the hour's multipliers. Valid multipliers are: [1, 2, 3, 4, 6, 8, 12].
minuteArrayAn array to specify the minute's multipliers. Valid multipliers are: [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30].
secondArrayAn array to specify the second's multipliers. Valid multipliers are: [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30].
millisecondArrayAn array to specify the millisecond's multipliers. Valid multipliers are: [10, 20, 50, 100, 200, 250, 500].

Output Time Format

To specify the date-time format for a specific time unit, create a outputTimeFormat object under xaxis object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    xAxis: {
	      outputTimeFormat: {
	        year: " ", //%Y - 2018
	        month: " ", //%B, %Y - September, 2018
	        day: " ", //%B %-d, %Y - November 11, 2018
	        hour: " ", //%b %-d, %Y, %-I %p - Nov 5, 2018, 4 PM
	        minute: " ", //%b %-d, %Y, %-I:%-M %p - Nov 5, 2018, 4:24 PM
	        second: " ", //%b %-d, %Y, %-I:%-M:%-S %p - Nov 5, 2018, 4:25:30 PM
	        millisecond: " " //%b %-d, %Y, %-I:%-M:%-S:%-L %p- Nov 29, 2017, 4:29:12.075 PM
	      }
	    }
	  }
	});
AttributeTypeDescription
yearStringSets the format of the data bin where the time unit is year.
monthStringSets the format of the data bin where the time unit is month.
dayStringSets the format of the data bin where the time unit is day.
hourStringSets the format of the data bin where the time unit is hour.
minuteStringSets the format of the data bin where the time unit is minute.
secondStringSets the format of the data bin where the time unit is second.
millisecondStringSets the format of the data bin where the time unit is millisecond.

Initial Interval

To set the initial spread of the active window of the time navigator create a initialInterval object under xaxis object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    xAxis: {
	      initialInterval: {
	        from: "2016-01-01 12:00:00",
	        to: "2016-01-31 12:00:00"
	      }
	    }
	  }
	});
AttributeTypeDescription
fromStringSets the value from where you want the active window to start.
toStringSets the value upto which you want your active window to be displayed.

Time Markers

To configure the time marker of the chart you can create the timemarker object under xaxis object.

	new FroalaCharts({
	    type: 'timeseries',
	    dataSource: {
	        xAxis {
	            plot: ' ', //Column Name
	            timemarker: [{
	                // Attributes of Time Marker
	                start: ' ', //Start Date
	                end: ' ', //End Date
	                label: ' ', //Label of the Time Axis
	                timeFormat: ' ', //Time format
	                type: 'full', // Full time marker
	                // Define the frequency, at which the cyclic time marker will be repeated.
	                repeat {
	                    unit: ' ', //Defines the time unit for the time marker.
	                    multiplier: ' ', //Defines the multiplier of the time unit.
	                    type: ' ' //Renders the time marker from top to bottom of the canvas
	                }
	            }]
	        }
	    },
	});
AttributeTypeDescription
labelStringSets the label of the time marker.
startStringSets the start time of the marker. Corresponds to the start of the date/time.
endStringSets the end time of the marker. If this is attribute is not specified, the marker is represented as a line and not as a band. Corresponds to the end of the given date/time.
timeFormatStringSets the date/time format and specifies the start and end values for the time marker.
unitStringDefines the time unit for the time marker.
multiplierNumberSets the multiplier of the time unit. Default is 1.
typeStringSetting this attribute to full will render the time marker (instance & band) from top to bottom (vertically) of the canvas.

Style Time Marker Componemts

You can add style to the time marker components using style object under timemarker object.

	new FroalaCharts({
	    type: 'timeseries',
	    dataSource: {
	        xAxis {
	            timemarker: [{
	                "style": {
	                    "marker": { }, // Affects style of marker box, line and notch
	                    "marker:hover": { }, // Affects hover style of marker box, line and
	                    // notch
	                    "marker-box": { },
	                    "marker-box:hover": { },
	                    "marker-line": { },
	                    "marker-line:hover": { },
	                    "marker-notch": { },
	                    "marker-notch:hover": { },
	                    "text": { },
	                    "text:hover": { }
	                }
	            }]
	        }
	    },
	});
AttributeTypeDescription
markerSVGStyleStyles the marker box, line, and notch.
marker:hoverSVGStyleStyles the marker box, line and notch when hovered.
marker-boxSVGStyleStyles the marker box of the time marker.
marker-box:hoverSVGStyleStyles the marker box of the time marker when hovered.
marker-lineSVGStyleStyles the marker line of the time marker.
marker-line:hoverSVGStyleStyles the marker line of the time marker when hovered.
marker-notchSVGStyleStyles the notch of the time marker.
marker-notch:hoverSVGStyleStyles the notch of the time marker when hovered.
textSVGStyleStyles the text of the time marker.
text:hoverSVGStyleStyles the text of the time marker when hovered.

Time Navigator

To configure the time navigator of the chart, you can create the navigator object under dataSource.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    navigator: {
	      enabled: Boolean,
	      scrollbar: {},
	      window: {},
	      label: {}, //SVGStyle | String
	      "label-background": {}, //SVGStyle | String
	      height: Number
	    }
	  }
	});
AttributeTypeDescription
enabledBooleanEnables the time navigator of the chart.
scrollbarObjectAn object in which you can customize the scroll bar of the time navigator.
windowObjectAn object in which you can customize the window of the time navigator.
labelStringStyles the label of the window in time navigator.
label-backgroundStringStyles the label background of the windoe in time navigator.
heightNumberAn attribute to set the height of the time naviagator. You can also set the ratio with respect height of the canvas using canvasHeightProportion attribute where the fourth ratio will represent the height of the time navigator.

Y Axes

To configure the y-axis of the chart you can create the yAxis object under dataSource object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    yAxis: [
	      {
	        plotType: " ", //To set the plot type out the 'plot' object
	        min: " ", //Minimum value of the axis
	        max: " ", //Maximum value of the axis
	        format: {
	          //Measures
	          prefix: " ",
	          suffix: " "
	        },
	        plot: {
	          //Column header for the measure which is plotted against the Y Axis
	        },
	        type: " ", //Plot type to render the chart
	        title: " ", //Title of the axis
			aggregation: " " //Aggregate Function
			connectNullData: " " //Set the value to true to connect null data
			showGridband: " ", //Set the value to 1 to show Grid Band
			defaultFormat: " ", //Default Format of the number
			round: " " //Round of the y-axis value
	      }
	    ]
	  }
	});
AttributeTypeDescription
plotString, Array of Strings, Array of ObjectsIt maps to the column header for the measure which is plotted against the Y Axis. If it's an array of strings, all the strings are plotted against the same axis. If its an array of objects, the developer can additionally specify the type of the plot as well as the aggregation strategy used to represent the measure.
plotTypeStringThis attribute sets the type of the the data plot to render the chart. By default the type is a line. It controls the plot type for all names specified.
minNumberThis attribute sets the minimum value of the axis. The value of this attribute is ignored when the value is greater than the minimum value of the data plotted against the axis.
maxNumberThis attribute sets the maximum value of the axis. The value of this attribute is ignored when the value is less than the maximum value of the data plotted against the axis.
formatStringThis attribute sets the configuration of the measures plotted on the axis. If you set the formatter function, the provided prefix and suffix properties are ignored.
titleStringAllows you to rename the title of the axis. If not specified, the axis title will be the same as the column name joined by hyphens.
aggregationStringAllows you to specify alternative aggregation strategies for the measures being plotted. It controls the aggregation strategy for all plots specified.
typeStringThis attribute sets the type of the the data plot to render the chart. It is used when you want to specify the chart type under plot object.
connectNullDataBooleanConnects the null data for line and area plots.
showGridbandBooleanHorizontal bands running along with the canvas.
defaultFormatBooleanDisable the default formatting of the y-axis values to display the raw data.
roundBooleanRound off the y-axis values.

Style Connecting Lines

You can add style for connecting lines of null data using two methods:

  • Under yAxis Object
  • Under global plotConfig object
	new FroalaCharts({
	    type: "timeseries",
	    dataSource: {
	        "yAxis": [{
	            "plot": [{
	                "type": "area",
	                "style": {
	                    "plot.null": { } //SVGStyle | String,
	                    "line.null": { } //SVGStyle | String,
	                    "area.null": { } //SVGStyle | String
	                }
	            }]
	        }],
	        "plotConfig": {
	            "line": {
	                "style": {
	                    "plot.null": { } //SVGStyle | String,
	                    "line.null": { } //SVGStyle | String
	                }
	            },
	            "area": {
	                "style": {
	                    "plot.null": { } //SVGStyle | String,
	                    "line.null": { } //SVGStyle | String,
	                    "area.null": { } //SVGStyle | String
	                }
	            }
	        }
	    }
	});
AttributesTypeDescription
plot.nullSVGStyleStyles the connecting line of the plots in the canvas.
line.nullSVGStyleStyles the connecting line of the line plots in the canvas.
area.nullSVGStyleStyles the connecting line of the area plots in the canvas.

Caption

To configure the caption of the chart, you can create the caption object under dataSource.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    caption: {
	      text: " ", //String
	      position: " " //String | Default Value: Left
	    }
	  }
	});
AttributesTypeDescription
textStringCaption of the chart
positionStringSets the position of the caption. The values can be: left, right or center.

Sub-caption

To configure the sub-caption of the chart, you can create the subCaption object under dataSource.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    subcaption: {
	      text: " ", //String
	      position: " " //String | Default Value: Left
	    }
	  }
	});
AttributesTypeDescription
textStringSub-caption of the chart
positionStringSets the position of the sub-caption. The values can be: left, right or center.

Plot Configuration

To configure the plot of the chart, you can create the plotConfig object under dataSource.

All Data Plots
	new FroalaCharts({
		type: "timeseries",
		dataSource: {
		  plotConfig: {
			  generic: {
				  connectNullData: " " //Set the value to true to connect null data
			  } //Style too be applied across the chart
		  }
		}
	  });
Specific Data Plots
	new FroalaCharts({
		type: "timeseries",
		dataSource: {
		  plotConfig: {
				  style: {
					  line: {
						  connectNullData: " " //Set the value to true to connect null data
					  } //Style too be applied only to line data plots
				  }
			}
		  }
	  });
AttributesTypeDescription
genericObjectStyle specified within this object is applied across the chart.
connectNullDataBooleanConnects the null data for line and area plots.

Crossline

You can add style to the crossline using style object under crossline object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    crossline: {
	      style: {
	        line: {}, //SVGStyle | String
	        tag: {}, //SVGStyle | String
	        label: {}, //SVGStyle | String
	        "vertical-line": {}, //SVGStyle | String
	        "vertical-tag": {}, //SVGStyle | String
	        "vertical-label": {}, //SVGStyle | String
	        "horizontal-line": {}, //SVGStyle | String
	        "horizontal-tag": {}, //SVGStyle | String
	        "horizontal-label": {} //SVGStyle | String
	      }
	    }
	  }
	});
AttributeTypeDescription
lineSVGStyleStyles the line of the crossline.
tagSVGStyleStyles the tag of the crossline.
labelSVGStyleStyles the label of the crossline.
vertical-lineSVGStyleStyles the vertical line of the crossline.
vertical-tagSVGStyleStyles the tag of the vertical line of the crossline.
vertical-labelSVGStyleStyles the label of the vertical line of the crossline.
horizontal-lineSVGStyleStyles the horizontal line of the crossline.
horizontal-tagSVGStyleStyles the tag of the horizontal line of the crossline.
horizontal-labelSVGStyleStyles the label of the horizontal line of the crossline.

Reference Lines

To configure the reference line of the chart, you can create the referenceLine object under dataSource.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    referenceLine: [
	      {
	        label: " ", //Label of the reference line
	        value: " " //Value of the reference line
	      }
	    ]
	  }
	});
AttributeTypeDescription
labelStringThe label which gets displayed when you hover the reference lines.
valueNumberThis attribute specifies the value at which the reference line is drawn.

Reference Zone

To configure the reference zone of the chart, you can create the referenceZone object under yAxis object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    yAxis: [
	      {
	        // Reference Zone
	        referenceZone: [
	          {
	            label: " ", //Label of the reference zone
	            valueMax: " ", //Max value of the reference zone
	            valueMin: " " //Min value of the reference zone
	          }
	        ]
	      }
	    ]
	  }
	});
AttributeTypeDescription
labelStringThe label which gets displayed when you hover the reference zone.
valueMaxNumberThis attribute specifies the max value upto which you want to create a reference zone.
valueMinNumberThis attribute specifies the min value from where you want to create a reference zone.

Style Reference Zone

Reference zone of a time-series chart can be styled using style object under referenceZone object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    yAxis: [
	      {
	        // Reference Zone
	        referenceZone: [
	          {
	            label: " ", //Label of the reference zone
	            valueMax: " ", //Max value of the reference zone
	            valueMin: " ", //Min value of the reference zone
	            style: {
	              marker: {}, //Style | String
	              "marker:hover": {}, //Style | String
	              "marker-zone": {}, //Style | String
	              "marker-zone:hover": {}, //Style | String
	              "marker-tag": {}, //Style | String
	              text: {}, //Style | String
	              "marker-text": {}, //Style | String
	              "marker-notch": {}, //Style | String
	              "marker-notch:hover": {}, //Style | String
	              "marker-notch:hover": {}, //Style | String
	              "marker-notch-connector": {}, //Style | String
	              "marker-notch-connector:hover": {} //Style | String
	            }
	          }
	        ]
	      }
	    ]
	  }
	});

Tooltip

To configure the tooltip of the chart, you can create the tooltip object under the dataSource.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    tooltip: {
	      enabled: "0", // Disables the Tooltip
	      outputTimeFormat: {} //date/time format
	    }
	  }
	});

AttributeTypeDescription
enabledBooleanSetting this attribute to 1 enables the visibility of the tooltip for the chart.
outputTimeFormatObjectAn object to specify the date-time format for a specific time unit.

Style Tooltip Components

You can add style to the tooltip using style object under tooltip object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    tooltip: {
	      enabled: Boolean,
	      style: {
	        container: {}, //HTMLStyle | String
	        text: {}, //HTMLtyle | String
	        header: {}, //HTMLStyle | String
	        body: {} //HTMLStyle | String
	      }
	    }
	  }
	});
AttributeTypeDescription
containerHTMLStyleCustomizes the containing box of the tooltip.
textHTMLStyleCustomizes the text of the tooltip.
headerHTMLStyleCustomizes the header at the top of the tooltip.
bodyHTMLStyleCustomizes all the text other than the header text.

Output Time Format

To specify the date-time format for a specific time unit, create a outputTimeFormat object under xaxis object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    xAxis: {
	      outputTimeFormat: {
	        year: " ", //%Y - 2018
	        month: " ", //%B, %Y - September, 2018
	        day: " ", //%B %-d, %Y - November 11, 2018
	        hour: " ", //%b %-d, %Y, %-I %p - Nov 5, 2018, 4 PM
	        minute: " ", //%b %-d, %Y, %-I:%-M %p - Nov 5, 2018, 4:24 PM
	        second: " ", //%b %-d, %Y, %-I:%-M:%-S %p - Nov 5, 2018, 4:25:30 PM
	        millisecond: " " //%b %-d, %Y, %-I:%-M:%-S:%-L %p- Nov 29, 2017, 4:29:12.075 PM
	      }
	    }
	  }
	});
AttributeTypeDescription
yearStringSets the format of the data bin where the time unit is year.
monthStringSets the format of the data bin where the time unit is month.
dayStringSets the format of the data bin where the time unit is day.
hourStringSets the format of the data bin where the time unit is hour.
minuteStringSets the format of the data bin where the time unit is minute.
secondStringSets the format of the data bin where the time unit is second.
millisecondStringSets the format of the data bin where the time unit is millisecond.

Legend

To configure the legend of the chart, you can create the legend object under the dataSource.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    legend: {
	    	enabled: '1', //Enable / Disable legend
			item: [{
				value: 'Series A' // name of visible legend item
				initiallyhidden: 1, // boolean attribute (default 0) to control the visibility of plot
			}, {
				value: 'Series B'
				initiallyhidden: 0,
			}]
		}
	  }
	});
AttributeTypeDescription
enabledBooleanThis attribute lets you show/hide the legend, when included under the legend object.
initiallyhiddenObjectThis attribute lets you keep the legend hidden when the chart is initially rendered.

Data Markers

To configure the data marker of the chart, you can create the dataMarker object under the dataSource.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    dataMarker: [
	      {
	        time: " ", //Time on which the data marker will be shown
	        value: " ", //Specifies the y-axis label on which the data marker will be applied
	        identifier: " ", //Defines a character to be shown
	        timeFormat: " ", //Format of the date
	        tooltext: " " //Text in the tooltip
	      }
	    ]
	  }
	});
AttributeTypeDescription
timeStringSets the time on which the data marker will be shown. Corresponds to the start of the given date/time.
valueStringSets the y-axis label on which the data marker will be applied.
timeFormatStringSets the format of the date to specify the time for the marker.
typeStringSets the type of the marker. Example, flag.
identifierCharacterThis attribute defines a character to be shown within the data marker.
tooltextStringThe text specified in this attribute is displayed in the tooltip when you hover over the data marker.

Standard Range Selector

To configure the standard range selector of the chart, you can create the standardRangeSelector object under extensions object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    extensions: {
	      standardRangeSelector: {
	        enabled: "1" //Enable or diable the standard range selector
	      }
	    }
	  }
	});
AttributeTypeDescription
enabledBooleanSetting this attribute to 1 enables the visibility of the standard range selector in the chart.

Style Standard Range Selector

You can add style to the Standard Range Selector using style object under standardRangeSelector object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    extensions: {
	      standardRangeSelector: {
	        style: {
	          "button-text": {}, //Object | String
	          "button-background": {}, //Object | String
	          "button-text:hover": {}, //Object | String
	          "button-background:hover": {}, //Object | String
	          "button-text:active": {}, //Object | String
	          "button-background:active": {}, //Object | String
	          separator: {} //Object | String
	        }
	      }
	    }
	  }
	});
AttributeTypeDescription
button-textStringStyles the button text of the standard range selector.
button-backgroundStringStyles the background of the button in standard range selector.
button-text:hoverStringStyles the button text of the standard range selector when hovered.
button-text:activeStringStyles the button text of the standard range selector when active.
button-background:activeCharacterStyles the background of the button when active.
separatorStringStyles the separator | of the dates in standard range selector.

Custom Range Selector

To configure the custom range selector of the chart, you can create the customRangeSelector object under extensions object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    extensions: {
	      customRangeSelector: {
	        enabled: "1" //Enable or diable the custom range selector
	      }
	    }
	  }
	});
AttributeTypeDescription
enabledBooleanSetting this attribute to 1 enables the visibility of the custom range selector in the chart.

Style Custom Range Selector

You can add style to the Custom Range Selector using style object under customRangeSelector object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    extensions: {
	      customRangeSelector: {
	        style: {
	          "title-text": {}, //Object | String
	          "title-icon": {}, //Object | String
	          "title-text:hover": {}, //Object | String
	          "title-icon:hover": {}, //Object | String
	          "title-text:active": {}, //Object | String
	          "title-icon:active": {}, //Object | String
	          container: {}, //Object | String
	          label: {}, //Object | String
	          "button-apply": {}, //Object | String
	          "button-cancel": {}, //Object | String
	          "button-apply:hover": {}, //Object | String
	          "button-cancel:hover": {}, //Object | String
	          select: {}, //Object | String
	          input: {} //Object | String
	        }
	      }
	    }
	  }
	});
AttributeTypeDescription
title-textStringStyles the title text of the custom range selector.
title-iconStringStyles the title of the icon in custom range selector.
title-text:hoverStringStyles the title text of the custom range selector when hovered.
title-icon:hoverStringStyles the title of the icon in custom range selector when active.
title-text:activeCharacterStyles the title text of the custom range selector when active.
title-icon:activeStringStyles the title of the icon in custom range selector when active.
containerStringStyles the container of the custom range selector.
labelStringStyles the label of the custom range selector.
button-applyStringStyles the apply buttom of the custom range selector.
button-cancelStringStyles the cancelled button of the custom range selector.
button-apply:hoverStringStyles the apply button of the custom range selector when hovered.
button-cancel:hoverStringStyles the cancelled button of the custom range selector when hovered.
selectStringStyles the select icon of the custom range selector.
inputStringStyles the input box of the custom range selector.

Predictive Data

To apply the date from where you want to specify the predictive data for the chart, you can create a prediction object under extensions object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    extensions: {
	      prediction: {
	        date: " " //The Predictive Data starts from this date
	      }
	    }
	  }
	});
AttributeTypeDescription
dateDate/Time formatSets the start date of the predictive data in the chart.

Style Predictive Data

You can add style to the predictive data in the chart using style object under prediction object.

	new FroalaCharts({
	  type: "timeseries",
	  dataSource: {
	    extensions: {
	      prediction: {
	        style: {
	          plot: {}, //SVGStyle | String
	          line: {}, //SVGStyle | String
	          area: {}, //SVGStyle | String
	          column: {}, //SVGStyle | String
	          anchor: {}, //SVGStyle | String
	          bear: {}, //SVGStyle | String
	          bull: {} //SVGStyle | String
	        }
	      }
	    }
	  }
	});
AttributeTypeDescription
plotStringStyles all the plots with predictive data in the canvas.
lineStringStyles the line plot with predictive data in the canvas.
areaStringStyles the area plot with predictive data in the canvas.
columnStringStyles the column plot with predictive data in the canvas.
anchorStringStyles the anchors with predictive data in the canvas.
bearStringStyles the bear with predictive data in the canvas.
bullStringStyles the bull with predictive data in the canvas.

Chart Configuration and Root JSON Attributes

AttributeTypeDescription
typeNumberSets the chart type.
widthNumberSets the width of the chart canvas.
heightNumberSets the height of the chart canvas.
animationBooleanThis attribute gives you the option to control animation in your charts. If you do not want to animate any part of the chart, set this as 0.
animationDurationNumberThis attribute sets the animation duration, if animation is set to 1.
paletteColorsArray(String)Using paletteColors attribute, you can specify your custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., paletteColors: #FF0000, #0372AB, #FF5904.
clickURLStringThe entire chart can now act as a hotspot. Use this URL to define the hotspot link for the chart. The link can be specified in FroalaCharts Link format.
hasRTLTextBooleanThis attribute, when set to 1, indicates to the chart that the text (rendered on the chart) may contain RTL characters and the textual display has to be managed accordingly.
showPrintMenuItemBooleanWhether to show "Print Chart" item in the context menu of the chart? Even if you opt to hide the item in context menu, you can still opt to invoke print() JavaScript method of the chart to print the same.
exportEnabledBooleanWhether the chart will allow exporting to images, PDFs, SVG or XLSX.
exportActionStringIn case of server-side exporting, the action specifies whether the exported image will be sent back to client as download, or whether it'll be saved on the server.
exportHandlerStringIn case of server side exporting, this refers to the path of the server-side export handler (the ready-to-use scripts that we provide).
exportFormatsStringLets you configure what output formats to allow for export of chart, in the export context menu, and also customize the label for each menu item. The attribute value should be a pipe (|) delimited separated key-value pair. Example: exportFormats: 'PNG=Export as High Quality Image|JPG|PDF=Export as PDF File'
exportAtClientSideBooleanThis attribute when set to 1, enables the client-side export feature.
exportShowMenuItemNumberWhether the menu items related to export (e.g., Save as JPEG etc.) will appear in the context menu of chart.
exportTargetWindowStringIn case of server-side exporting and when using download as action, this lefts you configure whether the return image, PDF, SVG or XLSX will open in same window (as an attachment for download), or whether it will open in a new window.
exportFileNameStringUsing this attribute you can specify the name (excluding the extension) of the output (export) file.
baseChartMessageImageHAlignStringThis attribute allows to set a custom horizontal alignment for all images displayed as chart messages. Possible values are left, right and middle.
baseChartMessageImageVAlignStringThis attribute allows to set a custom vertical alignment for all images displayed as chart messages. Possible values are top, bottom and middle.
loadMessageStringThis attribute allows to set the message to be displayed when a chart begins to load. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., loadStartMessageFont, loadStartMessageFontSize, loadStartMessageColor. If message keys are not specified, base cosmetics are used.
To display an image as the chart message, prefix I- to the image URL.
Alignment and properties of the image can be configured using attributes such as loadMessageHAlign, loadMessageVAlign, loadMessageAlpha and so on.
loadMessageImageHAlignStringIf an image is displayed as the chart loadMessage, this attribute allows to set a custom horizontal alignment for the image. Possible values are left, right and middle.
loadMessageImageVAlignStringIf an image is displayed as the chart loadMessage, this attribute allows to set a custom vertical alignment for the image. Possible values are top, bottom and middle.
typeNotSupportedMessageStringThis attribute allows to set the message to be displayed when the specified chart type is not supported. To display an image as the chart message, prefix I- to the image URL.
typeNotSupportedMessageImageHAlignStringIf an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom horizontal alignment for the image. Possible values are left, right and middle.
typeNotSupportedMessageImageVAlignStringIf an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom vertical alignment for the image. Possible values are top, bottom and middle.
renderErrorMessageStringThis attribute allows to set the message to be displayed if an error is encountered while rendering the chart. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., renderErrorMessageFont, renderErrorMessageFontSize, renderErrorMessageColor.
If message keys are not specified, base cosmetics are used. To display an image as the chart message, prefix I- to the image URL. Alignment and properties of the image can be configured using attributes such as renderErrorMessageHAlign, renderErrorMessageVAlign, renderErrorMessageAlpha and so on.
renderErrorMessageImageHAlignStringIf an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom horizontal alignment for the image. Possible values are left, right and middle.
renderErrorMessageImageVAlignStringIf an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom vertical alignment for the image. Possible values are top, bottom and middle.
dataLoadStartMessageStringThis attribute allows to set the message to be displayed when chart data begins loading. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
Alignment and properties of the image can be configured using attributes such as dataLoadStartMessageHAlign, dataLoadStartMessageVAlign, dataLoadStartMessageAlpha and so on. To display an image as the chart message, prefix I- to the image URL.
dataLoadStartMessageImageHAlignStringIf an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom horizontal alignment for the image. Possible values are left, right and middle.
dataLoadStartMessageImageVAlignStringIf an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom vertical alignment for the image. Possible values are top, bottom and middle.
dataEmptyMessageStringThis attribute allows to set the message to be displayed if the data loaded for a chart is empty. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., dataEmptyMessageFont, dataEmptyMessageFontSize, dataEmptyMessageColor. If message keys are not specified, base cosmetics are used.
To display an image as the chart message, prefix I- to the image URL. Alignment and properties of the image can be configured using attributes such as dataEmptyMessageHAlign, dataEmptyMessageVAlign, dataEmptyMessageAlpha and so on.
dataEmptyMessageImageHAlignStringIf an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom horizontal alignment for the image. Default Value: baseChartMessageImageHAlign
dataEmptyMessageImageVAlignStringIf an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom vertical alignment for the image. Default Value: baseChartMessageImageHAlign
dataLoadErrorMessageStringThis attribute allows to set the message to be displayed if an error is encountered while loading chart data. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., dataLoadErrorMessageFont, dataLoadErrorMessageFontSize, dataLoadErrorMessageColor. If message keys are not specified, base cosmetics are used.
Alignment and properties of the image can be configured using attributes such as dataLoadErrorMessageHAlign, dataLoadErrorMessageVAlign, dataLoadErrorMessageAlpha and so on. To display an image as the chart message, prefix I- to the image URL.
dataLoadErrorMessageImageHAlignStringIf an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom horizontal alignment for the image. Default Value: baseChartMessageImageHAlign
dataLoadErrorMessageImageVAlignStringIf an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom vertical alignment for the image. Default Value: baseChartMessageImageHAlign
dataInvalidMessageStringThis attribute allows to set the message to be displayed if the data to be loaded for the chart is invalid. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g., dataInvalidMessageFont, dataInvalidMessageFontSize, dataInvalidMessageColor. If message keys are not specified, base cosmetics are used.
Alignment and properties of the image can be configured using attributes such as dataInvalidMessageHAlign, dataInvalidMessageVAlign, dataInvalidMessageAlpha and so on. To display an image as the chart message, prefix I- to the image URL.
dataInvalidMessageImageHAlignStringIf an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom horizontal alignment for the image. Default Value: baseChartMessageImageHAlign
dataInvalidMessageImageVAlignStringIf an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom vertical alignment for the image. Default Value: baseChartMessageImageHAlign
canvasHeightProportionStringThis attribute allows you to set variable heights to the canvases in a multivariate chart in the form of ratios, i.e., 1:2:1, 1:2:3:4, etc.

Date/time Format

outputTimeFormat attribute is used to specify the date-time format of the chart. You can specify the date-time format for a specific time unit using outputTimeFormat.

List of predefined date/time format is given below:

Date/Time FormatDescription
%aAbbreviated weekday name.
%AFull weekday name.
%bAbbreviated month name.
%BFull month name.
%dZero-padded day of the month as a decimal number [01,31].
%HHour (24-hour clock) as a decimal number [00,23].
%IHour (12-hour clock) as a decimal number [01,12].
%jDay of a year as a decimal number [001,366].
%mMonth as a decimal number [01,12].
%MMinute as a decimal number [00,59].
%LMilliseconds as a decimal number [000, 999].
%pCan either be AM or PM.
%qThe quarter of the year (Q1, Q2, Q3, Q4).
%QThe number of milliseconds elapsed since the UNIX epoch (0, 1, 2,...).
%sThe number of seconds elapsed since the UNIX epoch (0, 1, 2,...).
%SSecond as a decimal number [00, 61].
%yA year without century as a decimal number [00,99].
%YA year with century as a decimal number [2000, 1999].
%ZTime Zone offset, such as -0700, -07:00, -07, or Z.
%%A literal percent sign (%). This token might seem useless, but remember that the tokens reserve the % symbol for their own use. This token acts as an escape character to literally allow a % symbol in a date string.

Example:

	unitDefaultFormats = {
	  Year: "%Y", // 2018
	  Month: "%b %Y", // Jan 2018
	  Day: "%b %d, %Y", // Jan 01, 2018
	  Hour: "%b %d, %Y %H hrs", // Jan 01, 2018 23 hrs
	  Minute: "%b %d, %Y %H:%M", // Jan 01, 2018 23:34
	  Second: "%b %d, %Y %H:%M:%S", // Jan 01, 2018 23:34:26
	  Millisecond: "%b %d, %Y %H:%M:%S:%L" // Jan 01, 2018 23:34:26:123
	};

Paddings

In addition to the tokens listed above, it is often necessary to specify padding within the date/time format. For example - 12/02/2018, 12/ 2/2018 and 12/2/2018 all represent 2nd December 2018. The only difference between the three dates is that the day part of the date string has different padding:

  • The first example is padded with a zero.
  • The second example has been padded with space.
  • The third example has no padding.

To handle the above cases, the padding modifiers are listed below:

PaddingDescription
- (Dash)No padding (For example, 12/02/2018)
_ (Underscore)Space padding (For example, 12/ 2/2018)
0 (Zero)Zero padding (For example, 12/2/2018)

The paddings are always placed after every token's % symbol. The default value padding of the date/time format of a time-series chart is 0.

Apply CSS Transform

Timeseries allows you to resize the chart container of the chart using applyCSSTransform attribute. The chart is automatically resized when the container is resized. If a tooltip was active at the time of resizing, it is repositioned properly.