react-d3-tooltip

1.4.14 • Public • Published

react-d3-tooltip

Dependency Status

react-d3 tooltip implementation.

Quick example

With webpack build tool

  • line chart
"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="../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

  • 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

img

License

Apache 2.0

Readme

Keywords

Package Sidebar

Install

npm i react-d3-tooltip

Weekly Downloads

16

Version

1.4.14

License

Apache 2.0

Last publish

Collaborators

  • vbhati
  • ud
  • chihsuan
  • chilijung