@domoinc/area-tooltip

AreaTooltip

Configuration Options

borderColor

Type: color
Default: "#e4e5e5"

Color of the hover area border

chartName

Type: string
Default: "templateChart"

Name of chart for reporting

color

Type: color
Default: "#e4e5e5"

Color of the hover area

font

Type: font
Default: "Open Sans"

Font type for the tooltip text

height

Type: number
Default: 400
Units: px

Height of the hover area

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

opacityPercent

Type: number
Default: 0
Units: %

Transparency factor of the hover area (0 is transparent, 100 is full color)

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color for the tooltip

tooltipBodyFontColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip body text

tooltipBodyFontSize

Type: number
Default: 12
Units: px

Font size for the tooltip body text

tooltipBodyFontWeight

Type: select
Default: {"name":"300 - Light","value":300}

Greater values correspond to increased font boldness (some fonts do not support every value)

tooltipTitleFontColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip title

tooltipTitleFontSize

Type: number
Default: 12
Units: px

Font size for the tooltip title

tooltipTitleFontWeight

Type: select
Default: {"name":"300 - Light","value":300}

Greater values correspond to increased font boldness (some fonts do not support every value)

tooltipWidth

Type: number
Default: 200
Units: px

Width of the tooltip

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 400
Units: px

Width of the hover area

Data Definition

LinkURL

Type: string

Default validate:

function validate(d) {
	          return true;
	        }

Default accessor:

function accessor(line) {
	          return line[2];
	        }

Text

Type: string

Default validate:

function validate(d) {
	          return true;
	        }

Default accessor:

function accessor(line) {
	          return line[1];
	        }

Title

Type: string

Default validate:

function validate(d) {
	          return true;
	        }

Default accessor:

function accessor(line) {
	          return line[0];
	        }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var bodyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
var data = [
  ['Title', bodyText, 'https://www.domo.com/']
];

//Initialze the widget
var chartGroup = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g');
var chart = new AreaTooltip(chartGroup)
  .c({
    width: 250,
    height: 250,
    opacity: 100,
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);