nyurik / vega-tooltip

Tooltip Plugin for Vega-Lite

Tooltip for Vega & Vega-Lite

A tooltip plugin for Vega and Vega-Lite visualizations. This plugin implements a custom tooltip handler for Vega that uses custom HTML tooltips instead of the HTML title attribute.

Demo

http://vega.github.io/vega-tooltip/

Installing

NPM or Yarn

Use npm install vega-tooltip or yarn add vega-tooltip.

Using Vega-tooltip with a CDN

You can import vega-tooltip directly from jsDelivr. Replace [VERSION] with the version that you want to use.

<!-- Import Vega 3 & Vega-Lite 2 (does not have to be from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>

<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@[VERSION]"></script>

Usage and APIs

The simplest example is to use Vega-Embed.

vegaEmbed("#vis", spec)
  .then(function(result) {
    vegaTooltip.default(result.view);
  })
  .catch(console.error);

See the API documentation for details.

Tutorials

1. Creating Your Tooltip
2. Customizing Your Tooltip

Run Instructions

1. In the project folder vega-tooltip, type command yarn to install dependencies.
2. Then, type yarn start. This will build the library and start a web server.
3. In your browser, navigate to http://localhost:8000/, where you can see various Vega-Lite and Vega visualizations with tooltip interaction.