mini-tooltip

Mini-tooltip

Mini Tooltip Component reusable API class that renders a simple and configurable tooltip element for Britechart's bar and step chart.

Requires: module:d3-array,
Example

const barChart = line(),
    miniTooltip = miniTooltip();

barChart
    .width(500)
    .height(300)
    .on('customMouseHover', miniTooltip.show)
    .on('customMouseMove', miniTooltip.update)
    .on('customMouseOut', miniTooltip.hide);

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

d3Selection.select('.metadata-group .mini-tooltip-container')
    .datum([])
    .call(miniTooltip);

• Mini-tooltip
  • exports(_selection) ⏏
    • .hide() ⇒ Module
    • .nameLabel(_x) ⇒ text | module
    • .numberFormat(_x) ⇒ string | module
    • .valueFormatter(_x) ⇒ function | module
    • .show() ⇒ Module
    • .title(_x) ⇒ string | module
    • .update(dataPoint, mousePosition, chartSize) ⇒ module
    • .valueLabel(_x) ⇒ text | module

exports(_selection) ⏏

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

exports.hide() ⇒ Module

Hides the tooltip

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

exports.nameLabel(_x) ⇒ text | module

Deprecated

Gets or Sets data's nameLabel

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

Param	Type	Description
_x	text	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	= '.2f' 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. Set by default to d3-format formatter with 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.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

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.update(dataPoint, mousePosition, chartSize) ⇒ module

Updates the position and content of the tooltip

Kind: static method of exports
Returns: module - Current component

Param	Type	Description
dataPoint	Object	Datapoint of the hovered element
mousePosition	Array	Mouse position relative to the parent chart [x, y]
chartSize	Array	Parent chart size [x, y]

exports.valueLabel(_x) ⇒ text | module

Deprecated

Gets or Sets data's valueLabel

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

Param	Type	Description
_x	text	Desired valueLabel