Noncollinear Perpendicular Microcrystalline

    @roadmanfong/react-d3-tooltip

    1.4.12 • 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

    Install

    npm i @roadmanfong/react-d3-tooltip

    DownloadsWeekly Downloads

    3

    Version

    1.4.12

    License

    Apache 2.0

    Last publish

    Collaborators

    • roadmanfong