react-d3 / react-d3-tooltip

react-d3 tooltip implementation
http://www.reactd3.org/docs/tooltip/
23 stars 22 forks source link

react-d3-tooltip

Dependency Status

react-d3 tooltip implementation.

Quick example

With webpack build tool

"use strict";

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

(function() {

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

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

  ReactDOM.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

<!DOCTYPE html>
<html>
  <head>
    <title>
      Line Chart example
    </title>
  </head>
  <body>
    <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="https://github.com/react-d3/react-d3-tooltip/raw/master/./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>
</html>

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.

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

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

, document.getElementById('data_tooltip_line_multi')
)

Then you can change tooltip style!

Install

npm install --save react-d3-tooltip

Support Tooltip Component

Gallery

img

License

Apache 2.0