textures

react-textures.js

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')
);