Package org.zkoss.chart

Class Tooltip

    • Constructor Detail

      • Tooltip

        public Tooltip()

    • Method Detail

      • isAnimation

        public boolean isAnimation()
        Returns whether to enable or disable animation of the tooltip. In slow legacy IE browsers the animation is disabled by default.

        Default: true.

      • setAnimation

        public void setAnimation​(boolean animation)
        Sets whether to enable or disable animation of the tooltip. In slow legacy IE browsers the animation is disabled by default.

      • getBackgroundColor

        public Color getBackgroundColor()
        Returns the background color or gradient for the tooltip.

        Default: "rgba(255, 255, 255, 0.85)".

      • setBackgroundColor

        public void setBackgroundColor​(Color color)
        Sets the background color or gradient for the tooltip.

      • setBackgroundColor

        public void setBackgroundColor​(String color)
        Sets the background color or gradient for the tooltip.

      • setBackgroundColor

        public void setBackgroundColor​(LinearGradient color)
        Sets the background color or gradient for the tooltip.

      • setBackgroundColor

        public void setBackgroundColor​(RadialGradient color)
        Sets the background color or gradient for the tooltip.

      • getBorderColor

        public Color getBorderColor()
        Returns the color of the tooltip border. When null, the border takes the color of the corresponding series or point.

        Default: "auto".

      • setBorderColor

        public void setBorderColor​(Color color)
        Sets the color of the tooltip border. When null, the border takes the color of the corresponding series or point.

      • setBorderColor

        public void setBorderColor​(String color)
        Sets the color of the tooltip border. When null, the border takes the color of the corresponding series or point.

      • setBorderColor

        public void setBorderColor​(LinearGradient color)
        Sets the color of the tooltip border. When null, the border takes the color of the corresponding series or point.

      • setBorderColor

        public void setBorderColor​(RadialGradient color)
        Sets the color of the tooltip border. When null, the border takes the color of the corresponding series or point.

      • getBorderRadius

        public Object getBorderRadius()
        Returns the radius of the rounded border corners.

        Default: 3.

        Returns:
        borderRadius the radius of the rounded border corners.

      • setBorderRadius

        public void setBorderRadius​(Number borderRadius)
        Sets the radius of the rounded border corners.
        Parameters:
        borderRadius - the radius of the rounded border corners

      • setBorderRadius

        public void setBorderRadius​(String borderRadius)
        Sets the radius of the rounded border corners.
        Parameters:
        borderRadius - the radius of the rounded border corners

      • getBorderWidth

        public Number getBorderWidth()
        Returns the pixel width of the tooltip border.

        Default: 1.

        Returns:
        borderWidth the pixel width of the tooltip border.

      • setBorderWidth

        public void setBorderWidth​(Number borderWidth)
        Sets the pixel width of the tooltip border.
        Parameters:
        borderWidth - the pixel width of the tooltip border

      • getCrosshairs

        public Object getCrosshairs()
        Returns display crosshairs to connect the points with their corresponding axis values. The crosshairs can be defined as a boolean, an array of booleans or an object.
        Boolean
        If the crosshairs option is true, a single crosshair relating to the x axis will be shown.
        Array of booleans
        In an array of booleans, the first value turns on the x axis crosshair and the second value to the y axis crosshair. Use [true, true] to show complete crosshairs.
        Array of objects
        In an array of objects, the first value applies to the x axis crosshair and the second value to the y axis crosshair. For each dimension, a width, color, dashStyle and zIndex can be given.

        Defaults to null.

      • setCrosshairs

        public void setCrosshairs​(Boolean crosshairs)
        Sets display crosshairs to connect the points with their corresponding axis values. The crosshairs can be defined as a boolean, an array of booleans or an object.
        Boolean
        If the crosshairs option is true, a single crosshair relating to the x axis will be shown.
        Array of booleans
        In an array of booleans, the first value turns on the x axis crosshair and the second value to the y axis crosshair. Use [true, true] to show complete crosshairs.
        Array of objects
        In an array of objects, the first value applies to the x axis crosshair and the second value to the y axis crosshair. For each dimension, a width, color, dashStyle and zIndex can be given.

        Defaults to null.

      • setCrosshairs

        public void setCrosshairs​(List<Object> crosshairs)
        Sets display crosshairs to connect the points with their corresponding axis values. The crosshairs can be defined as a boolean, an array of booleans or an object.
        Boolean
        If the crosshairs option is true, a single crosshair relating to the x axis will be shown.
        Array of booleans
        In an array of booleans, the first value turns on the x axis crosshair and the second value to the y axis crosshair. Use [true, true] to show complete crosshairs.
        Array of objects
        In an array of objects, the first value applies to the x axis crosshair and the second value to the y axis crosshair. For each dimension, a width, color, dashStyle and zIndex can be given.

        Defaults to null.

      • getDateTimeLabelFormats

        public DateTimeLabelFormats getDateTimeLabelFormats()
        Returns the date format in the tooltip's header

        For series on a datetime axes, the date format in the tooltip's header will by default be guessed based on the closest data points. This member gives the default string representations used for each unit. For an overview of the replacement codes, see Charts.setDateFormat(String, Number, boolean).

        Defaults: 

         {
     millisecond:"%A, %b %e, %H:%M:%S.%L",
     second:"%A, %b %e, %H:%M:%S",
     minute:"%A, %b %e, %H:%M",
     hour:"%A, %b %e, %H:%M",
     day:"%A, %b %e, %Y",
     week:"Week from %A, %b %e, %Y",
     month:"%B %Y",
     year:"%Y"
 }

      • setDateTimeLabelFormats

        public void setDateTimeLabelFormats​(DateTimeLabelFormats dateTimeLabelFormats)
        Sets the date format in the tooltip's header

        For series on a datetime axes, the date format in the tooltip's header will by default be guessed based on the closest data points. This member gives the default string representations used for each unit. For an overview of the replacement codes, see Charts.setDateFormat(String, Number, boolean).

      • isEnabled

        public boolean isEnabled()
        Returns whether to enable or disable the tooltip.

        Default: true.

      • setEnabled

        public void setEnabled​(boolean enabled)
        Sets whether to enable or disable the tooltip.

      • isFollowPointer

        public boolean isFollowPointer()
        Returns whether the tooltip should follow the mouse as it moves across columns, pie slices and other point types with an extent. By default it behaves this way for scatter, bubble and pie series by override in the plotOptions for those series types.

        For touch moves to behave the same way, setFollowTouchMove(boolean) must be true also.

        Default: false.

      • setFollowPointer

        public void setFollowPointer​(boolean followPointer)
        Sets whether the tooltip should follow the mouse as it moves across columns, pie slices and other point types with an extent. By default it behaves this way for scatter, bubble and pie series by override in the plotOptions for those series types.

        For touch moves to behave the same way, setFollowTouchMove(boolean) must be true also.

      • isFollowTouchMove

        public boolean isFollowTouchMove()
        Returns whether the tooltip should follow the finger as it moves on a touch device. The default value of false causes a touch move to scroll the web page, as is default behaviour on touch devices. Setting it to true may cause the user to be trapped inside the chart and unable to scroll away, so it should be used with care. If Chart.setZoomType(String) is set, it will override setFollowTouchMove(boolean).

        Default: false.

      • setFollowTouchMove

        public void setFollowTouchMove​(boolean followTouchMove)
        Sets whether the tooltip should follow the finger as it moves on a touch device. The default value of false causes a touch move to scroll the web page, as is default behaviour on touch devices. Setting it to true may cause the user to be trapped inside the chart and unable to scroll away, so it should be used with care. If Chart.setZoomType(String) is set, it will override setFollowTouchMove(boolean).

      • getFooterFormat

        public String getFooterFormat()
        Returns a string to append to the tooltip format.

        Default: false.

      • setFooterFormat

        public void setFooterFormat​(String footerFormat)
        Sets a string to append to the tooltip format.

      • getFormat

        public String getFormat()
        Returns a format text of the tooltip.

        Default: null.

      • setFormat

        public void setFormat​(String format)
        Sets a format text of the tooltip.

        Default: null.

      • getFormatter

        public org.zkoss.json.JavaScriptValue getFormatter()
        Callback function to format the text of the tooltip. Return false to disable tooltip for a specific point on series. A subset of HTML is supported. The HTML of the tooltip is parsed and converted to SVG, therefore this isn't a complete HTML renderer. The following tabs are supported: <b>, <strong>, <i>, <em>, <br/> , <span>. Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled.

        Since version 2.1 the tooltip can be shared between multiple series through the shared option. The available data in the formatter differ a bit depending on whether the tooltip is shared or not. In a shared tooltip, all properties except x, which is common for all points, are kept in an array, this.points.

        Available data are: 

        this.percentage (not shared) / this.points[i].percentage (shared)
     Stacked series and pies only. The point's percentage of the total.
        this.point (not shared) / this.points[i].point (shared)
     The point object. The point name, if defined, is available through
     this.point.name.
        this.points
     In a shared tooltip, this is an array containing all other properties
     for each point.
        this.series (not shared) / this.points[i].series (shared)
     The series object. The series name is available through this.series.name.
        this.total (not shared) / this.points[i].total (shared)
     Stacked series only. The total value at this point's x value.
        this.x
     The x value. This property is the same regardless of the tooltip
     being shared or not.
        this.y (not shared) / this.points[i].y (shared)
     The y value.
        Returns:
        the callback function
        Since:
        2.1.0

      • setFormatter

        public void setFormatter​(org.zkoss.json.JavaScriptValue formatter)
        Set the callback function to format the HTML output of the tooltip.
        Parameters:
        formatter -
        Since:
        2.1.0
        See Also:
        getFormatter()

      • getHeaderFormat

        public String getHeaderFormat()
        Returns the HTML of the tooltip header line. Variables are enclosed by curly brackets. Available variables are point.key, series.name, series.color and other members from the point and series objects. The point.key variable contains the category name, x value or datetime string depending on the type of axis. For datetime axes, the point.key date format can be set using tooltip.xDateFormat.

        Default: <span style="font-size: 10px">{point.key}</span><br/>

      • setHeaderFormat

        public void setHeaderFormat​(String headerFormat)
        Sets the HTML of the tooltip header line. Variables are enclosed by curly brackets. Available variables are point.key, series.name, series.color and other members from the point and series objects. The point.key variable contains the category name, x value or datetime string depending on the type of axis. For datetime axes, the point.key date format can be set using tooltip.xDateFormat.

      • getHideDelay

        public Number getHideDelay()
        Returns the number of milliseconds to wait until the tooltip is hidden when mouse out from a point or chart.

        Default: 500.

      • setHideDelay

        public void setHideDelay​(Number hideDelay)
        Sets the number of milliseconds to wait until the tooltip is hidden when mouse out from a point or chart.

      • getNodeFormat

        public String getNodeFormat()
        Returns the format string specifying what to show for nodes in tooltip of a diagram series, as opposed to links.

        Default: "{point.name}: <b>{point.sum}</b><br/>"

        Since:
        11.2.0.0

      • setNodeFormat

        public void setNodeFormat​(String nodeFormat)
        Sets the format string specifying what to show for nodes in tooltip of a diagram series, as opposed to links.

        Since:
        11.2.0.0

      • getNullFormat

        public String getNullFormat()
        Returns the HTML of the null point's line in the tooltip. Works analogously to pointFormat.

        Default: null

        Since:
        11.2.0.0

      • setNullFormat

        public void setNullFormat​(String nullFormat)
        Sets the HTML of the null point's line in the tooltip. Works analogously to pointFormat.
        Since:
        11.2.0.0

      • isOutside

        public boolean isOutside()
        Returns whether to allow the tooltip to render outside the chart's SVG element box. By default (false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. When true, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.

        Default: true if chart.scrollablePlotArea is activated, otherwise false.

        Since:
        7.2.1.0

      • setOutside

        public void setOutside​(boolean outside)
        Sets whether to allow the tooltip to render outside the chart's SVG element box. For small charts, this may result in clipping or overlapping. When true, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
        Since:
        7.2.1.0

      • getPointFormat

        public String getPointFormat()
        Returns the HTML of the point's line in the tooltip. Variables are enclosed by curly brackets. Available variables are point.x, point.y, series.name and series.color and other properties on the same form. Furthermore, point.y can be extended by the tooltip.yPrefix and tooltip.ySuffix variables. This can also be overridden for each series, which makes it a good hook for displaying units.

        Default: <span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>

      • setPointFormat

        public void setPointFormat​(String pointFormat)
        Sets the HTML of the point's line in the tooltip. Variables are enclosed by curly brackets. Available variables are point.x, point.y, series.name and series.color and other properties on the same form. Furthermore, point.y can be extended by the tooltip.yPrefix and tooltip.ySuffix variables. This can also be overridden for each series, which makes it a good hook for displaying units.

      • getPointFormatter

        public org.zkoss.json.JavaScriptValue getPointFormatter()
        A callback function for formatting the HTML output for a single point in the tooltip. Like the pointFormat string, but with more flexibility.

        The this keyword refers to the Point object.

        Since:
        2.1.0

      • setPointFormatter

        public void setPointFormatter​(org.zkoss.json.JavaScriptValue pointFormatter)
        Set a callback function for formatting the HTML output for a single point in the tooltip.

        For example: To have a point display three times its value in the tooltip 

        
 setPointFormatter(new JavaScriptValue(){ return (this.y * 3); });
        Parameters:
        pointFormatter -
        Since:
        2.1.0
        See Also:
        getPointFormatter()

      • getPositioner

        public org.zkoss.json.JavaScriptValue getPositioner()
        Returns a callback function to place the tooltip in a default position. The callback receives three parameters: labelWidth, labelHeight and point, where point contains values for plotX and plotY telling where the reference point is in the plot area. Add chart.plotLeft and chart.plotTop to get the full coordinates. When tooltip.split option is enabled, positioner is called for each of the boxes separately, including xAxis header. xAxis header is not a point, instead point argument contains info: { plotX: Number, plotY: Number, isHeader: Boolean } The return should be an object containing x and y values, for example { x: 100, y: 100 }.

        Default: null

        Since:
        7.2.1.0

      • setPositioner

        public void setPositioner​(org.zkoss.json.JavaScriptValue positioner)
        Sets a callback function to place the tooltip in a default position. The callback receives three parameters: labelWidth, labelHeight and point, where point contains values for plotX and plotY telling where the reference point is in the plot area. Add chart.plotLeft and chart.plotTop to get the full coordinates. When tooltip.split option is enabled, positioner is called for each of the boxes separately, including xAxis header. xAxis header is not a point, instead point argument contains info: { plotX: Number, plotY: Number, isHeader: Boolean } The return should be an object containing x and y values, for example { x: 100, y: 100 }.
        Since:
        7.2.1.0

      • isShadow

        public boolean isShadow()
        Returns whether to apply a drop shadow to the tooltip.

        Default: true.

      • setShadow

        public void setShadow​(boolean shadow)
        Sets whether to apply a drop shadow to the tooltip.

      • isShared

        public boolean isShared()
        Returns whether the tooltip is shared. When the tooltip is shared, the entire plot area will capture mouse movement. Tooltip texts for series types with ordered data (not pie, scatter, flags etc) will be shown in a single bubble. This is recommended for single series charts and for tablet/mobile optimized charts.

        Default: false.

      • setShared

        public void setShared​(boolean shared)
        Sets whether the tooltip is shared. When the tooltip is shared, the entire plot area will capture movement. Tooltip texts for series types with ordered data (not pie, scatter, flags etc) will be shown in a single bubble. This is recommended for single series charts and for tablet/mobile optimized charts.

      • getSnap

        public Number getSnap()
        Returns proximity snap for graphs or single points. Does not apply to bars, columns and pie slices. It defaults to 10 for mouse-powered devices and 25 for touch devices.

        Default: null

      • setSnap

        public void setSnap​(Number snap)
        Sets proximity snap for graphs or single points. Does not apply to bars, columns and pie slices. It defaults to 10 for mouse-powered devices and 25 for touch devices.

      • isSplit

        public boolean isSplit()
        Returns whether split the tooltip into one label per series, with the header close to the axis. This is recommended over shared tooltips for charts with multiple line series, generally making them easier to read. This option takes precedence over tooltip.shared.

        Default: false

        Since:
        7.2.2.0

      • setSplit

        public void setSplit​(boolean split)
        Sets whether split the tooltip into one label per series, with the header close to the axis. This is recommended over shared tooltips for charts with multiple line series, generally making them easier to read. This option takes precedence over tooltip.shared.
        Since:
        7.2.2.0

      • isStickOnContact

        public boolean isStickOnContact()
        Returns whether prevents the tooltip from switching or closing when touched or pointed.

        Default: false

        Since:
        11.2.0.0

      • setStickOnContact

        public void setStickOnContact​(boolean stickOnContact)
        Sets whether prevents the tooltip from switching or closing when touched or pointed.
        Since:
        11.2.0.0

      • getStyle

        public <K,​V> Map<K,​V> getStyle()
        Returns CSS styles for the tooltip. The tooltip can also be styled through the CSS class .highcharts-tooltip. Default value: 
         color: #333333; fontSize: 12px; padding: 8px;
        Type Parameters:
        K - type for the key

        if style was set using setStyle(String), type will be String

        if style was set using setStyle(Map), type will be the same as the type from the key of the map

        if style was not set, default style will be applied, and type will be String

        V - type for the value

        if style was set using setStyle(String), type will be String

        if style was set using setStyle(Map), type will be the same as the type from the key of the map

        if style was not set, default style will be applied, and type will be String

      • setStyle

        public void setStyle​(String style)
        Sets CSS styles for the tooltip. The tooltip can also be styled through the CSS class .highcharts-tooltip.

        This method allows simple settings like 

        
 label.setStyle("fontWeight: 'bold'; color: 'white'; textShadow: '0px 1px 2px black'");

        In the format of CSS key:value, and ";" separating multiple key:value pairs, if you have more a complex CSS styling, we recommend using setStyle(Map)

        Parameters:
        style - one or many CSS key:value pairs in a single line string format

      • setStyle

        public <K,​V> void setStyle​(Map<K,​V> style)
        Sets CSS styles for the tooltip. The tooltip can also be styled through the CSS class .highcharts-tooltip.

        This method allows complex styling like: 

         
 Map<String, Object> styles = new HashMap<String, Object>();
 styles.put("fill", "#E8E8EA");
 styles.put("stroke", "#6E6E78");
 styles.put("stroke-width", "1");
 styles.put("r", "0");
 Map<String, Object> states = new HashMap<String, Object>();
 Map<String, String> hover = new HashMap<String, String>();
 hover.put("fill", "#F4F4F6");
 hover.put("stroke", "#6E6E78");
 hover.put("stroke-width", "1");
 hover.put("r", "0");
 states.put("hover", hover);
 styles.put("states", states);
 Map<String, String> style = new HashMap<String, String>();
 style.put("color", "#4D5663");
 style.put("fontSize", "12px");
 style.put("fontFamily", "'Arial'");
 style.put("fontWeight", "normal");
 style.put("padding", "10px");
 styles.put("style", style);
        which will generate the final results like: 
        
 {
     "fill": "#E8E8EA",
     "stroke": "#6E6E78",
     "stroke-width": "1",
     "r": "0",
     "states":
     {
         "hover":
         {
             "fill": "#F4F4F6",
             "stroke": "#6E6E78",
             "stroke-width": "1",
             "r": "0"
         }
     },
     "style":
     {
         "color": "#4D5663",
         "fontSize": "12px",
         "fontFamily": "'Arial'",
         "fontWeight": "normal",
         "padding": "10px"
     }
 }
        Type Parameters:
        K - Type for the key, usually String
        V - Type for the value, usually String. For nested maps, use Object or any other type.
        Parameters:
        style - the style object

      • isUseHTML

        public boolean isUseHTML()
        Returns whether to use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip. It is also recommended for rtl languages as it works around rtl bugs in early Firefox.

        Default: false.

      • setUseHTML

        public void setUseHTML​(boolean useHTML)
        Sets whether to use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip. It is also recommended for rtl languages as it works around rtl bugs in early Firefox.

      • getValueDecimals

        public Number getValueDecimals()
        Returns how many decimals to show in each series' y value. This is overridable in each series' tooltip options object. The default is to preserve all decimals.

        Default: null.

      • setValueDecimals

        public void setValueDecimals​(Number valueDecimals)
        Sets how many decimals to show in each series' y value. This is overridable in each series' tooltip options object. The default is to preserve all decimals.

      • getValuePrefix

        public String getValuePrefix()
        Returns a string to prepend to each series' y value. Overridable in each series' tooltip options object.

        Default: null.

      • setValuePrefix

        public void setValuePrefix​(String valuePrefix)
        Sets a string to prepend to each series' y value. Overridable in each series' tooltip options object.

      • getValueSuffix

        public String getValueSuffix()
        Returns a string to append to each series' y value. Overridable in each series' tooltip options object.

        Default: null.

      • setValueSuffix

        public void setValueSuffix​(String valueSuffix)
        Sets the string to append to each series' y value. Overridable in each series' tooltip options object.

      • getXDateFormat

        public String getXDateFormat()
        Returns the format for the date in the tooltip header if the X axis is a datetime axis. The default is a best guess based on the smallest distance between points in the chart.

        Default: null.

      • setXDateFormat

        public void setXDateFormat​(String xDateFormat)
        Sets the format for the date in the tooltip header if the X axis is a datetime axis. The default is a best guess based on the smallest distance between points in the chart.

      • getZIndex

        public Number getZIndex()
        Returns the Z index for the tooltip.

        Default: null

        Since:
        11.2.0.0

      • setZIndex

        public void setZIndex​(Number zIndex)
        Sets the Z index for the tooltip.
        Since:
        11.2.0.0