Welcome to the “Interaction - popups and markers” tutorial. In this tutorial you will learn:
Popups and markers display additional information associated with a value point when the user “hovers” with the mouse over the chart. So the user doesn't have to try to estimate what the value could be according to the axis labels, but can simply read off the exact data value.
Popups are very versatile and can be used in any kind of chart. Markers are more limited but are great if you have a very large value set in a line chart which has too many value points to select an explicit value point with your mouse cursor. Markers can only be used with a single value line. Using them with multiple value lines could make the marker bubbles overlap each other and become illegible.
When you activate the popup feature, a balloon is displayed when the mouse cursor is moved above a value point, a bar in a barchart or above a pie chart slice.
Popups are activated / deactivated with setShowPopup( true/false )
. See the example below illustrating how to turn on popup display.
new ac.ACLineCharBuilder() // ... .setShowPopup(true) // ...
This will enable popups for all value lines. Please refer to the reference manual for further information on how to set popups for individual value lines and setting individual formatting and styling for a popup.
The behavior of a marker differs from that of a popup. It “follows” the mouse when the user moves the mouse within the chart area and displays the current values in little popup-boxes. The x-axis value is displayed at the bottom of the marker line on the x-axis and the y-axis value is displayed next to the appropriate value point.
The marker is activated with the setShowMarker( true )
command as shown in the example below:
new ac.ACLineChartBuilder() // ... .setShowMarker(true) // ...
Please refer to the reference manual for further information on how to format and style a marker.
Congratulations, now you can use popups and markers in your chart.