Skip to main content
Version: 5.5

Interaction

The interaction configuration defines how a user can interact with the chart via event or tooltips.

To get, change and apply own properties, you can invoke the set and get methods, as following:

// sets and gets interaction mode
chart.getOptions().getInteraction().setMode(InteractionMode.NEAREST);

InteractionMode mode = chart.getOptions().getInteraction().getMode();

The defaults values are set in global defaults options, see default global interaction options.

Table with options:

NameTypeDefaultDescription
axisInteractionAxisInteractionAxis.XDefine which directions are used in calculating distances.
intersectbooleantrueif true, the hover mode only applies when the mouse position intersects an item on the chart.
includeInvisiblebooleanfalseif true, the invisible points that are outside of the chart area will also be included when evaluating interactions.
modeInteractionModeInteractionMode.NERAESTSets which elements managed by event or tooltip.

Hover

The hover configuration, to configure interaction with the chart via hover, is passed to a chart by:

To get, change and apply own properties, you can invoke the set and get methods, as following:

// sets and gets interaction mode
chart.getOptions().getHover().setMode(InteractionMode.NEAREST);

InteractionMode mode = chart.getOptions().getHover().getMode();

The defaults values are set in global defaults options, see default global hover options.

Table with options:

NameTypeDefaultDescription
axisInteractionAxisInteractionAxis.XDefine which directions are used in calculating distances.
intersectbooleantrueif true, the hover mode only applies when the mouse position intersects an item on the chart.
modeInteractionModeInteractionMode.NERAESTSets which elements will be hovered.

Chart events

You can set which events must be caught and how to manage them by event handlers.

// sets and gets the catchable events
chart.getOptions().setEvents(Event.CLICK, Event.MOUSEMOVE);

Set<Event> events = chart.getOptions().getEvents();

The default value is set in global defaults options, see default global chart options.

Table with options:

NameTypeDefaultDescription
eventsEvent[]Event.MOUSEMOVE, Event.MOUSEOUT, Event.CLICK, Event.TOUCHSTART, Event.TOUCHMOVEThe events option defines the browser events that the chart should listen to.

Clicking

The click event is thrown if the browser event type is mouseup or click. To catch the event and manage it, you can add a ChartClickEventHandler instance to the chart options, as following:

// adds click event handler
chart.addHandler(new ChartClickEventHandler(){

/**
* Invoked when the user clicks on the chart.
*
* @param event chart click event
*/
@Override
public void onClick(ChartClickEvent event){
// logic
}

}, ChartClickEvent.TYPE);

Hovering

The hover event is thrown when any of the events fire on the chart. To catch the event and manage it, you can add a ChartHoverEvent instance to the chart options, as following:

// adds hover event handler
chart.addHandler(new ChartHoverEventHandler(){

/**
* Invoked when the user hovers on the chart.
*
* @param event chart hover event
*/
@Override
public void onHover(ChartHoverEvent event){
// logic
}

}, ChartHoverEvent.TYPE);

Resizing

The resize event is thrown when the chart has been resized. To catch the event and manage it, you can add a ChartResizeEventHandler instance to the chart options, as following:

// adds resize event handler
chart.addHandler(new ChartResizeEventHandler(){

/**
* Invoked when the chart has been resized.
*
* @param event chart resize event
*/
@Override
public void onResize(ChartResizeEvent event){
// logic
}

}, ChartResizeEvent.TYPE);

Selecting a dataset

When a click event is fired hovering a dataset element, you can add a DatasetSelectionEventHandler instance to the chart options and considering it how a dataset selection, as following:

// adds dataset selection event handler
chart.addHandler(new DatasetSelectionEventHandler(){

/**
* Invoked when the user clicks on the chart to select a dataset.
*
* @param event chart dataset selection event
*/
@Override
public void onSelect(DatasetSelectionEvent event){
// logic
}
}, DatasetSelectionEvent.TYPE);

The dataset selection event contains the selected dataset reference with all info about the selected dataset and item.

Title events

There are 3 different kinds of events that you can catch from the chart title:

  1. click, when you click on the title
  2. enter, when you enter on title element, hovering it.
  3. leave, when you leave from title element.

Clicking

The click event is throw if the event type is mouseup or click. When the event is fired hovering the title element, you can add a TitleClickEventHandler instance to the chart options, as following:

// adds title click event handler
chart.addHandler(new TitleClickEventHandler(){

/**
* Invoked when the user clicks on the chart title.
*
* @param event title click event
*/
@Override
public onClick(TitleClickEvent event){
// logic
}
}, TitleClickEvent.TYPE);

Entering

The enter event is throw if the event type is mousemove and you start hovering the title element. To catch the event and manage it, you can add a TitleEnterEventHandler instance to the chart options, as following:

