Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
- const data = [
- {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
- {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
- {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
- {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
- {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
- {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
- {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
- ];
- const texture = textures
- .lines();
- const TinyBarChart = React.createClass({
- componentDidMount() {
- var svgNode = ReactDOM.findDOMNode(this.svg).childNodes[0];
- console.log(svgNode);
- var d3Svg = d3.select(svgNode);
- d3Svg.call(texture);
- console.log(texture.url());
- },
- render () {
- return (
- <BarChart width={400} height={300} data={data} ref={(el) => { this.svg = el; }} >
- <Bar dataKey='uv' fill={texture.url()}/>
- </BarChart>
- );
- }
- })
- ReactDOM.render(
- <TinyBarChart />,
- document.getElementById('container')
- );
Add Comment
Please, Sign In to add comment