Events

This section describes events fired by this widget.

See Also

argumentAxisClick

Fires when a user clicks a label on the argument axis.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
jQueryEvent: jQuery.Event
The jQuery event.
argument: Date|Number|String
The argument axis.
Cannot be used in themes.
See Also

disposing

Fires when the widget is being removed.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
NOTE
This event fires only if the widget is removed using the remove(), empty(), or html() jQuery methods.
See Also

done

Fires when the Series and Point chart elements are ready to be accessed.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
Cannot be used in themes.

To access the required series, use the getAllSeries(), getSeriesByName(seriesName) or getSeriesByPos(seriesIndex() method of the chart instance. The accessed series object allows you to access the required point and then access the point's label. The API of the Series, Point and Label objects is detailed in the Chart Elements Reference section.

To perform custom actions when the chart is drawn, handle the drawn event of the chart.

See Also

drawn

Fires when the widget has finished drawing itself.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
Cannot be used in themes.
See Also

incidentOccurred

Fires when an error or warning appears in a widget.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
target: Object
Information about the occurred incident.

When implementing a handling function for this event, you can access information about the occurred incident using the target field of the function's argument. This information includes the following.

  • id
    Contains the ID of the incident. The full list of IDs can be found in the Errors and Warnings section.
  • type
    Contains the type of the incident. This field equals 'error' for errors or 'warning' for warnings.
  • args
    Contains the argument of the incident's message. The content of this field varies greatly, depending on the incident. For example, it may contain the name of the data source field that was not specified correctly, or the name of the option that was not set properly.
  • text
    Contains the text passed to the browser console. This text includes the content of the args field, if there is any.
  • widget
    Contains the name of the widget that produced the error or warning.
  • version
    Contains the currently used version of the ChartJS library.
See Also

initialized

Fires when the widget is initialized.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
See Also

legendClick

Fires when an item on the chart legend is clicked.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
jQueryEvent: jQuery.Event
The jQuery event.
target: Series
The series to which the clicked legend item belongs.
Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the series to which the clicked legend item belongs. To learn about series' members you can use, refer to the description of the Series object.

See Also

optionChanged

Fires after an option of the component is changed.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
name: String
Specifies the name of the option whose value is changed.
fullName: String
Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.
value: any
Specifies a new value for the option.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
See Also

pointClick

Fires when a user clicks a series point.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
jQueryEvent: jQuery.Event
The jQuery event.
target: Point
The clicked series point.
Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the clicked series point. To learn about point's members that you can use, refer to the description of the Point object.

NOTE
A click on a series point causes the seriesClick event to fire after the pointClick event. To prevent this behavior, assign true to the jQueryEvent.cancel field of the object passed to the pointClick event handler as the argument.
See Also

pointHoverChanged

Fires when the hover state of a series point has been changed.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
target: Point
The series point whose hover state has been changed.
Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the series point whose hover state has been changed. To identify whether this point was hovered over or hovered out, call its isHovered() method. To discover point fields and methods, refer to the Point class description.

See Also

pointSelectionChanged

Fires when the selection state of a series point has been changed.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
target: Point
The series point whose selection state has been changed.
Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the series point whose selection state has been changed. To identify whether this point was selected or deselected, call its isSelected() method. To discover point fields and methods, refer to the Point class description.

See Also

seriesClick

Fires when a user clicks a series.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
jQueryEvent: jQuery.Event
The jQuery event.
target: Series
The clicked series.
Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the clicked series. To learn about series members that you can use, refer to the description of the Series object.

NOTE
The seriesClick also fires when a user clicks a series point or a legend item, but only if it is not canceled in the pointClick and legendClick event handlers.
See Also

seriesHoverChanged

Fires when the hover state of a series has been changed.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
target: Series
The series whose hover state has been changed.
Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the series whose hover state has been changed. To identify whether this series was hovered over or hovered out, call its isHovered() method. To discover series' fields and methods you can use, refer to the Series class description.

See Also

seriesSelectionChanged

Fires when the selection state of a series has been changed.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
target: Series
The series whose selection state has been changed.
Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the series whose selection state has been changed. To identify whether this series was selected or deselected, call its isSelected() method. To discover series' fields and methods, refer to the Series class description.

See Also

tooltipHidden

Fires when a point's tooltip becomes hidden.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
target: Point
The series point whose tooltip becomes hidden.
Cannot be used in themes.

The point's tooltip becomes invisible when a user hovers the mouse cursor over another series point. In addition, you can hide a tooltip in code, using the hideTooltip() method of the chart or point.

When a tooltip is made hidden, you can perform specific actions by handling the tooltipHidden event. When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the series point whose tooltip becomes hidden.

See Also

tooltipShown

Fires when a point's tooltip appears.

Event Handler Argument:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: Object
The widget's container.
target: Point
The series point whose tooltip appears.
Cannot be used in themes.

The point's tooltip appears when a user hovers the mouse cursor over the point. In addition, you can show a tooltip in code, using the showTooltip() method of the chart or point.

When a tooltip appears, you can perform specific actions by handling the tooltipShown event. To do this, implement a handling function and assign it to the onTooltipShown option. When implementing this function, use the object passed to it as its parameter. Among the fields of this object, you can find the series point whose tooltip appears.

See Also