react-d3/react-d3-tooltip

Name: react-d3-tooltip

Owner: react-d3

Description: react-d3 tooltip implementation

Created: 2015-09-27 02:15:03.0

Updated: 2018-01-13 14:25:06.0

Pushed: 2017-03-10 13:52:51.0

Homepage: http://www.reactd3.org/docs/tooltip/

Size: 7560

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits
Howard Chi	2016-03-04 16:11:55.0	62
Alexandru Cobuz	2016-10-13 08:38:18.0	1
Udo Nkwocha	2016-11-25 15:17:00.0	16
Jack Hou	2015-12-06 17:55:18.0	5
Chi-Hsuan Huang	2015-11-24 09:49:06.0	1
JerryShen	2016-03-08 12:08:33.0	1

Other Committers

User	Email	Most Recent Commit	# Commits
Udo Nkwocha	nkudo@users.noreply.github.com	2016-04-07 14:28:30.0	2

README

react-d3-tooltip

react-d3 tooltip implementation.

Quick example

With webpack build tool

• line chart

 strict";

React = require('react');
ReactDOM = require('react-dom');
LineTooltip = require('react-d3-tooltip').LineTooltip;

ction() {

r generalChartData = require('json!./data/user.json');

r chartSeries = [
  {
    field: 'age',
    name: 'Age',
    color: '#ff7f0e'
  }
],
x = function(d) {
  return d.index;
}

actDOM.render(
  <LineTooltip
    width= {600}
    height= {300}
    data= {generalChartData}
    chartSeries= {chartSeries}
    x= {x}
  />
, document.getElementById('data_tooltip_line')

In html (without build tools)

Clone code react-d3-tooltip.js or minify js react-d3-tooltip.min.js and include the script in your HTML.

You'll also need react, react-dom, d3

CTYPE html>
l>
ead>
<title>
  Line Chart example
</title>
head>
ody>
<div id="data_tooltip_line"></div>
<script src="https://fb.me/react-0.14.2.js"></script>
<script src="https://fb.me/react-dom-0.14.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="../react-d3-tooltip.min.js"></script>
<script type="text/babel">
  var LineTooltip = ReactD3Tooltip.LineTooltip;

  var data = [
      {
          "age": 39,
          "index": 0
      },
      {
          "age": 38,
          "index": 1
      },
      {
          "age": 34,
          "index": 2
      },
      {
          "age": 12,
          "index": 3
      }
  ];

  var chartSeries = [
      {
        field: 'age',
        name: 'Age',
        color: '#ff7f0e',
        style: {
          "stroke-width": 2,
          "stroke-opacity": .2,
          "fill-opacity": .2
        }
      }
    ],
    x = function(d) {
      return d.index;
    }

  ReactDOM.render(
    <LineTooltip width= {600} height= {500} data= {data} chartSeries= {chartSeries} x= {x} />
  , document.getElementById('data_tooltip_line')
  )
</script>
body>
ml>

Customization

Choose one of the components in tooltip folder.

Then require it in your project, take simple as example.

After you require it, render the tooltip as children. Like below example.

SimpleTooltipStyle = require('react-d3-tooltip').SimpleTooltip;


tDOM.render(
<LineTooltip
  data= {generalChartData}
  chartSeries = {chartSeries}
  interpolate = {interpolate}
  x= {x}
  xScale= {xScale}
>
  <Simple/>  //<---------
</LineTooltip>

cument.getElementById('data_tooltip_line_multi')

Then you can change tooltip style!

Install

install --save react-d3-tooltip

Support Tooltip Component

• Line Chart: export as LineTooltip
• Area Stack Chart: export as AreaStackTooltip
• Scatter Plot: export as ScatterTooltip
• Bar Chart: export as BarTooltip
• Bar Stack: export as BarStackTooltip (you can now pass in onClick handler via props)
• Bar Group: export as BarGroupTooltip
• Pie Chart: export as PieTooltip

Gallery

License

Apache 2.0