// adds title enter event handler
chart.addHandler(new TitleHoverEventHandler(){

/**
* Invoked when the user enters on the chart title.
*
* @param event title enter event
*/
@Override
public void onEnter(TitleEnterEvent event) {
// logic
}
}, TitleEnterEvent.TYPE);

Leaving

The leave event is throw if the event type is mousemove and you end hovering the title element. To catch the event and manage it, you can add a TitleLeaveEventHandler instance to the chart options, as following:

// adds title leave event handler
chart.addHandler(new TitleLeaveEventHandler(){

/**
* Invoked when the user leaves on the chart title.
*
* @param event title leave event
*/
@Override
public void onLeave(TitleLeaveEvent event) {
// logic
}
}, TitleLeaveEvent.TYPE);

Subtitle events

There are 3 different kinds of events that you can catch from the chart subtitle:

  1. click, when you click on the subtitle
  2. enter, when you enter on subtitle element, hovering it.
  3. leave, when you leave from subtitle element.

Clicking

The click event is throw if the event type is mouseup or click. When the event is fired hovering the subtitle element, you can add a SubtitleClickEventHandler instance to the chart options, as following:

// adds subtitle click event handler
chart.addHandler(new SubtitleClickEventHandler(){

/**
* Invoked when the user clicks on the chart subtitle.
*
* @param event subtitle click event
*/
@Override
public onClick(SubtitleClickEvent event){
// logic
}
}, SubtitleClickEvent.TYPE);

Entering

The enter event is throw if the event type is mousemove and you start hovering the subtitle element. To catch the event and manage it, you can add a SubtitleEnterEventHandler instance to the chart options, as following:

// adds subtitle enter event handler
chart.addHandler(new SubtitleHoverEventHandler(){

/**
* Invoked when the user enters on the chart subtitle.
*
* @param event subtitle enter event
*/
@Override
public void onEnter(SubtitleEnterEvent event) {
// logic
}
}, SubtitleEnterEvent.TYPE);

Leaving

The leave event is throw if the event type is mousemove and you end hovering the subtitle element. To catch the event and manage it, you can add a SubtitleLeaveEventHandler instance to the chart options, as following:

// adds subtitle leave event handler
chart.addHandler(new SubtitleLeaveEventHandler(){

/**
* Invoked when the user leaves on the chart subtitle.
*
* @param event subtitle leave event
*/
@Override
public void onLeave(SubtitleLeaveEvent event) {
// logic
}
}, SubtitleLeaveEvent.TYPE);

Axes events

There are 4 different kinds of events that you can catch from the chart axis:

  1. click, when you click on the axis
  2. enter, when you enter on axis element, hovering it.
  3. hover, when you are hovering on the axis
  4. leave, when you leave from axis element.

The axis event contain the selected scale item with all info about the selected scale.

Due to charts can be created with specific axes, the axis event can provide the axis configurations if there are, enabling you to get the instance used to configure the chart.

Clicking

The click event is throw if the event type is mouseup or click. When the event is fired hovering an axis element, you can add a AxisClickEventHandler instance to the chart options, as following:

// adds axis click event handler
chart.addHandler(new AxisClickEventHandler(){

/**
* Invoked when the user clicks on the chart axis.
*
* @param event axis click event
*/
@Override
public onClick(AxisClickEvent event){
// logic
}
}, AxisClickEvent.TYPE);

Entering

The enter event is throw if the event type is mousemove and you start hovering the axis element. To catch the event and manage it, you can add a AxisEnterEventHandler instance to the chart options, as following:

// adds axis enter event handler
chart.addHandler(new AxisEnterEventHandler(){

/**
* Invoked when the user is entering on the chart axis.
*
* @param event axis enter event
*/
@Override
public void onEnter(AxisEnterEvent event) {
// logic
}
}, AxisEnterEvent.TYPE);

Hovering

The enter event is throw if the event type is mousemove and you are hovering the axis element. To catch the event and manage it, you can add a AxisHoverEventHandler instance to the chart options, as following:

// adds axis hover event handler
chart.addHandler(new AxisHoverEventHandler(){

/**
* Invoked when the user is hovering on the chart axis.
*
* @param event axis hover event
*/
@Override
public void onHover(AxisHoverEvent event) {
// logic
}
}, AxisHoverEvent.TYPE);

Leaving

The leave event is throw if the event type is mousemove and you end hovering the axis element. To catch the event and manage it, you can add a AxisLeaveEventHandler instance to the chart options, as following:

// adds axis leave event handler
chart.addHandler(new AxisLeaveEventHandler(){

/**
* Invoked when the user is leaving on the chart axis.
*
* @param event axis leave event
*/
@Override
public void onLeave(AxisLeaveEvent event) {
// logic
}
}, AxisLeaveEvent.TYPE);