Skip to content

Latest commit

 

History

History
99 lines (69 loc) · 1.72 KB

container.md

File metadata and controls

99 lines (69 loc) · 1.72 KB

Container

Container component documents. Container component included title and svg component. This will create a your chart title and a blank svg.

Import

var Chart = require('react-d3-core').Chart;

Example

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

})()

Components

container component contains:

Settings props

You can customize Container component using the following properties.

Svg

see detail in Svg component

  • width
  • height
  • margins
  • id
  • svgClassName

Title

see detail in Title component

  • title
  • titleClassName

Legend

see detail in Legend component

New components or html tags in svg

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')
  )
})()