react-d3 tooltip implementation.
- 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')
)
})()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>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!
npm install --save react-d3-tooltip
- 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
Apache 2.0
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent