tooltip

Tooltip

Tooltip Component reusable API class that renders a simple and configurable tooltip element for Britechart's line chart or stacked area chart.

Requires: module:d3-array,
Example

const lineChart = line(),
    tooltip = tooltip();

tooltip
    .title('Tooltip title');

lineChart
    .width(500)
    .on('customMouseOver', function() {
         tooltip.show();
    })
    .on('customMouseMove', function(dataPoint, topicColorMap, dataPointXPosition) {
         tooltip.update(dataPoint, topicColorMap, dataPointXPosition);
    })
    .on('customMouseOut', function() {
         tooltip.hide();
    });

d3Selection.select('.css-selector')
    .datum(dataset)
    .call(lineChart);

d3Selection.select('.metadata-group .hover-marker')
    .datum([])
    .call(tooltip);

• Tooltip
  • exports(_selection, _data) ⏏
    • .axisTimeCombinations
    • .dateFormat(_x) ⇒ String | module
    • .dateCustomFormat(_x) ⇒ String | module
    • .dateLabel(_x) ⇒ String | module
    • .hide() ⇒ module
    • .locale(_x) ⇒ String | module
    • .nameLabel(_x) ⇒ String | module
    • .numberFormat(_x) ⇒ string | module
    • .valueFormatter(_x) ⇒ function | module
    • .shouldShowDateInTitle(_x) ⇒ Boolean | module
    • .show() ⇒ module
    • .title(_x) ⇒ String | module
    • .tooltipOffset(tooltipOffset) ⇒ Object | module
    • .topicsOrder(_x) ⇒ Array.<String> | module
    • .topicLabel(_x) ⇒ String | module
    • .update(dataPoint, colorMapping, position) ⇒ Module
    • .valueLabel(_x) ⇒ String | module
    • .xAxisValueType([_x]) ⇒ String | module

exports(_selection, _data) ⏏

This function creates the graph using the selection as container

Kind: Exported function

Param	Type	Description
_selection	D3Selection	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	Object	The data to attach and generate the chart

exports.axisTimeCombinations

constants to be used to force the x axis to respect a certain granularity current options: HOUR_DAY, DAY_MONTH, MONTH_YEAR

Kind: static property of exports
Example

tooltip.dateFormat(tooltip.axisTimeCombinations.HOUR_DAY)

exports.dateFormat(_x) ⇒ String | module

Exposes the ability to force the tooltip to use a certain date format

Kind: static method of exports
Returns: String | module - Current format or module to chain calls
Access: public

Param	Type	Description
_x	String	Desired format

exports.dateCustomFormat(_x) ⇒ String | module

Exposes the ability to use a custom date format

Kind: static method of exports
Returns: String | module - Current format or module to chain calls
Access: public

Param	Type	Description
_x	String	Desired custom format

Example

tooltip.dateFormat(tooltip.axisTimeCombinations.CUSTOM);
tooltip.dateCustomFormat('%H:%M %p')

exports.dateLabel(_x) ⇒ String | module

Deprecated

Gets or Sets the dateLabel of the data

Kind: static method of exports
Returns: String | module - Current dateLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired dateLabel

exports.hide() ⇒ module

Hides the tooltip

Kind: static method of exports
Returns: module - Tooltip module to chain calls
Access: public

exports.locale(_x) ⇒ String | module

Pass locale for the tooltip to render the date in

Kind: static method of exports
Returns: String | module - Current locale or module to chain calls
Access: public

Param	Type	Description
_x	String	Must be a locale tag like 'en-US' or 'fr-FR'

exports.nameLabel(_x) ⇒ String | module

Deprecated

Gets or Sets the nameLabel of the data

Kind: static method of exports
Returns: String | module - Current nameLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired nameLabel

exports.numberFormat(_x) ⇒ string | module

Gets or Sets the number format for the value displayed on the tooltip

Kind: static method of exports
Returns: string | module - Current numberFormat or Chart module to chain calls
Access: public

Param	Type	Description
_x	string	Desired numberFormat for the chart. See examples here

exports.valueFormatter(_x) ⇒ function | module

Gets or Sets the formatter function for the value displayed on the tooltip. Setting this property makes the tooltip ignore numberFormat.

Kind: static method of exports
Returns: function | module - Current valueFormatter or Chart module to chain calls
Access: public

Param	Type	Description
_x	function	Desired formatter function

Example

tooltipChart.valueFormatter(value => value.toString().length.toString())

exports.shouldShowDateInTitle(_x) ⇒ Boolean | module

Gets or Sets shouldShowDateInTitle

Kind: static method of exports
Returns: Boolean | module - Current shouldShowDateInTitle or Chart module to chain calls
Access: public

Param	Type	Description
_x	Boolean	Desired value

exports.show() ⇒ module

Shows the tooltip

Kind: static method of exports
Returns: module - Tooltip module to chain calls
Access: public

exports.title(_x) ⇒ String | module

Gets or Sets the title of the tooltip (to only show the date, set a blank title)

Kind: static method of exports
Returns: String | module - Current title or module to chain calls
Access: public

Param	Type	Description
_x	String	Desired title

exports.tooltipOffset(tooltipOffset) ⇒ Object | module

Pass an override for the offset of your tooltip

Kind: static method of exports
Returns: Object | module - Current tooltipOffset
Access: public

Param	Type	Description
tooltipOffset	Object	Object representing the X and Y offsets

exports.topicsOrder(_x) ⇒ Array.<String> | module

Pass an override for the ordering of your tooltip

Kind: static method of exports
Returns: Array.<String> | module - Current overrideOrder or Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<String>	Array of the names of your tooltip items

exports.topicLabel(_x) ⇒ String | module

Deprecated

Gets or Sets the topicLabel of the data

Kind: static method of exports
Returns: String | module - Current topicLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired topicLabel

exports.update(dataPoint, colorMapping, position) ⇒ Module

Updates the position and content of the tooltip

Kind: static method of exports
Returns: Module - Tooltip module to chain calls
Access: public

Param	Type	Description
dataPoint	Object	Datapoint to represent
colorMapping	Object	Color scheme of the topics
position	Number	X-scale position in pixels

exports.valueLabel(_x) ⇒ String | module

Deprecated

Gets or Sets the valueLabel of the data

Kind: static method of exports
Returns: String | module - Current valueLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired valueLabel

exports.xAxisValueType([_x]) ⇒ String | module

Gets or Sets the xAxisValueType of the data. Choose between 'date' and 'number'. When set to number, the x-Axis values won't be parsed as dates anymore, but as numbers.

Kind: static method of exports
Returns: String | module - Current keyType or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	String	'date'	Desired keyType