DateAxis
Type class
Used to create a date/time-based axis for the chart.
// Create the axis
let xAxis = chart.xAxes.push(new am4charts.DateAxis());
// Set settings
xAxis.title.text = "Time";
// Create the axis
var valueAxis = chart.xAxes.push(new am4charts.DateAxis());
// Set settings
valueAxis.title.text = "Time";
"xAxes": [{
"type": "DateAxis",
"title": {
"text": "Time"
}
}]
More info: IDateAxisEvents for a list of available Events
More info: IDateAxisAdapters for a list of available Adapters
More info: Date Axis got DateAxis documention
Sources
DateAxis can be used (imported) via one of the following packages.
/** * Import from: "charts.ts" * Use like: am4charts.DateAxis */import * as am4charts from "@amcharts/amcharts4/charts";/** * Include via: <script src="charts.js"></script> * Access items like: am4charts.DateAxis */Inheritance
DateAxis extends ValueAxis.
DateAxis is not extended by any other symbol.
Properties
baseDurationType
numberA duration in milliseconds of the
baseInterval.baseIntervalType
ITimeIntervalA base interval (granularity) of data.
Used to indicate what are the base units of your data.
For example, if you have a data set that has a data point every 5 minutes, you may want to set this to
{ timeUnit: "minute", count: 5 }.If not set, the Axis will try to determine the setting by its own, looking at actual data.
For best results, try to follow these values for
count:When unit is "month", use 12 / count = round number When unit is "hour", use 24 / count = round number When unit is "second" and "minute", use 60 / count = round number
baseValueType
numberdateFormatsType
Dictionary<TimeUnit,string|DateTimeFormatOptions>Defaultnew Dictionary<TimeUnit, string | Intl.DateTimeFormatOptions>()A collection of date formats to use when formatting different time units on Date/time axis.
Actual defaults will depend on the language locale set for the chart.
To override format for a specific time unit, say days, you need to set the appropriate key to a format string. E.g.:
axis.dateFormats.setKey("day", "MMMM d, yyyy");axis.dateFormats.setKey("day", "MMMM d, yyyy");"xAxes": [{ "type": "DateAxis", "dateFormats": { "day": "MMMM d, yyyy" } }]More info:
DateFormattergridIntervalType
ITimeIntervalCurrent grid interval.
gridIntervalsType
List<ITimeInterval>Defaultnew List<ITimeInterval>()A list of date/time intervals for Date axis.
This define various granularities available for the axis. For example if you have an axis spanning an hour, and space for 6 grid lines / labels the axis will choose the granularity of 10 minutes, displaying a label every 10 minutes.
Default intervals:
[ { timeUnit: "millisecond", count: 1 }, { timeUnit: "millisecond", count: 5 }, { timeUnit: "millisecond", count: 10 }, { timeUnit: "millisecond", count: 50 }, { timeUnit: "millisecond", count: 100 }, { timeUnit: "millisecond", count: 500 }, { timeUnit: "second", count: 1 }, { timeUnit: "second", count: 5 }, { timeUnit: "second", count: 10 }, { timeUnit: "second", count: 30 }, { timeUnit: "minute", count: 1 }, { timeUnit: "minute", count: 5 }, { timeUnit: "minute", count: 10 }, { timeUnit: "minute", count: 30 }, { timeUnit: "hour", count: 1 }, { timeUnit: "hour", count: 3 }, { timeUnit: "hour", count: 6 }, { timeUnit: "hour", count: 12 }, { timeUnit: "day", count: 1 }, { timeUnit: "day", count: 2 }, { timeUnit: "day", count: 3 }, { timeUnit: "day", count: 4 }, { timeUnit: "day", count: 5 }, { timeUnit: "week", count: 1 }, { timeUnit: "month", count: 1 }, { timeUnit: "month", count: 2 }, { timeUnit: "month", count: 3 }, { timeUnit: "month", count: 6 }, { timeUnit: "year", count: 1 }, { timeUnit: "year", count: 2 }, { timeUnit: "year", count: 5 }, { timeUnit: "year", count: 10 }, { timeUnit: "year", count: 50 }, { timeUnit: "year", count: 100 } ]groupCountType
numberDefault200Since 4.7.0Indicates threshold of data items in selected range at which to start aggregating data items if
groupData = true.groupDataType
booleanDefaultfalseSince 4.7.0Indicates if data should be aggregated to composide data items if there are more data items in selected range than
groupCount.Grouping will occur automatically, based on current selection range, and will change dynamically when user zooms in/out the chart.
NOTE: This works only if
DateAxisis base axis of anXYSeries.The related
XYSeriesalso needs to be set up to take advantage of, by setting itsgroupFields.The group intervals to aggregate data to is defined by
groupIntervalsproperty.let dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.groupData = true; let valueAxis = chart.xAxes.push(new am4charts.valueAxis()); let series = chart.series.push(new am4charts.LineSeries()); series.dataFields.dateX = "date"; series.dataFields.valueY = "value"; series.groupFields.valueY = "average";var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.groupData = true; var valueAxis = chart.xAxes.push(new am4charts.valueAxis()); var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.dateX = "date"; series.dataFields.valueY = "value"; series.groupFields.valueY = "average";{ // ... "xAxes": [{ "type": "DateAxis", "groupData": true }], "yAxes": [{ "type": "ValueAxis" }], "series": [{ "type": "LineSeries", "dataFields": { "dateX": "date", "valueY": "value" }, "groupFields": { "valueY": "average" } }] }More info: Date Axis: dynamic data item groupingrmation about dynamic data item grouping.
groupIntervalType
ITimeIntervalSince 4.9.24Disables automatic selection of data grouping intervals and always uses
groupIntervalif set. Works only ifgroupData = true.groupIntervalsType
List<ITimeInterval>Defaultnew List<ITimeInterval>()Since 4.7.0If data aggregation is enabled by setting Axis'
groupData = true, the chart will try to aggregate data items into grouped data items.If there are more data items in selected period than
groupCount, it will group data items into bigger period.For example seconds might be grouped into 10-second aggregate data items.
This setting indicates what group intervals can the chart group to.
Default intervals:
[ { timeUnit: "millisecond", count: 1}, { timeUnit: "millisecond", count: 10 }, { timeUnit: "millisecond", count: 100 }, { timeUnit: "second", count: 1 }, { timeUnit: "second", count: 10 }, { timeUnit: "minute", count: 1 }, { timeUnit: "minute", count: 10 }, { timeUnit: "hour", count: 1 }, { timeUnit: "day", count: 1 }, { timeUnit: "week", count: 1 }, { timeUnit: "month", count: 1 }, { timeUnit: "year", count: 1 } ]groupData = truedoes not work in combination withskipEmptyPeriods = true.More info: Date Axis: dynamic data item groupingrmation about dynamic data item grouping.
groupMaxType
objectSince 4.7.0A collection of start timestamps to use as axis' max timestamp for particular data item item periods.
groupMinType
objectSince 4.7.0A collection of start timestamps to use as axis' min timestamp for particular data item item periods.
mainBaseIntervalType
ITimeIntervalSince 4.7.0Indicates granularity of the data of source (unaggregated) data.
markUnitChangeType
booleanDefaulttrueUse
periodChangeDateFormatsto apply different formats to the first label in bigger time unit.periodChangeDateFormatsType
Dictionary<TimeUnit,string|DateTimeFormatOptions>Defaultnew Dictionary<TimeUnit, string | Intl.DateTimeFormatOptions>()These formats are applied to labels that are first in a larger unit.
For example, if we have a DateAxis with days on it, the first day of month indicates a break in month - a start of the bigger period.
For those labels,
periodChangeDateFormatsare applied instead ofdateFormats.This allows us implement convenient structures, like instead of:
Jan 1 - Jan 2 - Jan 3 - ...We can have:Jan - 1 - 2 - 3 - ...This can be disabled by settingmarkUnitChange = false.skipEmptyPeriodsType
booleanDefaultfalseIf enabled, axis will automatically collapse empty (without data points) periods of time, i.e. weekends.
An "empty" period is considered a stretch of time in the length of current
baseIntervalwithout a single data point in it.For each such empty period, axis will automatically create an
AxisBreak. By default they will be invisible. You can still configure them by accessingaxis.breaks.template.Important notes:
If you set this property to
true, you can not add your custom axis breaks to this axis anymore.Using this feature affects performance. Use only if you need it.
Setting this to
truewill reset appearance of breaks. If you want to modify appearance, do it after you setskipEmptyPeriods.Some axis label overlapping might happen.
This setting is not compatible with
groupData = true.
snapTooltipType
booleanDefaulttrueShould the nearest tooltip be shown if no data item is found on the current cursor position.
timezoneType
stringSince 4.10.1Deprecated Deprecated
If set will recalculate all timestamps in data to specific named timezone, e.g.
"America/Vancouver","Australia/Sydney","UTC", etc.IMPORTANT: it is no longer recommended to use this setting. Please set
timezoneondateFormatter.timezoneOffsetType
numberSince 4.8.5If set will recalculate all timestamps in data by applying specific offset in minutes.
IMPORTANT: do not set
timezoneOffseton bothDateAxisanddateFormatter. It will skew your results by applying offset twice.tooltipDateType
DateSince 4.9.7Date of the last shown axis tooltip.
tooltipDateFormatType
string|DateTimeFormatOptionsA special date format to apply axis tooltips.
Will use same format as for labels, if not set.
250 inherited items
adapterType
Adapter<this,ISpriteAdapters>Inherited fromSpriteHolds Adapter.
More info: Adapters about Adapters
adjustLabelPrecisionType
booleanDefaulttrueInherited fromValueAxisSince 4.9.14By default the axis will adjust precision of all numbers to match number of decimals in all its labels, e.g.:
1.0,1.5,2.0.To disable set
adjustLabelPrecisiontofalse, to use whatever other precision or number format settings are set.IMPORTANT: This setting will be ignored if your number format uses modifiers, e.g.
"#a".alignType
AlignInherited fromSpriteControls horizontal alignment of the element.
This is used by parent
Containerwhen layouting its children.alwaysShowTooltipType
booleanDefaultfalseInherited fromSpriteSince 4.5.4Deprecated Use
showTooltipOn = "always"insteadDEPRECATION NOTICE: This setting is deprecated in favor of a more flexible setting:
showTooltipOn. Please useshowTooltipOn = "always"instead.Indicates if this element should display a tooltip permanently.
Useful, if you want to show permanent tooltips on some items.
animationsType
Array<Animation>Inherited fromSpriteReturns a list elements's animations currently being played.
If the list has not been initialized it is created.
appearedType
booleanDefaultfalseInherited fromSpriteA read-only flag which indicates if a sprite has completed its initial animation (if
showOnInit = true).In case
showOnInit = false,appearedis set totrueon init.applyOnClonesType
booleanDefaultfalseInherited fromSpriteSpecifies if property changes on this object should be propagated to the objects cloned from this object.
This setting affects property changes after cloning, since at the moment of cloning all of properties from source object are copied to the clone anyway.
autoDisposeType
booleanDefaulttrueInherited fromAxisSpecifies if axis should be automatically disposed when removing from chart's axis list.
axisBreaksType
SortedListTemplate<AxisBreak>Inherited fromAxisA list of axis breaks on this Axis.
axisFullLengthType
numberInherited fromAxisFull length of the axis, in pixels.
axisLengthType
numberInherited fromAxisActual axis length in pixels.
axisRangesType
ListTemplate<AxisDataItem>Inherited fromAxisA list of axis ranges for this Axis.
backgroundType
SpriteInherited fromContainerAn element to use as container background.
baseSpriteType
$type.Optional<Sprite>Inherited fromSpriteReturns the mail chart object that this element belongs to.
In most cases it will mean the chart object.
Can be used to retrieve chart object in various events and adapters.
chart.seriesContainer.events.on("hit", function(ev) { console.log(ev.target.baseSprite); });chart.seriesContainer.events.on("hit", function(ev) { console.log(ev.target.baseSprite); });{ // ... "seriesContainer": { "events": { "hit": function(ev) { console.log(ev.target.baseSprite); } } } }calculateTotalsType
booleanDefaultfalseInherited fromValueAxisAs calculating totals is expensive operation and not often needed, we don't do it by default.
In case you use
totalPercentortotalin your charts, this must be set totrue.More info: Anatomy of an XY Chart: 100 stacks For using
calculateTotalsfor 100% stacked series.More info: Formatting Strings: placeholders for numeric values For using
calculateTotalsin labels.chartType
XYChartInherited fromValueAxisA reference to chart the axis is for.
childrenType
List<Sprite>Inherited fromContainerReturns a list of the child
Spriteelements contained in this Container.clickableType
booleanInherited fromSpriteIndicates if the element is clickable.
Some type of the elements, like buttons are clickable by default.
Most of the elements are not clickable by default.
Use
hit,doublehit,up,down,toggledevents to watch for respective click/touch actions.clonedFromType
$type.Optional<this>Inherited fromBaseObjectReference to the original object this object was cloned from. We need to keep this so we can disassociate it from source object when this object is disposed.
cloneTooltipType
booleanDefaulttrueInherited fromSpriteWhen cloning a sprite, if the template has it's own tooltip assigned, this tooltip is also cloned by default.
This is not good for cpu and sometimes you might only need one single tooltip for all clones. Set this to false in order not to clone tooltip.
configType
objectInherited fromBaseObjectUse this property to set JSON-based config. When set, triggers processing routine, which will go through all properties, and try to apply values, create instances, etc.
Use this with caution, as it is a time-consuming process. It's used for initialchart setup only, not routine operations.
configFieldType
$type.Optional<string>Inherited fromSpriteA field in data context of element's
dataItemthat holds config values for this element.This is a very powerful feature, allowing changing virtually any setting, including those for element's children, for the element via data.
Example data:
{ "value": 100, "config": { "fill": "#F00" } }If you set element's
configField = "config", the element for this specific data point will have a red fill.contentAlignType
AlignInherited fromContainerHorizontal alignment of the elements for the horizontal Container.
This is used when Container is larger than the height of all its children.
contentHeightType
numberInherited fromContainerHeight (in pixels) of the actual content in the Container.
Please note that it might be bigger than height of the Container.
contentValignType
VerticalAlignInherited fromContainerVertical alignment of the elements for the vertical Container.
This is used when Container is larger than the height of all its children.
contentWidthType
numberInherited fromContainerWidth (in pixels) of the actual content in the Container.
Please note that it might be bigger than width of the Container.
contextMenuDisabledType
booleanDefaultfalseInherited fromSpriteShould element prevent context menu to be displayed, e.g. when right-clicked?
currentDataSetIdType
stringInherited fromComponentSince 4.7.0Returns id of the currently used data set, or
undefinedif main data set is in use.cursorDownStyleType
Array<IStyleProperty>Inherited fromSpriteA shortcut to setting mouse cursor when button is pressed down.
Example:
series.slices.template.cursorDownStyle = am4core.MouseCursorStyle.grabbing;series.slices.template.cursorDownStyle = am4core.MouseCursorStyle.grabbing;{ // ... "series": { // ... "slices": { "cursorDownStyle": "grabbing" } } }cursorOptionsType
ICursorOptionsInherited fromSpriteReturns element's cursor options.
Cursor options usually define cursor style for various states of the hovered element.
Elements inherit
cursorOptionsfrom their parents if they don't have them set explicitly.More info:
ICursorOptionsfor a list of available optionscursorOverStyleType
Array<IStyleProperty>Inherited fromSpriteA shortcut to setting mouse cursor on hover.
Example:
series.slices.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;series.slices.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;{ // ... "series": { // ... "slices": { "cursorOverStyle": "pointer" } } }cursorTooltipEnabledType
booleanInherited fromAxisIndicates if axis should display a tooltip for chart's cursor.
dataType
any[]Inherited fromComponentSets source (raw) data for the element. The "data" is always an
Arrayof objects.Returns element's source (raw) data.
IMPORTANT: The order of data items in
dataarray is important as it might affect chart look and behavior. More details.dataFieldsType
IComponentDataFieldsInherited fromComponentHolds data field names.
Data fields define connection beween
DataItemand actual properties in raw data.dataItemType
$type.OptionalInherited fromSpriteA
DataItemto use as element's data source.dataItemsType
OrderedListTemplate<DataItem>Inherited fromComponentReturns a list of source
DataItemobjects currently used in the chart.dataProviderType
$type.Optional<Component>Inherited fromComponentA
Componentwhich provides data to this component (like Chart provides data for Series).dataSourceType
DataSourceInherited fromComponentA
DataSourceto be used for loading Component's data.More info: Loading External Data for more on loading external data
dateFormatterType
DateFormatterInherited fromSpriteA
DateFormatterinstance.This is used to format dates, e.g. on a date axes, balloons, etc.
chart.dateFormatter.dateFormat = "yyyy-MM-dd";chart.dateFormatter.dateFormat = "yyyy-MM-dd";{ // ... "dateFormatter": { "dateFormat": "yyyy-MM-dd" } }You can set a separate instance of formatter for each individual element. However that would be unnecessary overhead as all elements would automatically inherit formatter from their parents, all the way up to the chart itself.
More info:
DateFormatteron dates formattingdefaultStateType
SpriteState<ISpriteProperties,ISpriteAdapters>Inherited fromSpriteReturns a
SpriteStateobject for "default" state.This is a shortcut to
this.states.getKey("default").disabledType
booleanInherited fromSpriteControls if element is disabled.
A disabled element is hidden, and is removed from any processing, layout calculations, and generally treated as if it does not exist.
The element itself is not destroyed, though. Setting this back to
false, will "resurrect" the element.domType
SVGSVGElementInherited fromSpriteReturns DOM element reference associated with this element.
draggableType
booleanInherited fromSpriteControls if the element is draggable.
dummyDataType
anyInherited fromSpriteA property which you can use to store any data you want.
durationFormatterType
DurationFormatterInherited fromSpriteA
DurationFormatterinstance.This is used to format numbers as durations, e.g. on a value axes.
You can set a separate instance of formatter for each individual element. However that would be unnecessary overhead as all elements would automatically inherit formatter from their parents, all the way up to the chart itself.
More info:
DurationFormatteron durationsdxType
numberInherited fromSpriteA horizontal offset for the element in pixels.
Can be negative value for offset to the left.
dyType
numberInherited fromSpriteA vertical offset for the element in pixels.
Can be negative value for offset upwards.
elementType
Optional<AMElement>Inherited fromSpriteThe main element for this Sprite, usually an SVG
<g>.All other sub-elements are created in it.
endType
numberInherited fromComponentEnd of the current data range (zoom).
These are relative values from 0 (beginning) to 1 (end).
endLocationType
numberInherited fromAxisAxis end location. Works on Date/Category axis, doesn't work on Value axis.
0 - None of the last cell is shown. (don't do that)
0.5 - Half of the last cell is shown.
1 - Full last cell is shown.
eventsType
SpriteEventDispatcher<AMEvent<this,ISpriteEvents>>Inherited fromSpriteEvent dispatcher.
More info: Event Listeners about Events
exportableType
booleanDefaulttrueInherited fromSpriteIf set to
falsethis element will be omitted when exporting the chart to an image.exportingType
ExportInherited fromSpriteAn
Exportinstance.Used to access API of the chart export functionality.
If
exportingis not set, the element inheritsExportinstance from its parents.Upon request, if no parent has such instance, a new one is created, using default settings, what in most cases is just enough.
More info: Exporting Charts about exporting
extraMaxType
numberInherited fromValueAxisAllows relatively adjusting maximum value of the axis' scale.
The value is relative to the actual range of values currently displayed on the axis.
E.g.: 0.5 will mean half of the current range. If we have axis displaying from 100 to 200, we will now have axis displaying from 100 to 250 because we asked to expand maximum value by 50% (0.5).
NOTE: this setting is not compatible with
strictMinMax.extraMinType
numberInherited fromValueAxisAllows relatively adjusting minimum value of the axis' scale.
The value is relative to the actual range of values currently displayed on the axis.
E.g.: 0.5 will mean half of the current range. If we have axis displaying from 100 to 200, we will now have axis displaying from 50 to 200 because we asked to expand minimum value by 50% (0.5).
NOTE: this setting is not compatible with
strictMinMax.extraTooltipPrecisionType
numberDefault0Inherited fromValueAxisSince 4.8.3This setting allows using bigger precision for numbers displayed in axis tooltip.
Please note that this setting indicates additional decimal places to automatically-calculated axis number precision.
So if your axis displays numbers like 0.1, 0.2, etc. (one decimal place), and you set
extraTooltipPrecision = 1, tooltips will display numbers like 0.12, 0.25, etc. (two decimal places).fillType
$type.Optional<Color|Pattern|LinearGradient|RadialGradient>Inherited fromSpriteElement's fill color or pattern.
fillModifierType
ColorModifierInherited fromSpriteColorModifierthat can be used to modify color and pattern of the element's fill, e.g. create gradients.fillOpacityType
numberInherited fromSpriteElement's fill opacity.
Opacity ranges from 0 (fully transparent) to 1 (fully opaque).
filtersType
List<Filter>Inherited fromSpriteReturns list of SVG filters (effects) applied to element. If the filter list is not yet initilized, creates and returns an empty one.
Note, not all filters combine well with one another. We recommend using one filter per sprite.
fixedWidthGridType
booleanDefaultfalseInherited fromContainerControls if the grid of the Container should use fixed width. Fixed width grid will divide available space to all its columns/rows equally, without adapting to actual child sizes or size requirements.
focusableType
Optional<boolean>Defaultundefined (auto)Inherited fromSpriteControls if the element can gain focus.
Focusable element will be selectable via TAB key.
Please note, clicking it with a mouse or touching will not add focus to it.
Focused element will show a system-specific highlight, which might ruin the overal look. This is why we don't focus element on click/touch.
A default setting varies for different elements. By default all elements are not focusable, except certain items like buttons, legend items, etc.
focusedElementType
$type.Optional<Sprite>Inherited fromContainerSince 4.9.29A reference to a currently focused item.
fontFamilyType
stringInherited fromContainerFont family to be used for the text.
Parts of the text may override this setting using in-line formatting.
fontSizeType
anyInherited fromContainerFont size to be used for the text. The size can either be numeric, in pixels, or other measurements.
Parts of the text may override this setting using in-line formatting.
fontWeightType
FontWeightInherited fromContainerFont weight to use for text.
Parts of the text may override this setting using in-line formatting.
ghostLabelType
AxisLabelInherited fromAxisGhost label is used to prevent chart shrinking/expanding when zooming or when data is invalidated. You can set custom text on it so that it would be bigger/smaller,
globalScaleType
numberInherited fromSpriteReturns element's current "global" scale.
Scale values accumulate over hierarchy of elements.
E.g. if a
Containerhasscale = 2and it's child has ascale = 2, the child'sglobalScalewill be 4. (a multitude of2 x 2)groupType
GroupInherited fromSpriteHolds Sprite's main SVG group (
<g>) element. Other Sprite's elements are all placed in this group.hasFocusedType
booleanDefaultfalseInherited fromContainerIndicates if this container contains any focused elements, including itself.
heightType
number|PercentInherited fromSpriteElement's absolute or relative height.
The height can either be absolute, set in numeric pixels, or relative, set in
Percent.Relative height will be calculated using closest measured ancestor
Container.NOTE:
heightis an accessor, which allows setting height in pixels or percent. It is a sort of a "shortcut" for the users. Actual renderer does not ever use it. It uses eitherpixelHeightorpercentHeight, so if you need to add an adapter for height add it for either of the two properties - whichever suits your requirements.Type
booleanInherited fromSpriteIf a sprite has
showOnInit = true, it will animate from "hidden" to "default" state when initialized. To prevent this but keepshowOnInit = true, you can setsprite.hidden = true.Type
SpriteState<ISpriteProperties,ISpriteAdapters>Inherited fromSpriteReturns a
SpriteStateobject for "hidden" state.This is a shortcut to
this.states.getKey("hidden").hideTooltipWhileZoomingType
booleanDefaulttrueInherited fromAxisSince 4.7.16Indicates if axis' tooltip should be hidden while axis range is animating (zooming)
hitOptionsType
IHitOptionsInherited fromSpriteReturns Sprite's click (hit) options.
Click (hit) options control things like double-click, timeouts, etc.
More info:
IHitOptionsfor available options.horizontalCenterType
HorizontalCenterInherited fromSpriteControls which part of the element to treat as a horizontal center.
The setting will be used when positioning, resizing and rotating the element.
hoverableType
booleanDefaultfalseInherited fromSpriteControls if the element is hoverable (hover events are registered).
Use
overandoutevents, to watch for those respective actions.hoverOnFocusType
booleanDefaultfalseInherited fromSpriteIf set to
true, this element will also trigger"over"event with all the related consequences, like "hover" state being applied and tooltip being shown.Useful as an accessibility feature to display rollover tooltips on items selected via keyboard.
hoverOptionsType
IHoverOptionsInherited fromSpriteReturns Sprite's hover options.
More info:
IHoverOptionsfor available options.htmlContainerType
$type.Optional<HTMLElement>Inherited fromSpriteAn HTML element to be used when placing wrapper element (
<div>) for the whole chart.This is the same for all elements within the same chart.
idType
stringInherited fromSpriteElement's user-defined ID.
Will throw an Error if there already is an object with the same ID.
Please note that above check will be performed withing the scope of the current chart instance. It will not do checks across other chart instances or in globally in DOM.
Make sure the IDs are unique.
includeRangesInMinMaxType
booleanDefaultfalseInherited fromValueAxisSince 4.4.9If set to
true, values of axis ranges will be included when calculating range of values / scale of theValueAxis.inertType
booleanDefaultfalseInherited fromSpriteControls if the element should use inertia when interacted with.
"Inert" element, when dragged and released, will carry the momentum of the movement, and will continue moving in the same drag direction, gradually reducing in speed until finally stops.
inertiaOptionsType
Dictionary<InertiaTypes,IInertiaOptions>Inherited fromSpriteReturns element's options to be used for inertia. This setting is inheritable, meaning that if not set directly, it will search in all its ascendants until very top.
Inertia is used only if element's
inertis set totrue."Inert" element, when dragged and released, will carry the momentum of the movement, and will continue moving in the same drag direction, gradually reducing in speed until finally stops.
Check
IInertiaOptionsfor how you tweak inertia animations.initedType
booleanInherited fromSpriteReturns
trueif Sprite has already finished initializing.innerHeightType
numberInherited fromSpriteReturns element's measured inner height in pixels.
Inner height is actual available space for content, e.g. element's height minus vertical padding.
innerWidthType
numberInherited fromSpriteReturns element's measured inner width in pixels.
Inner width is actual available space for content, e.g. element's width minus horizontal padding.
interactionsType
InteractionObjectInherited fromSpriteReturns (creates if necessary) an
InteractionObjectassociated with this element.InteractionObjectis used to attach all kinds of user-interactions to the element, e.g. click/touch, dragging, hovering, and similar events.interactionsEnabledType
booleanInherited fromSpriteSetting this to
falsewill effectively disable all interactivity on the element.interpolationDurationType
numberDefault0Inherited fromComponentIf set to a non-zero number the element will "animate" data values of its children.
This will happen on first load and whenever data values change.
Enabling interpolation will mean that elements will transit smoothly into new values rather than updating instantly.
More info: Animations about animations
interpolationEasingType (value:
number) =>numberDefaultcubicOutInherited fromComponentAn easing function to use for interpolating values when transiting from one source value to another.
More info: Animations about animations
More info:
EaseisActiveType
booleanInherited fromSpriteIndicates if this element is currently active (toggled on) or not (toggled off).
isDownType
booleanInherited fromSpriteIndicates if this element has any pointers (mouse or touch) pressing down on it.
isDraggedType
booleanInherited fromSpriteReturns indicator if this element is being dragged at the moment.
isFocusedType
booleanInherited fromSpriteIndicates if this element is focused (possibly by tab navigation).
isHiddenType
booleanInherited fromSpriteIf
sprite.hide()is called, we set isHidden to true when sprite is hidden.This was added becaus hidden state might have visibility set to true and so there would not be possible to find out if a sprite is technically hidden or not.
isHidingType
booleanDefaultfalseInherited fromSpriteIf
sprite.hide()is called and we have "hidden" state andtransitionDuration > 0, we setisHidingflag totruein order to avoid restarting animations in casehide()method is called multiple times.isHoverType
booleanInherited fromSpriteIndicates if this element has a mouse pointer currently hovering over it, or if it has any touch pointers pressed on it.
You can force element to be "hovered" manually, by setting this property to
true.isResizedType
booleanInherited fromSpriteReturns indicator if this element is being resized at the moment.
isShowingType
booleanDefaultfalseInherited fromSpriteThis property indicates if Sprite is currently being revealed from hidden state. This is used to prevent multiple calls to
sprite.show()to restart reveal animation. (if enabled)keepSelectionType
booleanDefaultfalseInherited fromValueAxisSince 4.1.1Indicates if a current selection (zoom) should be kept across data updates.
If your axis is zoomed while chart's data is updated, the axis will try to retain the same start and end values.
You can also use this to initially pre-zoom axis:
axis.keepSelection = true; axis.start = 0.5; axis.end = 0.7;axis.keepSelection = true; axis.start = 0.5; axis.end = 0.7;{ "xAxes": [{ // ... "keepSelection": true, "start": 0.5, "end": 0.7 }] }The above will start the chart zoomed from the middle of the actual scope to 70%.
keyboardOptionsType
IKeyboardOptionsInherited fromSpriteReturns elements keyboard options.
languageType
LanguageInherited fromSpriteA
Languageinstance to use for translations.Normally it is enough to set language for the top-most element - chart.
All other element child elements will automatically re-use that language object.
layoutType
ContainerLayoutDefault"absolute"Inherited fromContainerContainer layout.
Options: "absolute" (default), "vertical", "horizontal", "grid", "none". "none" is quite the same as "absolute" - the objects will be positioned at their x, y coordinates, the difference is that with "absolute" you can still use align/valign for children and with "none" you can not.
Use "none" as much as you can as it's most cpu-saving layout.
layoutInvalidType
booleanDefaultfalseInherited fromContainerlogarithmicType
booleanInherited fromValueAxisIndicates if this axis should use a logarithmic scale.
Please note that logarithmic axis can only accommodate values bigger than zero.
Having zero or negative values will result in error and failure of the whole chart.
mainDataSetType
OrderedListTemplate<DataItem>Inherited fromComponentSince 4.7.0Returns reference to "main" data set (unaggregated data as it was supplied in
data).mapType
Dictionary<string,any>Inherited fromSpriteReturns a
Dictionarywhich maps object ids with their respective objects.Can be used to retrieve any object by id, e.g.:
console.log(mySprite.map.getKey("myid"));console.log(mySprite.map.getKey("myid"));marginBottomType
number|PercentInherited fromSpriteBottom margin - absolute (px) or relative (
Percent).marginLeftType
number|PercentInherited fromSpriteLeft margin - absolute (px) or relative (
Percent).marginRightType
number|PercentInherited fromSpriteRight margin - absolute (px) or relative (
Percent).marginTopType
number|PercentInherited fromSpriteTop margin - absolute (px) or relative (
Percent).maxType
number|undefinedInherited fromValueAxisA maximum value for the axis scale.
This value might be auto-adjusted by the Axis in order to accomodate the grid nicely, i.e. plot area is divided by grid in nice equal cells.
The above might be overridden by
strictMinMaxwhich will force exact user-defined min and max values to be used for scale.maxColumnsType
Optional<number>Inherited fromContainerMaximum number of columns (when using
"grid"layout).maxDefinedType
numberInherited fromValueAxisMax value as defined by user's code, not auto-calculated.
maxHeightType
numberInherited fromSpriteMaximum allowed height for the element in pixels.
maxPrecisionType
numberInherited fromValueAxisMaximum number of decimals to allow when placing grid lines and labels on axis.
Set it to
0(zero) to force integer-only axis labels.maxWidthType
numberInherited fromSpriteMaximum allowed width for the element in pixels.
maxZoomCountType
numberDefault0 (no limit)Inherited fromComponentSince 4.6.2Use this for
CategoryAxisorDateAxis.Limits how many categories or base intervals can be shown at the same time.
If there are more items in the chart, the chart will auto-zoom.
maxZoomedType
numberInherited fromValueAxisA biggest value in axis scale within current zoom.
maxZoomFactorType
numberInherited fromComponentMax available
zoomFactor.The element will not allow zoom to occur beyond this factor.
DateAxisandCategoryAxiscalculate this atutomatically so that category axis could be zoomed to one category and date axis allows to be zoomed up to one base interval.In case you want to restrict category or date axis to be zoomed to more than one category or more than one base interval, use
minZoomCountproperty (set it to> 1).Default value of
ValueAxis'smaxZoomFactoris1000.Feel free to modify it to allow bigger zoom or to restrict zooming.
measuredHeightType
numberInherited fromSpriteReturns elements's measured height in pixels.
A measured height is actual height of contents plus
paddingTopandpaddingBottom, relative to sprite parent, meaning that rotation and scale taken into account.measuredWidthType
numberInherited fromSpriteReturns element's measured width in pixels.
A measured width is actual width of contents plus
paddingRightand*paddingLeft, relative to sprite parent, meaning that rotation and scale is taken into account.minType
number|undefinedInherited fromValueAxisA minimum value for the axis scale.
This value might be auto-adjusted by the Axis in order to accomodate the grid nicely, i.e. plot area is divided by grid in nice equal cells.
The above might be overridden by
strictMinMaxwhich will force exact user-defined min and max values to be used for scale.minDefinedType
numberInherited fromValueAxisMin value as defined by user's code, not auto-calculated.
minHeightType
Optional<number>Inherited fromContainerMinimum height (px) for the Container. A container will not auto-shrink beyond this value, even if child elements are smaller.
minWidthType
Optional<number>Inherited fromContainerMinimum width (px) for the Container. A container will not auto-shrink beyond this value, even if child elements are smaller.
minZoomCountType
numberDefault1Inherited fromComponentUse this for
CategoryAxisorDateAxis.Allows restricting zoom in beyond certain number of categories or base intervals.
minZoomedType
numberInherited fromValueAxisA smallest value in axis scale within current zoom.
modalType
Optional<Modal>Inherited fromSpriteReturns a
Modalinstance, associated with this chart.(elements top parent)Accessing modal does not make it appear. To make a modal appear, use
showModal()method.More info:
Modalrmation about using Modal windowsmouseOptionsType
IMouseOptionsInherited fromSpriteMouse options.
Enables controlling options related to the mouse, for example sensitivity of its mouse wheel.
E.g. the below will reduce chart's wheel-zoom speed to half its default speed:
chart.plotContainer.mouseOptions.sensitivity = 0.5;chart.plotContainer.mouseOptions.sensitivity = 0.5;{ // ... "plotContainer": { "mouseOptions": { "sensitivity": 0.5 } } }nonScalingType
booleanInherited fromSpriteControls if element should keep constant size and not scale even if there is space available, or it does not fit.
nonScalingStrokeType
booleanInherited fromSpriteControls if the element's stroke (outline) should remain keep constant thicnkess and do not scale when the whole element is resized.
numberFormatterType
NumberFormatterInherited fromSpriteA
NumberFormatterinstance.This is used to format numbers.
chart.numberFormatter.numberFormat = "#,###.#####";chart.numberFormatter.numberFormat = "#,###.#####";{ // ... "numberFormatter": { "numberFormat": "#,###.#####" } }You can set a separate instance of formatter for each individual element. However that would be unnecessary overhead as all elements would automatically inherit formatter from their parents, all the way up to the chart itself.
More info:
NumberFormatteron formatting numbersopacityType
numberInherited fromSpriteElement's opacity.
Opacity setting can range from 0 (fully transparent) to 1 (fully opaque).
ATTENTION: It is highly not recommended to use
opacitydirectly on the element. The charts useopacityto hide/show elements, so your setting might be lost if element is hidden and then later shown.Instead use methods
hide()andshow()to completely toggle off and on the element.Or, use properties
fillOpacityandstrokeOpacity, if you need to make the element semi-transparent.outerHeightType
numberInherited fromSpriteReturns element's measured height plus its top and bottom margins in pixels.
outerWidthType
numberInherited fromSpriteReturns element's measured width plus its left and right margins in pixels.
paddingBottomType
number|PercentInherited fromSpriteBottom padding - absolute (px) or relative (
Percent).paddingLeftType
number|PercentInherited fromSpriteLeft padding - absolute (px) or relative (
Percent).paddingRightType
number|PercentInherited fromSpriteRight padding - absolute (px) or relative (
Percent).paddingTopType
number|PercentInherited fromSpriteTop padding - absolute (px) or relative (
Percent).parentType
Optional<Container>Inherited fromSpriteElements' parent
Container.parsingStepDurationType
numberDefault50Inherited fromComponentA duration (ms) of each data parsing step. A Component parses its data in chunks in order to avoid completely freezing the machine when large data sets are used. This setting will control how many milliseconds should pass when parsing data until parser stops for a brief moment to let other processes catch up.
pathType
stringInherited fromSpritePath of Sprite element
pixelHeightType
numberInherited fromSpriteReturns element's height in pixels. For actual height use measuredHeight property.
pixelMarginBottomType
numberInherited fromSpriteReturns current bottom margin in pixels.
pixelMarginLeftType
numberInherited fromSpriteReturns current left margin in pixels.
pixelMarginRightType
numberInherited fromSpriteReturns current right margin in pixels.
pixelMarginTopType
numberInherited fromSpriteReturns current top margin in pixels.
pixelPaddingBottomType
numberInherited fromSpriteReturns current bottom padding in pixels.
pixelPaddingLeftType
numberInherited fromSpriteReturns current left padding in pixels.
pixelPaddingRightType
numberInherited fromSpriteReturns current right padding in pixels.
pixelPaddingTopType
numberInherited fromSpriteReturns current top padding in pixels.
pixelPerfectType
booleanInherited fromSpriteControls if SVG vectors should be drawn with "pixel" precision, producing perfectly crisp lines on retina displays.
Setting this to
truemight improve visual quality, but may have a negative effect on performance.Different elements use different default setting for
pixelPerfect.We recommend leaving this at their default settings, unless there's a specific need.
pixelWidthType
numberInherited fromSpriteReturns element's width in pixels, if width was set. For actual width use measuredWidth property.
pixelXType
numberInherited fromSpriteReturns element's current absolute X coordinate in pixels.
pixelYType
numberInherited fromSpriteReturns element's current absolute Y coordinate in pixels.
pluginsType
List<IPlugin>Inherited fromSpriteSince 4.2.2A list of plugins (objects that implement
IPlugininterface) attached to this object.popupsType
Optional<ListTemplate<Popup>>Inherited fromSpriteA list of popups for this chart.
preloaderType
$type.Optional<Preloader>Inherited fromContainerA
Preloaderinstance to be used when Container is busy.propertiesType
ISpritePropertiesInherited fromSpriteHolds values for Sprite's properties.
propertyFieldsType
objectInherited fromSpriteA collection of key/value pairs that can be used to bind specific Sprite properties to
DataItem.For example:
fillproperty can be bound tomyCustomColorfield in DataItem. The Sprite will automatically get the value forfillfrom its DataItem.Can be set for each
SpriteStateindividually to override default bindings.More info:
SpriteStaterangeChangeDurationType
numberDefault0Inherited fromComponentWhenever selected scope changes (chart is zoomed or panned), for example by interaction from a Scrollbar, or API, a chart needs to reposition its contents.
rangeChangeDurationinfluences how this is performed.If set to zero (0), the change will happen instantenously.
If set to non-zero value, the chart will gradually animate into new position for the set amount of milliseconds.
More info: Animations about animations
rangeChangeEasingType (value:
number) =>numberDefault$ease.cubicOutInherited fromComponentAn easing function to use for range change animation.
More info:
EaseMore info: Animations about animations
readerDescriptionType
stringInherited fromSpriteScreen reader description of the element.
readerHiddenType
booleanInherited fromSpriteControls if element should be hidden from screen readers.
More info: https://www.w3.org/TR/wai-aria-1.1/#aria-hiddenrmation
readerOrientationType
stringInherited fromSpriteSince 4.7.16Orientation of the element.
readerTitleType
stringInherited fromSpriteScreen reader title of the element.
readerValueNowType
stringInherited fromSpriteSince 4.7.16Current value of the element.
readerValueTextType
stringInherited fromSpriteSince 4.7.16Text representation of the current value of the element.
realFillType
Color|Pattern|LinearGradient|RadialGradientInherited fromSpriteA reference to a real fill object. Sometimes might be useful to modify gradient (when fill is color but we have FillModifier).
realStrokeType
Color|Pattern|LinearGradient|RadialGradientInherited fromSpriteA reference to a real stroke object. Sometimes might be useful to modify gradient (when fill is color but we have a FillModifier).
relativeMarginBottomType
numberInherited fromSpriteReturns current relative bottom margin.
relativeMarginLeftType
numberInherited fromSpriteReturns current relative left margin.
relativeMarginRightType
numberInherited fromSpriteReturns current relative right margin.
relativeMarginTopType
numberInherited fromSpriteReturns current relative top margin.
relativePaddingBottomType
numberInherited fromSpriteReturns current relative bottom padding.
relativePaddingLeftType
numberInherited fromSpriteReturns current relative left padding.
relativePaddingRightType
numberInherited fromSpriteReturns current relative right padding.
relativePaddingTopType
numberInherited fromSpriteReturns current relative top padding.
relativeXType
numberInherited fromSpriteReturns element's current relative X coordinate in
Percent.relativeYType
numberInherited fromSpriteReturns element's current relative Y coordinate in
Percent.rendererType
TInherited fromAxisAn
AxisRendererto be used to render this Axis.Please note that most of the settings, related to Axis' appearance are set via its renderer. Not directly on the Axis.
E.g.:
axis.renderer.inside = true; axis.renderer.minLabelPosition = 0.1; axis.renderer.maxLabelPosition = 0.9;axis.renderer.inside = true; axis.renderer.minLabelPosition = 0.1; axis.renderer.maxLabelPosition = 0.9;More info: Axes
resizableType
booleanInherited fromSpriteIndicates if this element is resizable.
Enabling resize will turn on various interactions on the element. Their actual functionality will depend on other properties.
If the element also
draggable, resize will only happen with two points of contact on a touch device.If the element is not draggable, resize can be performed with just one point of contact, touch or mouse.
Will invoke
resizeevent every time the size of the element changes.responsiveType
ResponsiveInherited fromComponentA
Responsiveinstance to be used when applying conditional property values.NOTE: Responsive features are currently in development and may not work as expected, if at all.
reverseOrderType
Optional<boolean>DefaultfalseInherited fromContainerIf set to
true, the children of the container will be drawn in reverse order.roleType
RolesInherited fromSpriteA WAI-ARIA role for the element.
More info: https://www.w3.org/TR/wai-aria-1.1/#role_definitionsrmation on WAI-ARIA roles
rollOutDelayType
numberDefault0Inherited fromSpriteTime in milliseconds after which rollout event happens when user rolls-out of the sprite. This helps to avoid flickering in some cases.
rotationType
numberInherited fromSpriteRotation of the element in degrees. (0-360)Note: For convenience purposes, negative values (for counter-clockwise rotation) and values exceeding 360 can also be used.
rtlType
booleanInherited fromSpriteAn RTL (right-to-left) setting.
RTL may affect alignment, text, and other visual properties.
If you set this on a top-level chart object, it will be used for all child elements, e.g. labels, unless they have their own
rtlsetting set directly on them.scaleType
numberInherited fromSpriteScale of the element.
The scale is set from 0 (element reduced to nothing) to 1 (default size).
2 will mean element is increased twice.
0.5 - reduced by 50%.
Etc.
sequencedInterpolationType
booleanDefaulttrueInherited fromComponentIndicates whether transition between data item's values should start and play out all at once, or with a small delay (as defined by
sequencedInterpolationDelay) for each subsequent data item.More info: Animations about animations
sequencedInterpolationDelayType
numberDefault0Inherited fromComponentA delay (ms) to wait between animating each subsequent data item's interpolation animation.
Relative only if
sequencedInterpolation = true.More info: Animations about animations
seriesType
List<XYSeries>Inherited fromValueAxisA list of Series that are using this Axis.
setStateOnChildrenType
booleanDefaultfalseInherited fromContainerSpecifies if, when state is applied on this container, the same state should be applied to container's children as well as
background.setStateOnSpritesType
Sprite[]Default[]Inherited fromContainerAn array of references to elements the state should be set, when it is set on this element.
shapeRenderingType
ShapeRenderingDefault"auto"Inherited fromSpriteAn SVG-specific
shape-renderingvalue.shape-renderingcontrols how vector graphics are drawn and rendered.More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-renderingrmation about
shape-renderingshouldCloneType
booleanDefaulttrueInherited fromSpriteIndicates whether this sprite should be cloned when cloning its parent container. We set this to
falsein those cases when a sprite is created by the class, so that when cloning a duplicate sprite would not appear.showOnInitType
booleanInherited fromSpriteIf this is set to
true, Sprite, when inited will be instantly hidden ("hidden" state applied) and then shown ("default" state applied).If your "default" state's
transitionDuration > 0this will result in initial animation from "hidden" state to "default" state.If you need a Sprite which has
showOnInit = truenot to be shown initially, setsprite.hidden = true. Settingsprite.visible = falsewill not prevent the animation and the sprite will be shown.showSystemTooltipType
booleanInherited fromSpriteIndicates whether the element should attempt to construct itself in a way so that system tooltip is shown if its
readerTitleis set.showTooltipOnType
"hover"|"hit"|"always"Default"hover"Inherited fromSpriteSince 4.7.9Indicates when tooltip needs to be shown on this element:
"hover"(default) - Tooltip will be shown when element is hovered on."hit"- Tooltip will be shown when element is clicked/tapped. Tooltip will be hidden when clicked/tapped anywhere else."always"- Tooltip will be shown on the element permanently.
For example, if you would like to show tooltips on all of the columns of a
ColumnSeries:series.columns.template.showTooltipOn = "always";series.columns.template.showTooltipOn = "always";{ // ... "series": [{ // ... "columns": { "showTooltipOn": "always" } }] }It can even be set to display on a selected columns via
propertyFields:series.columns.template.propertyFields.showTooltipOn = "tooltip";series.columns.template.propertyFields.showTooltipOn = "tooltip";{ // ... "series": [{ // ... "columns": { "propertyFields": { "showTooltipOn": "tooltip" } } }] }skipRangeEventType
booleanDefaultfalseInherited fromComponentIf set to
true, changing data range in element will not triggerdaterangechangedevent.startType
numberInherited fromComponentStart of the current data range (zoom).
These are relative values from 0 (beginning) to 1 (end).
startLocationType
numberInherited fromAxisAxis start location. Works on Date/Category axis, doesn't work on Value axis.
0 - Full first cell is shown.
0.5 - Half of first cell is shown.
1 - None of the first cell is visible. (you probably don't want that)
statesType
DictionaryTemplate<string,SpriteState<ISpriteProperties,ISpriteAdapters>>Inherited fromSpriteReturns a collection of element's available
SpriteStateentries.More info:
SpriteStatestepType
numberInherited fromValueAxisCurrent calculated delta in values between two adjacent grid lines (step).
This is a read-only value and cannot be used to set actual step.
More info: Positioning Axis Elements: setting the density of the the grid labels For more information about modifying density of labels
strictMinMaxType
booleanDefaultfalseInherited fromValueAxisIndicates whether to blindly use exact
minandmaxvalues set by user when generating Axis scale.If not set, the Axis might slightly adjust those values to accomodate a better looking grid.
NOTE: if
minandmaxare not set, settingstrictMinMaxtotruewill result in fixing the scale of the axis to actual lowest and highest values in the series within currently selected scope.strokeType
Color|Pattern|LinearGradient|RadialGradientInherited fromSpriteElement's stroke (outline) color or pattern.
strokeDasharrayType
stringInherited fromSpriteA
stroke-dasharrayfor the stroke (outline)."Dasharray" allows setting rules to make lines dashed, dotted, etc.
More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray on
stroke-dasharraystrokeDashoffsetType
numberInherited fromSpriteA
stroke-dashoffsetfor the stroke (outline)."Dashoffset" allows setting the start position of the dashes if
strokeDasharrayis used.More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset on
stroke-dashoffsetstrokeLinecapType
"butt"|"square"|"round"Inherited fromSpriteA
stroke-linecapto indicate how line ends are drawn.More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes#Stroke on
stroke-linecapstrokeLinejoinType
"miter"|"round"|"bevel"Inherited fromSpriteA
stroke-linejointo indicate how line ends are drawn.More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes#Stroke on
stroke-linejoinstrokeModifierType
ColorModifierInherited fromSpriteColorModifierthat can be used to modify color and pattern of the element's stroke (outline), e.g. create gradients.strokeOpacityType
numberInherited fromSpriteStroke (outline) opacity.
The values may range from 0 (fully transparent) to 1 (fully opaque).
strokeWidthType
numberInherited fromSpriteStroke (outline) thickness in pixels.
svgContainerType
$type.Optional<SVGContainer>Inherited fromSpriteHTML container (
<div>) which is used to place chart's<svg>element in.Sets HTML container to add SVG and other chart elements to.
swipeableType
booleanInherited fromSpriteControls if element is swipeable.
Swipable element will invoke
swipe,swipeleftandswiperightevents, when quick horizontal drag action is performed with either mouse or touch.Please note that combining swipe and drag is possible, however will incur a slight but noticeable delay in drag start.
swipeOptionsType
ISwipeOptionsInherited fromSpriteReturns element's swipe gesture options.
syncWithAxisType
ValueAxisInherited fromValueAxisSince 4.8.1Enables syncing of grid with another axis.
To enable, set to a reference of the other
ValueAxis. This axis will try to maintain its scale in such way that its grid matches target axis grid.IMPORTANT #1: At this stage it's an experimental feature. Use it at your own risk, as it may not work in 100% of the scenarios.
IMPORTANT #2:
syncWithAxisis not compatible withstrictMinMaxandsequencedInterpolationsettings.IMPORTANT #3:
syncWithAxisis not compatible with scrollbars. Make sure you do not add a scrollbar in the same direction as synced axes. For example, if you have vertical synced axes, do not addscrollbarYon your chart. It will create anomalies when used.IMPORTANT #4:
syncWithAxisis not compatible withXYCursorif it has itsbehaviorset to eitherzoomYorzoomXY.tabindexType
numberInherited fromSpriteSets or returns TAB index.
Tab index maintains the order in which focusable elements gain focus when TAB key is pressed.
Please note, tab index is not local to the chart. It affects the whole of the page, including non-SVG elements. Maintain extreme causion when setting tab indexes, as it affects the user experience for the whole web page.
tapTimeoutType
numberDefault3000Inherited fromContainerSince 4.4.0If
tapToActivateis used, this setting will determine how long the chart will stay in "active" mode.tapToActivateType
booleanDefaultfalseInherited fromContainerSince 4.4.0If set to
truethe chart's regular touch functionality will be suspended so that the whole page it is located in remains scrollable, even when swiping over the chart's body.User will need to tap the chart in order to activate its regular touch functionality.
The chart will remain "active" as long as user keeps interacting with the chart. After
tapTimeoutmilliseconds the chart will return to its "protected" mode.More info: Configuring touch interface For more information.
textDecorationType
TextDecorationInherited fromContainerA text decoration to use for text.
Parts of the text may override this setting using in-line formatting.
titleA reference to a
Labelelement which serves as a title to the axis.When axis is created it aleready has an element, so you can just modify it.
Or you can replace it with your own instance of
Label.togglableType
booleanInherited fromSpriteIndicates if element can be toggled on and off by subsequent clicks/taps.
Togglable element will alternate its
isActiveproperty betweentrueandfalsewith each click.toggleZoomOutButtonType
booleanDefaulttrueInherited fromAxisSince 4.6.2Normally, when axis is zoomed in, a zoom out button is shown by a chart, and vice versa: when axis is zoomed out completely, zoom out button is hidden.
Setting this to
falsewill disable this behavior. Zooming in our out this axis will not reveal or hide zoom out button.tooltipType
$type.Optional<Tooltip>Inherited fromSpriteA
Tooltipobject to be used when displayed rollover information for the element.tooltipColorSourceType
$type.Optional<Sprite>Inherited fromSpriteA
Spriteor sprite template to use when getting colors for tooltip. If a template is set, tooltip will look for a clone in tooltipDataItem.sprites. If no clone is found, then template colors will be used.More info:
TooltipMore info:
SpritetooltipDataItemType
DataItemInherited fromSpriteA
DataItemto use when populating content for the element'sTooltip.More info:
TooltipMore info:
DataItemtooltipHTMLType
stringInherited fromSpriteAn HTML template to be used to populate
Tooltipcontents.If element has
tooltipDataItemordataItemset, this will be parsed for any data values to be replaced with the values from respective data items.tooltipPositionType
"fixed"|"pointer"Inherited fromSpriteSpecifies if
Tooltipshould follow the mouse or touch pointer or stay at the fixed position.Position
tooltipTextType
stringInherited fromSpriteA text template to be used to populate Tooltip's contents.
If element has
tooltipDataItemordataItemset, this will be parsed for any data values to be replaced with the values from respective data items.This template will also be parsed for any special formatting tags.
More info:
TextFormattertooltipXType
number|PercentInherited fromSpriteX coordinate the
Tooltipshould be shown at.tooltipYType
number|PercentInherited fromSpriteY coordinate the
Tooltipshould be shown at.trackableType
booleanInherited fromSpriteIndicates if the element is trackable (mouse position over it is reported to event listeners).
Will invoke
trackevents whenever pointer (cursor) changes position while over element.Please note, touch devices will also invoke
trackevents when touch point is moved while holding down on a trackable element.treatZeroAsType
numberInherited fromValueAxisSince 4.9.34If set, zero values will be treated as this value.
It is useful if you need to use data with zero-values on a logarithmic axis scale.
uidType
stringInherited fromBaseObjectReturns object's internal unique ID.
urlType
$type.Optional<string>Inherited fromSpriteClick-through URL for this element.
If set, clicking/tapping this element will open the new URL in a target window/tab as set by
urlTarget.Please note that URL will be parsed by data placeholders in curly brackets, to be populated from data. E.g.:
series.columns.template.url = "https://www.google.com/search?q={category.urlEncode()}";series.columns.template.url = "https://www.google.com/search?q={category.urlEncode()}";{ // ... "series": [{ // ... "columns": { "url": "https://www.google.com/search?q={category.urlEncode()}" } }] }urlTargetType
stringInherited fromSpriteTarget to use for URL clicks:
_blank
_self (default)
_parent
_top
Name of the window/frame Ignored if
urlis not set.
userClassNameType
stringInherited fromSpriteSince 4.9.11A custom class name to set on the element.
If set, the value will be added to element's
classattribute.valignType
VerticalAlignInherited fromSpriteControls vertical alignment of the element.
This is used by parent
Containerwhen layouting its children.verticalCenterType
VerticalCenterInherited fromSpriteControls which part of the element to treat as a vertical center.
The setting will be used when positioning, resizing and rotating the element.
visibleType
booleanInherited fromSpriteIndicates if element is current visible (
true) or hidden (false).wheelableType
booleanInherited fromSpriteIndicates if the element can be interacted with mouse wheel.
Will invoke
wheel,wheelup,wheeldown,wheelleft, andwheelrightevents when using mouse wheel over the element.widthType
number|PercentInherited fromSpriteElement's absolute or relative width.
The width can either be absolute, set in numeric pixels, or relative, set in
Percent.Relative width will be calculated using closest measured ancestor
Container.NOTE:
widthis an accessor, which allows setting width in pixels or percent. It is a sort of a "shortcut" for the users. Actual renderer does not ever use it. It uses eitherpixelWidthorpercentWidth, so if you need to add an adapter for width add it for either of the two properties - whichever suits your requirements.xType
number|PercentInherited fromSpriteElement's absolute or relative X coordinate.
If setting both X and Y, please consider using
moveTo()method instead, as it will be faster to set both coordinates at once.yType
number|PercentInherited fromSpriteElement's absolute or relative Y coordinate.
If setting both X and Y, please consider using
moveTo()method instead, as it will be faster to set both coordinates at once.zIndexType
numberInherited fromSpriteA "zIndex" of the element.
"zIndex" determines the order of how elements are placed over each other.
Higher "zIndex" will mean the element will be draw on top of elements with lower "zIndexes".
zoomableType
booleanDefaulttrueInherited fromAxisSince 4.9.28Should the axis be zoomed with scrollbar/cursor?
zoomFactorType
numberInherited fromComponentA current zoom factor (0-1). 1 meaning fully zoomed out. (showing all of the available data)
Methods
anyToPoint(date:Date|number)Returns
IOrientationPointConverts a numeric value to orientation (x, y, angle) point on axis
anyToPosition(date:Date|number)Returns
numberConverts a numeric timestamp or a
Dateto a relative position on axis.constructor()Returns
DateAxisConstructor
copyFrom(source:this)Returns
voidCopies all properties and related data from a different instance of Axis.
dateToPoint(date:Date)Returns
IOrientationPointConverts date to orientation point (x, y, angle) on axis
dateToPosition(date:Date)Returns
numberConverts a Date to an asbolute pixel position within Axis.
fillRule(dataItem:DateAxisDataItem)Returns
voidA function which applies fills to axis cells.
Default function fills every second fill. You can set this to a function that follows some other logic.
Function should accept a
DateAxisDataItemand modify itsaxisFillproperty accordingly.formatLabel(value:number)Returns
stringFormats the value according to axis' own
DateFormatter.getPositionLabel(position:number)Returns
stringReturns a formatted date based on position in axis scale.
Please note that
positionrepresents position within axis which may be zoomed and not correspond to Cursor'sposition.To convert Cursor's
positionto Axis'positionusetoAxisPosition()method.More info: Tracking Cursor's position via API: tracking cursor s position For more information about cursor tracking.
getPositionX(dataItem:XYSeriesDataItem,
key:string,
location?:number,
stackKey?:string,
range?:IRange)Returns
numberSince 4.5.14Returns the relative position on axis for series' data item's value.
getPositionY(dataItem:XYSeriesDataItem,
key:string,
location?:number,
stackKey?:string,
range?:IRange)Returns
numberSince 4.5.14Returns relative position on axis for series' data item's value.
getSeriesDataItem(series:XYSeries,
position:number,
findNearest?:boolean)Returns
XYSeriesDataItemReturns a Series data item that corresponds to the specific pixel position of the Axis.
If
findNearest(third parameter) is set totrue, the method will try to locate nearest available data item if none is found directly underposition.positionToDate(position:number)Returns
DateConverts pixel position within Axis to a corresponding Date.
showTooltipAtPosition(position:number,
local?:boolean)Returns
voidShows Axis tooltip at specific relative position within Axis. (0-1)
zoomToDates(startDate:Date,
endDate:Date,
skipRangeEvent?:boolean,
instantly?:boolean,
adjust?:boolean)Returns
voidZooms axis to specific Dates.
zoomToValues(startValue:number,
endValue:number,
skipRangeEvent?:boolean,
instantly?:boolean,
adjust?:boolean)Returns
voidZooms axis to specific values.
69 inherited items
addData(rawDataItem:Object|Object[],
removeCount?:number,
skipRaw?:boolean)Returns
voidInherited fromComponentAdds one or several (array) of data items to the existing data.
animate(animationOptions:ISpriteAnimationOptions[]|ISpriteAnimationOptions,
duration:number,
easing?: (value:number) =>number)Returns
AnimationInherited fromSpriteCreates and starts an
Animationwith givenanimationOptions.More info:
Animationfor additional information about available optionsappear()Returns
voidInherited fromSpriteHides the chart instantly and then shows it. If defaultState.transitionDuration > 0, this will result an animation in which properties of hidden state will animate to properties of visible state.
appendDataItem(dataItem:AxisDataItem)Returns
voidInherited fromAxisAdds a data item to the Axis.
applyCurrentState(duration?:number)Returns
$type.Optional<Animation>Inherited fromSpriteApplies proper state based on the condition of the element. A condition is deducted in this order:
"hover" if Sprite has currently any pointers over it
"down" if Sprite has any pointers (touch or mouse) currently pressed over it
"focus" if Sprite has currently got focus (accessibility)
"hidden" if Sprite is currently hiddenReturns an
Animationobject, which is handling gradual transition from current values of properties, to the new target state(s).
bind(property:Key,
source:S,
modifier?: (value:this[""]) =>this[""])Returns
voidInherited fromSpritebindDataField(field:Key,
value:[""])Returns
voidInherited fromComponentBinds a data element's field to a specific field in raw data.
For example, for the very basic column chart you'd want to bind a
valuefield to a field in data, such asprice.Some more advanced Components, like
CandlestickSeriesneed several data fields bound to data, such as ones for open, high, low and close values.clone()Returns
thisInherited fromComponentReturns a clone of this element.
closeAllPopups()Returns
voidInherited fromSpriteCloses all currently open popup windows
closeModal()Returns
voidInherited fromSpriteHides modal window if there is one currently open.
createChild(classType: { })Returns
TInherited fromContainerCreates a new element of specific type and assigns as a child to the Container.
createSeriesRange(series:XYSeries)Returns
AxisDataItemInherited fromAxisCreates a data item for a Series range.
deepInvalidate()Returns
voidInherited fromContainerInvalidates the whole element, including layout AND all its child elements.
As this will essentially force all elements to redraw, use only if absolutely necessary.
dispatch(eventType:Key,
data?:any)Returns
voidInherited fromBaseObjectEventsDispatches an event using own event dispatcher. Will automatically populate event data object with event type and target (this element).
It also checks if there are any handlers registered for this sepecific event.
dispatchImmediately(eventType:Key,
data?:any)Returns
voidInherited fromBaseObjectEventsWorks like
dispatch, except event is triggered immediately, without waiting for the next frame cycle.dispatchReady()Returns
voidInherited fromContainerDispatches ready event. Dispatches when all children are ready.
dispose()Returns
voidInherited fromComponentDestroys this object and all related data.
disposeChildren()Returns
voidInherited fromContainerRemoves and destroys all Container's children.
To remove children from Container without destroying them, use
removeChildren().fitsToBounds(point:IPoint)Returns
booleanInherited fromContainerChecks if point is within bounds of a container.
getCurrentThemes()Returns
ITheme[]Inherited fromSpriteReturns theme(s) used by this object either set explicitly on this element, inherited from parent, or inherited from
System.getDataSource(property:string)Returns
DataSourceInherited fromComponentReturns (creates if necessary) a
DataSourcebound to any specific property.For example if I want to bind
datato an external JSON file, I'd create a DataSource for it.getPixelX(value:number|Percent)Returns
numberInherited fromSpriteReturns an X coordinate in pixel within the element.
If number is passed in as parameter, the same number will be returned back.
If
Percentis passed in, it will be recalculated to pixels.getPixelY(value:number|Percent)Returns
numberInherited fromSpriteReturns an Y coordinate in pixel within the element.
If number is passed in as parameter, the same number will be returned back.
If
Percentis passed in, it will be recalculated to pixels.getPropertyValue(propertyName:Key)Returns
[""]Inherited fromSpriteReturns element's property value.
Will check if there are any bindings with
DataItem.Will also apply any adapters bound to
propertyName.getRelativeX(value:number|Percent)Returns
numberInherited fromSpriteReturns relative (percent) value of the X coordindate within this element.
A relative value is a hundredth of a percent. So 100% would result in a 1 as relative value.
getRelativeY(value:number|Percent)Returns
numberInherited fromSpriteReturns relative (percent) value of the Y coordindate within this element.
A relative value is a hundredth of a percent. So 100% would result in a 1 as relative value.
getSvgPoint(point:IPoint)Returns
IPointInherited fromSpriteConverts element's local coordinates to the coordinates within the main chart container.
hide(duration?:number)Returns
$type.Optional<Animation>Inherited fromSpriteHides the element, by applying
hiddenstate.Has no effect if element is already hidden.
If
durationis not specified, it will use default.While element is fading out, its
isHidingproperty will resolve totrue.When element is hidden, its
visibleproperty will resolve tofalse.hideTooltip(duration?:number)Returns
voidInherited fromAxisHides element's
Tooltip.More info:
TooltiphitTest(sprite:Sprite)Returns
booleanInherited fromSpriteChecks if the this element has any of its parts overlapping with another element.
insertAfter(sprite:Sprite)Returns
SpriteInherited fromSpriteInsert this element after sibling element.
insertBefore(sprite:Sprite)Returns
SpriteInherited fromSpriteInsert this element before sibling element.
invalidate()Returns
voidInherited fromContainerInvalidates element.
Object will be redrawn during the next update cycle.
Please note that in most cases elements will auto-invalidate when needed. If everything works, DO NOT use this method. Use it only if some changes do not take otherwise.
invalidateLabels()Returns
voidInherited fromValueAxisWhen fontSize of fontFamily changes we need to hard-invalidate all Labels of this container to position them properly.
invalidateRawData()Returns
voidInherited fromComponentIf you want to have a smooth transition from one data values to another, you change your raw data and then you must call this method.
then instead of redrawing everything, the chart will check raw data and smoothly transit from previous to new data
invalidateSeries()Returns
voidInherited fromAxisInvalidates series of this axis.
isDisposed()Returns
booleanInherited fromBaseObjectReturns if this object has been already been disposed.
isInteractive()Returns
booleanInherited fromSpriteReturns true if interactions object was created. Mostly used just to avoid creating interactions object if not needed.
isInTransition()Returns
booleanInherited fromSpriteReturns
trueif Sprite is currently transiting from one state/value to another.isReady()Returns
booleanInherited fromSpriteReturns
trueif Sprite has already finished initializing and is ready.If this object is a
Containerit will wait for all of its children are ready before becoming ready itself and firing a"ready"event.margin(top:number,
right:number,
bottom:number,
left:number)Returns
SpriteInherited fromSpriteSets all four margins for the element at once.
Margins are set in pixels.
moveHtmlContainer(htmlElement:string|HTMLElement)Returns
voidInherited fromContainerSince 4.9.24Moves the whole chart to other HTML container.
htmlElementcan either be a reference to a DOM element, or an id of such element.moveTo(point:IPoint,
rotation?:number,
scale?:number,
isDragged?:boolean)Returns
voidInherited fromSpriteMoves the element to a specified coordinates.
Using this method is preferred method of moving element, as it saves some CPU processing power over setting
xandyproperties separately.The method respects element's center settings. The element will be positioned so that
pointcoordinates come in whatever "center" of the element is, as set inhorizontalCenterandverticalCenter.Besides moving the element, you can also at the same time scale and rotate the element.
openModal(text:string,
title?:string)Returns
Optional<Modal>Inherited fromSpriteOpens a modal window with specific content (
textparameter) and, optionally,title.The
textparameter can contain HTML content.More info:
Modalrmation about using Modal windowsopenPopup(text:string,
title?:string)Returns
Optional<Popup>Inherited fromSpriteCreates, opens, and returns a new
Popupwindow.textcan be any valid HTML.titleis currently not supported.padding(top:number,
right:number,
bottom:number,
left:number)Returns
SpriteInherited fromSpriteSets padding for the element in pixels.
pointToPosition(point:IPoint)Returns
numberInherited fromValueAxisConverts pixel coordinates to a relative position. (0-1)
positionToAngle(position:number)Returns
numberInherited fromAxisConverts a relative position to angle. (for circular axes)
positionToCoordinate(position:number)Returns
numberInherited fromAxisSince 4.7.15Converts relative position to coordinate.
positionToValue(position:number)Returns
numberInherited fromValueAxisConverts an relative position to a corresponding value within axis' scale.
reinit()Returns
voidInherited fromComponentInvalidates the whole element, including all its children, causing complete re-parsing of data and redraw.
Use sparingly!
removeChildren()Returns
voidInherited fromContainerRemoves all Container's children without actually destroying them.
To destroy children use
disposeChildren()instead.removeData(count:$type.Optional<number>,
skipRaw?:boolean)Returns
voidInherited fromComponentRemoves elements from the beginning of data
setPropertyValue(property:Key,
value:any,
invalidate?:boolean,
transform?:boolean)Returns
booleanInherited fromSpriteSets elements's property value. Will also propagate the same property value on all element's clones.
setState(value:string|SpriteState<IContainerProperties,IContainerAdapters>,
transitionDuration?:number,
easing?: (value:number) =>number)Returns
$type.Optional<Animation>Inherited fromContainerApplies a
SpriteStateon this element.The first parameter can either be a name of the state or a
SpriteStateinstance.When run, this method will apply SVG properties defined in a
SpriteState, but only those that are relevant to this particular element, that is are listed in its respectivepropertiesarray.More info:
SpriteStatesetVisibility(value:boolean)Returns
voidInherited fromSpriteSets
visibilityproperty:true- visiblefalse- hidden
show(duration?:number)Returns
$type.Optional<Animation>Inherited fromSpriteReveals hidden element.
Has no effect if element is already visible.
If
durationis not specified, it will use default.showTooltip(point?:IPoint)Returns
booleanInherited fromSpriteShows the element's
Tooltip.A tooltip will be populated using text templates in either
tooltipHTMLortooltipTextas well as data intooltipDataItem.More info:
TooltipshowTooltipAt(value:number)Returns
voidInherited fromValueAxisShows Axis tooltip at specific value
toAxisPosition(position:number)Returns
numberInherited fromAxisConverts relative position (0-1) to Axis position with zoom level and inversed taken into account.
toBack()Returns
voidInherited fromSpriteMoves the element to the very bottom in the element order, so that it appears behind other elements.
toFront()Returns
voidInherited fromSpriteMoves the element to the very top in element order, so that it appears in front of other elements.
toGlobalPosition(position:number)Returns
numberInherited fromAxisConverts position on the axis with zoom level and inversed taken into account to global position.
valueToPoint(value:number)Returns
IOrientationPointInherited fromValueAxisConverts a numeric value to orientation point (x, y, angle) on axis
valueToPosition(value:number)Returns
numberInherited fromValueAxisConverts a numeric value to relative position on axis.
xToValue(x:number)Returns
numberInherited fromValueAxisConverts an X coordinate to a relative value in axis' scale.
yToValue(y:number)Returns
numberInherited fromValueAxisConverts an Y coordinate to a relative value in axis' scale.
zoom(range:IRange,
skipRangeEvent:boolean,
instantly:boolean,
declination?:number)Returns
IRangeInherited fromComponentSets current zoom.
The range uses relative values from 0 to 1, with 0 marking beginning and 1 marking end of the available data range.
This method will not have any effect when called on a chart object.
Since the chart can have a number of axes and series, each with its own data, the meaning of "range" is very ambiguous.
To zoom the chart use
zoom*methods on its respective axes.zoomToIndexes(startIndex:number,
endIndex:number,
skipRangeEvent?:boolean,
instantly?:boolean)Returns
voidInherited fromComponentZooms to specific data items using their index in data.
This method will not have any effect when called on a chart object.
Since the chart can have a number of axes and series, each with its own data, the meaning of "index" is very ambiguous.
To zoom the chart use
zoom*methods on its respective axes.
Events
groupperiodchangedParam { type:
"groupperiodchanged", target:DateAxis} &IDateAxisEventsInvoked when data grouping is on and grouping period is changed. You can find our the period via dateAxis.currentDataSetId property.
64 inherited items
appearedParam { type:
"appeared", target:DateAxis}Inherited fromISpriteEventsInvoked when
Spriteappears. Sprite appears whensprite.appear()method is called and show animation is finished.beforedatavalidatedParam { type:
"beforedatavalidated", target:DateAxis}Inherited fromIComponentEventsInvoked just before element is validated (after changes).
beforedisposedParam { type:
"beforedisposed", target:DateAxis}Inherited fromISpriteEventsInvoked just before Sprite is disposed.
beforevalidatedParam { type:
"beforevalidated", target:DateAxis}Inherited fromISpriteEventsInvoked before
Spriteis validated.blurParam { type:
"blur", target:DateAxis, event:FocusEvent}Inherited fromIInteractionObjectEventsInvoked when
focusableobject loses focus, e.g. by clicking outside it or pressing TAB button to focus on the next focusable object.childaddedParam { type:
"childadded", target:DateAxis, newValue:Sprite}Inherited fromIContainerEventsInvoked when a child Sprite is added to Container.
childremovedParam { type:
"childremoved", target:DateAxis, oldValue:Sprite}Inherited fromIContainerEventsInvoked when a child Sprite is removed from
dataitemsvalidatedParam { type:
"dataitemsvalidated", target:DateAxis}Inherited fromIComponentEventsInvoked when value(s) of the element's data items are validated.
datarangechangedParam { type:
"datarangechanged", target:DateAxis}Inherited fromIComponentEventsInvoked when range of the currently selected data is validated.
datavalidatedParam { type:
"datavalidated", target:DateAxis}Inherited fromIComponentEventsInvoked when the raw data for the component changes.
disabledParam { type:
"disabled", target:DateAxis}Inherited fromISpriteEventsInvoked when sprite is disabled
doublehitParam { type:
"doublehit", target:DateAxis} &SpritePointerTypeEvent&SpritePointEvent&SpriteMouseTouchEventInherited fromISpriteEventsInvoked when
Spriteis clicked or touched twice in rapid succession.downParam { type:
"down", target:DateAxis} &PointerTypeEvent&PointerEvent&MouseTouchEventInherited fromIInteractionObjectEventsInvoked when the mouse button is pressed or touch starts.
dragParam { type:
"drag", target:DateAxis, event:MouseEvent|TouchEvent|KeyboardEvent, startPoint:IPoint} &PointerTypeEvent&ShiftEvent&PointEventInherited fromIInteractionObjectEventsInvoked when
draggableobject is being dragged. (using mouse, touch or keyboard)draggedParam { type:
"dragged", target:DateAxis, event:MouseEvent|TouchEvent|KeyboardEvent, startPoint:IPoint} &SpritePointerTypeEvent&SpriteShiftEvent&SpritePointEventInherited fromISpriteEventsInvoked when
draggableobject is being dragged. (using mouse, touch or keyboard).This is simmilar but different then
"drag"event in that it kicks in after"drag"which modifiesSpritecoordinates. This allows doing own manipulations and corrections to element positions.dragstartParam { type:
"dragstart", target:DateAxis, event:MouseEvent|TouchEvent|KeyboardEvent} &PointerTypeEventInherited fromIInteractionObjectEventsInvoked when
draggableobject dragging starts. This event is not invoked immediatelly afterdown, but only if there's a movement of the pointer.dragstopParam { type:
"dragstop", target:DateAxis, event:MouseTouchEvent|KeyboardEvent} &PointerTypeEventInherited fromIInteractionObjectEventsInvoked when
draggableobject is released. This event will not fire if position of the object did not change.enabledParam { type:
"enabled", target:DateAxis}Inherited fromISpriteEventsInvoked when sprite is enabled
endchangedParam { type:
"endchanged", target:DateAxis}Inherited fromIComponentEventsInvoked when end position changesPlease note that
endhangedevent is dispatched immediately after zoom occurs, so some related properties (e.g.maxZoomedonValueAxis) might not be yet updated.Use
startendchangedevent instead if you need to rely on updated zoom-related values.extremeschangedParam { type:
"extremeschanged", target:DateAxis}Inherited fromIValueAxisEventsInvoked when start/end coordinates of the axis change.
focusParam { type:
"focus", target:DateAxis, event:FocusEvent}Inherited fromIInteractionObjectEventsInvoked when
focusableobject gains focus, e.g. by using TAB button.globalscalechangedParam { type:
"globalscalechanged", target:DateAxis}Inherited fromISpriteEventsInvoked when the global scale changed, meaning that scale of
Spriteor any of its ascendants changed.Param { type:
"hidden", target:DateAxis}Inherited fromISpriteEventsInvoked when visible
Spriteis hidden.hitParam { type:
"hit", target:DateAxis} &SpritePointerTypeEvent&SpritePointEvent&SpriteMouseTouchEventInherited fromISpriteEventsInvoked when
Spriteis clicked or touched.initedParam { type:
"inited", target:DateAxis}Inherited fromISpriteEventsInvoked when
Spriteis initialized.inputParam { type:
"input", target:DateAxis, event:KeyboardEvent}Inherited fromIInteractionObjectEventsInvoked whenever information changes in the textual input elements, like
<input>,<textarea>, etc.keydownParam { type:
"keydown", target:DateAxis, event:KeyboardEvent}Inherited fromIInteractionObjectEventsInvoked when the key is pressed on the keyboard.
keypressParam { type:
"keypress", target:DateAxis, event:KeyboardEvent}Inherited fromIInteractionObjectEventsInvoked when the key generates a "press", e.g. pressing and holding a letter key will generate repeated "keypress" events.
keyupParam { type:
"keyup", target:DateAxis, event:KeyboardEvent}Inherited fromIInteractionObjectEventsInvoked when the key is released on the keyboard.
layoutvalidatedParam { type:
"layoutvalidated", target:DateAxis}Inherited fromIContainerEventsinvoked when layout of the container is validated
lengthchangedParam { type:
"lengthchanged", target:DateAxis}Inherited fromIAxisEventsInvoked when available axis lenght changes, e.g. after resizing the whole chart.
maxsizechangedParam { type:
"maxsizechanged", target:DateAxis, previousHeight:number, previousWidth:number}Inherited fromISpriteEventsInvoked when maximum available size of the Sprite changes, i.e. when the size of parent container changes.
outParam { type:
"out", target:DateAxis} &PointerTypeEvent&MouseTouchEvent&PointerEventInherited fromIInteractionObjectEventsInvoked when mouse cursor moves out of
hoverableobject or it is no longer touched.NOTE: this event might not always contains
pointerparameter as event might be triggered by API?overParam { type:
"over", target:DateAxis} &PointerTypeEvent&MouseTouchEvent&PointerEventInherited fromIInteractionObjectEventsInvoked when mouse cursor moves over
hoverableobject or it is touched.NOTE: this event might not always contains
pointerparameter as event might be triggered by API?parentsetParam { type:
"parentset", target:DateAxis}Inherited fromISpriteEventsInvoked when a sprite is added to a parent
positionchangedParam { type:
"positionchanged", target:DateAxis}Inherited fromISpriteEventsInvoked when position of the
Spritechanges.propertychangedParam { type:
"propertychanged", target:DateAxis, property:string}Inherited fromISpriteEventsInvoked when property of the
Spritechanges.rangechangeendedParam { type:
"rangechangeended", target:DateAxis}Inherited fromIComponentEventsInvoked when range change animation ends
rangechangestartedParam { type:
"rangechangestarted", target:DateAxis}Inherited fromIComponentEventsInvoked when range change animation starts
readyParam { type:
"ready", target:DateAxis}Inherited fromISpriteEventsInvoked when
Spriteis becomes ready, that is it has finished all calculations and building itself.For
Containerobject (and all those inheriting it, including charts) this event will fire when all children become ready.removedfromqueueParam { type:
"removedfromqueue", target:DateAxis}Inherited fromISpriteEventsInvoked when chart is shown if
am4core.options.queue = trueor/andam4core.options.onlyShowOnViewport = true.resizeParam { type:
"resize", target:DateAxis, point1:IPoint, point2:IPoint, startPoint1:IPoint, startPoint2:IPoint} &PointerTypeEvent&ScaleEvent&MouseTouchEventInherited fromIInteractionObjectEventsInvoked when
resizableobject is being resized either by mouse or touch pinch gesture.rightclickParam { type:
"rightclick", target:DateAxis} &MouseTouchEventInherited fromIInteractionObjectEventsInvoked when right mouse button is clicked on the object.
selectionextremeschangedParam { type:
"selectionextremeschanged", target:DateAxis}Inherited fromIValueAxisEventsInvoked when selection/zoom on axis occurs and start/end coordinates change.
shownParam { type:
"shown", target:DateAxis}Inherited fromISpriteEventsInvoked when hidden
Spriteis shown.sizechangedParam { type:
"sizechanged", target:DateAxis}Inherited fromISpriteEventsInvoked when size of the Sprite changes.
startchangedParam { type:
"startchanged", target:DateAxis}Inherited fromIComponentEventsInvoked when start position changes.
Please note that
startchangedevent is dispatched immediately after zoom occurs, so some related properties (e.g.minZoomedonValueAxis) might not be yet updated.Use
startendchangedevent instead if you need to rely on updated zoom-related values.startendchangedParam { type:
"startendchanged", target:DateAxis}Inherited fromIComponentEventsInvoked when start or end position changes, unlike startchanged/endchanged this event is fired not immediately but at the end of a cycle.
swipeParam { type:
"swipe", target:DateAxis} &PointerTypeEvent&MouseTouchEventInherited fromIInteractionObjectEventsInvoked when user performs "swiping" gesture (quick horizontal movement) on the object, either using mouse or touch.
swipeleftParam { type:
"swipeleft", target:DateAxis} &PointerTypeEvent&MouseTouchEventInherited fromIInteractionObjectEventsInvoked when user performs "swiping" gesture towards left.
swiperightParam { type:
"swiperight", target:DateAxis} &PointerTypeEvent&MouseTouchEventInherited fromIInteractionObjectEventsInvoked when user performs "swiping" gesture towards right.
toggledParam { type:
"toggled", target:DateAxis}Inherited fromISpriteEventsInvoked when
togglableSprite is being toggled on and off. (itsisActiveproperty is being changed)trackParam { type:
"track", target:DateAxis} &SpritePointerTypeEvent&SpritePointEvent&SpritePointerEvent&SpriteMouseTouchEventInherited fromISpriteEventsInvoked when pointer (mouse cursor or touch point) moves over
trackableSprite.transformedParam { type:
"transformed", target:DateAxis, dummyData:string}Inherited fromISpriteEventstransitionendedParam { type:
"transitionended", target:DateAxis}Inherited fromISpriteEventsInvoked when Sprite completes transition to a
SpriteState.upParam { type:
"up", target:DateAxis} &PointerTypeEvent&PointerEvent&MouseTouchEventInherited fromIInteractionObjectEventsInvoked when the mouse button is released or touch ends.
validatedParam { type:
"validated", target:DateAxis}Inherited fromISpriteEventsInvoked when
Spriteis validated. (on init or after update)visibilitychangedParam { type:
"visibilitychanged", target:DateAxis, visible:boolean}Inherited fromISpriteEventsInvoked when visibility of the
Spritechanges. (from visible to hidden, and vice versa)wheelParam { type:
"wheel", target:DateAxis, event:WheelEvent} &SpritePointEvent&SpriteShiftEventInherited fromISpriteEventsInvoked when user turns mouse wheel while over the
Sprite.wheeldownParam { type:
"wheeldown", target:DateAxis, event:WheelEvent} &SpritePointEvent&SpriteShiftEventInherited fromISpriteEventsInvoked when user turns mouse wheel downwards while over the
Sprite.wheelleftParam { type:
"wheelleft", target:DateAxis, event:WheelEvent} &SpritePointEvent&SpriteShiftEventInherited fromISpriteEventsInvoked when user turns mouse wheel leftwards while over the
Sprite.wheelrightParam { type:
"wheelright", target:DateAxis, event:WheelEvent} &SpritePointEvent&SpriteShiftEventInherited fromISpriteEventsInvoked when user turns mouse wheel rightwards while over the
Sprite.wheelupParam { type:
"wheelup", target:DateAxis, event:WheelEvent} &SpritePointEvent&SpriteShiftEventInherited fromISpriteEventsInvoked when user turns mouse wheel upwards while over the
Sprite.zIndexChangedParam { type:
"zIndexChanged", target:DateAxis}Inherited fromISpriteEventsInvoked when zIndex of a sprite is changed
Adapters
169 inherited items
adjustLabelPrecisionParam
booleanInherited fromIValueAxisPropertiesalignParam
AlignInherited fromISpritePropertiesalwaysShowTooltipParam
booleanInherited fromISpritePropertiesbaseValueParam
numberInherited fromIValueAxisAdaptersApplied to the base value of the axis
clickableParam
booleanInherited fromISpritePropertiescontentAlignParam
AlignInherited fromIContainerPropertiesHorizontal alignment of Container's items.
contextMenuDisabledParam
booleanInherited fromISpritePropertiescriticalErrorParam
ErrorInherited fromISpriteAdapterscursorOptionsParam
ICursorOptionsInherited fromISpriteAdapterscursorTooltipEnabledParam
booleanInherited fromIAxisPropertiesIndicates if cusor's tooltip should be shown on this Axis.
dataParam
any[]Inherited fromIComponentAdaptersApplied to chart's data before it is retrieved for use.
dataContextValueParam { dataItem:
DataItem, field:string, value:any}Inherited fromIComponentAdaptersApplied after
Componentretrieves data value from data context (raw data), but before it is provided toDataItem.disabledParam
booleanInherited fromISpritePropertiesdraggableParam
booleanInherited fromISpritePropertiesdxParam
numberInherited fromISpritePropertiesdyParam
numberInherited fromISpritePropertiesendParam
numberInherited fromIComponentAdaptersendLocationParam
numberInherited fromIAxisPropertiesAxis end location.
0 - None of the last cell is shown. (don't do that)
0.5 - Half of the last cell is shown.
1 - Full last cell is shown.
extraMaxParam
numberInherited fromIValueAxisPropertiesextraMinParam
numberInherited fromIValueAxisPropertiesextraTooltipPrecisionParam
numberInherited fromIValueAxisPropertiesfillParam
Color|LinearGradient|RadialGradient|PatternInherited fromISpritePropertiesfillModifierParam
ColorModifierInherited fromISpritePropertiesfillOpacityParam
numberInherited fromISpritePropertiesfixedWidthGridParam
booleanDefaultfalseInherited fromIContainerPropertiesIf set to
true, all columns of the container with layout type "grid" will be equally sized.focusableParam
booleanInherited fromISpritePropertiesfontFamilyParam
stringInherited fromIContainerPropertiesFont family for the text.
fontSizeParam
numberInherited fromIContainerPropertiesFont size for the text.
fontWeightParam
FontWeightDefault"normal"Inherited fromIContainerPropertiesDefault font weight.
getTooltipTextParam
stringInherited fromIAxisAdaptersApplied to the tooltip text before it is shown.
globalScaleParam
numberInherited fromISpriteAdaptersgroupCountParam
numberDefault200Inherited fromIDateAxisPropertiesSince 4.7.0Indicates threshold of data items in selected range at which to start aggregating data items if
groupData = true.groupDataParam
booleanDefaultfalseInherited fromIDateAxisPropertiesSince 4.7.0Indicates if data should be aggregated to composide data items if there are more data items in selected range than
groupCount.groupIntervalParam
ITimeIntervalInherited fromIDateAxisPropertiesSince 4.9.24Disables automatic selection of data grouping intervals and always uses
groupIntervalif set. Works only ifgroupData = true.heightParam
number|PercentInherited fromISpritePropertiesParam
booleanInherited fromISpritePropertieshideTooltipWhileZoomingParam
booleanDefaulttrueInherited fromIAxisPropertiesSince 4.7.16Indicates if axis' tooltip should be hidden while axis range is animating (zooming)
hitOptionsParam
IHitOptionsInherited fromISpriteAdaptershorizontalCenterParam
HorizontalCenterInherited fromISpritePropertieshoverableParam
booleanInherited fromISpritePropertieshoverOnFocusParam
booleanInherited fromISpritePropertieshoverOptionsParam
IHoverOptionsInherited fromISpriteAdaptersidParam
stringInherited fromISpritePropertiesincludeRangesInMinMaxParam
booleanInherited fromIValueAxisPropertiesinertParam
booleanInherited fromISpritePropertiesinertiaOptionsParam
Dictionary<InertiaTypes,IInertiaOptions>Inherited fromISpriteAdaptersinnerHeightParam
numberInherited fromISpriteAdaptersinnerWidthParam
numberInherited fromISpriteAdaptersinteractionsEnabledParam
booleanInherited fromISpritePropertiesisActiveParam
booleanInherited fromISpritePropertiesisHoverParam
booleanInherited fromISpritePropertieskeepSelectionParam
booleanInherited fromIValueAxisPropertieskeyboardOptionsParam
IKeyboardOptionsInherited fromISpriteAdapterslayoutParam
ContainerLayoutDefault"absolute"Inherited fromIContainerPropertiesContainer layout.
Options: "absolute" (default), "vertical", "horizontal", or "grid".
logarithmicParam
booleanInherited fromIValueAxisPropertiesmarginBottomParam
numberInherited fromISpritePropertiesmarginLeftParam
numberInherited fromISpritePropertiesmarginRightParam
numberInherited fromISpritePropertiesmarginTopParam
numberInherited fromISpritePropertiesmarkUnitChangeParam
booleanDefaulttrueInherited fromIDateAxisPropertiesUse
periodChangeDateFormatsto apply different formats to the first label in bigger time unit.maskParam
SpriteInherited fromISpriteAdaptersmaxParam
numberInherited fromIValueAxisAdaptersApplied to the max value of the axis
maxColumnsParam
numberInherited fromIContainerPropertiesMaximum number of columns (when using
"grid"layout).maxHeightParam
numberInherited fromISpritePropertiesmaxPrecisionParam
numberInherited fromIValueAxisPropertiesmaxWidthParam
numberInherited fromISpritePropertiesmaxXParam
numberInherited fromISpritePropertiesmaxYParam
numberInherited fromISpritePropertiesmaxZoomCountParam
numberDefault0 (no limit)Inherited fromIComponentPropertiesUse this for
CategoryAxisorDateAxis.Limits how many categories or base intervals can be shown at the same time.
If there are more items in the chart, the chart will auto-zoom.
maxZoomFactorParam
numberInherited fromIComponentPropertiesMaximum zoom factor of a component.
measuredHeightParam
numberInherited fromISpriteAdaptersmeasuredWidthParam
numberInherited fromISpriteAdaptersminParam
numberInherited fromIValueAxisAdaptersApplied to the min value of the axis
minHeightParam
numberInherited fromISpritePropertiesminWidthParam
numberInherited fromISpritePropertiesminXParam
numberInherited fromISpritePropertiesminYParam
numberInherited fromISpritePropertiesminZoomCountParam
numberDefault1Inherited fromIComponentPropertiesUse this for
CategoryAxisorDateAxis.Allows restricting zoom in beyond certain number of categories or base intervals.
The chart will not zoom in beyond this number of items.
mouseOptionsParam
IMouseOptionsInherited fromISpriteAdaptersnonScalingParam
booleanInherited fromISpritePropertiesnonScalingStrokeParam
booleanInherited fromISpritePropertiesopacityParam
numberInherited fromISpritePropertiesouterHeightParam
numberInherited fromISpriteAdaptersouterWidthParam
numberInherited fromISpriteAdapterspaddingBottomParam
numberInherited fromISpritePropertiespaddingLeftParam
numberInherited fromISpritePropertiespaddingRightParam
numberInherited fromISpritePropertiespaddingTopParam
numberInherited fromISpritePropertiespathParam
stringInherited fromISpritePropertiespixelHeightParam
numberInherited fromISpriteAdapterspixelMarginBottomParam
numberInherited fromISpriteAdapterspixelMarginLeftParam
numberInherited fromISpriteAdapterspixelMarginRightParam
numberInherited fromISpriteAdapterspixelMarginTopParam
numberInherited fromISpriteAdapterspixelPerfectParam
booleanInherited fromISpritePropertiespixelWidthParam
numberInherited fromISpriteAdapterspixelXParam
numberInherited fromISpriteAdapterspixelYParam
numberInherited fromISpriteAdapterspopulateStringParam
stringInherited fromISpriteAdaptersreaderCheckedParam
booleanInherited fromISpritePropertiesreaderControlsParam
stringInherited fromISpritePropertiesreaderDescribedByParam
stringInherited fromISpritePropertiesreaderDescriptionParam
stringInherited fromISpritePropertiesreaderHiddenParam
booleanInherited fromISpritePropertiesreaderLabelledByParam
stringInherited fromISpritePropertiesreaderLiveParam
AriaLiveInherited fromISpritePropertiesreaderOrientationParam
stringInherited fromISpritePropertiesreaderTitleParam
stringInherited fromISpritePropertiesreaderValueNowParam
stringInherited fromISpritePropertiesreaderValueTextParam
stringInherited fromISpritePropertiesrelativeHeightParam
numberInherited fromISpriteAdaptersrelativeMarginBottomParam
numberInherited fromISpriteAdaptersrelativeMarginLeftParam
numberInherited fromISpriteAdaptersrelativeMarginRightParam
numberInherited fromISpriteAdaptersrelativeMarginTopParam
numberInherited fromISpriteAdaptersrelativeWidthParam
numberInherited fromISpriteAdaptersrelativeXParam
numberInherited fromISpriteAdaptersrelativeYParam
numberInherited fromISpriteAdaptersresizableParam
booleanInherited fromISpritePropertiesreverseOrderParam
booleanDefaultfalseInherited fromIContainerPropertiesIf set to
true, the children of the container will be drawn in reverse order.roleParam
RolesInherited fromISpritePropertiesrotationParam
numberInherited fromISpritePropertiesscaleParam
numberInherited fromISpritePropertiessetStateOnChildrenParam
booleanDefaultfalseInherited fromIContainerPropertiesSpecifies if, when state is applied on this container, the same state should be applied to container's children as well as
background.shapeRenderingParam
ShapeRenderingInherited fromISpritePropertiesshowOnInitParam
booleanInherited fromISpritePropertiesshowTooltipOnParam
"hover"|"hit"|"always"Inherited fromISpritePropertiesskipEmptyPeriodsParam
booleanDefaultfalseInherited fromIDateAxisPropertiesIf enabled, axis will automatically collapse empty (without data points) periods of time, i.e. weekends.
snapTooltipParam
booleanDefaulttrueInherited fromIDateAxisPropertiesShould the nearest tooltip be shown if no data item is found on the current cursor position.
startParam
numberInherited fromIComponentAdaptersstartLocationParam
numberInherited fromIAxisPropertiesAxis start location.
0 - None of the first cell is shown. (don't do that)
0.5 - Half of the first cell is shown.
1 - Full first cell is shown.
strictMinMaxParam
booleanInherited fromIValueAxisPropertiesstrokeParam
Color|LinearGradient|RadialGradient|PatternInherited fromISpritePropertiesstrokeDasharrayParam
stringInherited fromISpritePropertiesstrokeDashoffsetParam
numberInherited fromISpritePropertiesstrokeLinecapParam
"butt"|"square"|"round"Inherited fromISpritePropertiesstrokeLinejoinParam
"miter"|"round"|"bevel"Inherited fromISpritePropertiesstrokeModifierParam
ColorModifierInherited fromISpritePropertiesstrokeOpacityParam
numberInherited fromISpritePropertiesstrokeWidthParam
numberInherited fromISpritePropertiesswipeableParam
booleanInherited fromISpritePropertiesswipeOptionsParam
ISwipeOptionsInherited fromISpriteAdapterssyncWithAxisParam
ValueAxisInherited fromIValueAxisPropertiestabindexParam
numberInherited fromISpritePropertiestextDecorationParam
TextDecorationDefault"none"Inherited fromIContainerPropertiesDefault font decoration.
timezoneParam
stringInherited fromIDateAxisPropertiesSince 4.10.1If set will recalculate all timestamps in data to specific named timezone, e.g.
"America/Vancouver","Australia/Sydney","UTC", etc.IMPORTANT: do not set
timezoneon bothDateAxisanddateFormatter. It will skew your results by applying timezone twice.timezoneOffsetParam
numberInherited fromIDateAxisPropertiesSince 4.8.5If set will recalculate all timestamps in data by applying specific offset in minutes.
IMPORTANT: do not set
timezoneOffseton bothDateAxisanddateFormatter. It will skew your results by applying offset twice.togglableParam
booleanInherited fromISpritePropertiestoggleZoomOutButtonParam
booleanDefaulttrueInherited fromIAxisPropertiesNormally, when axis is zoomed in, a zoom out button is shown by a chart, and vice versa: when axis is zoomed out completely, zoom out button is hidden.
Setting this to
falsewill disable this behavior. Zooming in our out this axis will not reveal or hide zoom out button.tooltipDateFormatParam
string|DateTimeFormatOptionsInherited fromIDateAxisPropertiesA special date format to apply axis tooltips.
Will use same format as for labels, if not set.
tooltipHTMLParam
stringInherited fromISpritePropertiestooltipPositionParam
"fixed"|"pointer"Inherited fromISpritePropertiestooltipTextParam
stringInherited fromISpritePropertiestooltipXParam
number|PercentInherited fromISpritePropertiestooltipYParam
number|PercentInherited fromISpritePropertiestrackableParam
booleanInherited fromISpritePropertiestreatZeroAsParam
numberInherited fromIValueAxisPropertiesurlParam
stringInherited fromISpritePropertiesurlTargetParam
stringInherited fromISpritePropertiesuserClassNameParam
stringInherited fromISpritePropertiesvalignParam
VerticalAlignInherited fromISpritePropertiesverticalCenterParam
VerticalCenterInherited fromISpritePropertiesvisibleParam
booleanInherited fromISpritePropertieswheelableParam
booleanInherited fromISpritePropertieswidthParam
number|PercentInherited fromISpritePropertiesxParam
number|PercentInherited fromISpritePropertiesyParam
number|PercentInherited fromISpritePropertieszIndexParam
numberInherited fromISpritePropertieszoomableParam
booleanInherited fromIAxisProperties