Container component documents. Container component included title and svg component. This will create a your chart title and a blank svg
.
var Chart = require('react-d3-core').Chart;
var React = require('react');
var Chart = require('react-d3-core').Chart;
// Example
(function() {
var width = 960,
height = 500,
margins = {top: 20, right: 50, bottom: 20, left: 50},
id = "test-chart",
svgClassName = "test-chart-class",
titleClassName = "test-chart-title-class";
var title = "test chart lib"
React.render(
<Chart
title= {title}
width= {width}
height= {height}
margins= {margins}
id= {id}
svgClassName= {svgClassName}
titleClassName= {titleClassName}
/>
, document.getElementById('blank-container'))
})()
container
component contains:
You can customize Container
component using the following properties.
see detail in Svg component
- width
- height
- margins
- id
- svgClassName
see detail in Title component
- title
- titleClassName
see detail in Legend component
If you have new group
, rect
, text
and you want to put into the svg
that you have just created. Put it in the <Chart>put your things here... </Chart>
.
For example:
var React = require('react');
var Chart = require('react-d3-core').Chart;
(function() {
React.render(
<Chart {...this.props}>
<g>
<text></text>
</g>
</Chart>
, document.getElementById('new-id')
)
})()