barchart

by xu hang

HTML

<script src="https://npmcdn.com/react@15.6.2/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.6.2/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/prop-types/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/victory/0.24.0/victory.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  margin: 0;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 600px;
  height: 600px;
  background-color: #fff;
}

Babel + JSX

const {  VictoryChart, VictoryBar,VictoryPie ,
  VictoryAxis, VictoryLegend, VictoryLabel ,VictoryTheme} = Victory;
 
 const colors = [
  '#F56D00', '#9F3AB7', '#64CCE9', '#32120A',
  '#F8984C', '#BB75CC', '#92DBEF', '#6F5953',
  '#FABD8C', '#D4A6DE', '#B9E8F5', '#A39491']
class DonutChart extends React.Component {

  static propTypes = {
    data: PropTypes.arrayOf(PropTypes.object).isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
    innerRadius: PropTypes.number.isRequired
  }

  render() {
    let { data, innerRadius, width, height } = this.props
    const colorScale = colors.slice(0, data.length)
    const total = data.reduce((a, b) => ({ y: a.y + b.y }))
    const viewBox = `0 0 ${width} ${height}`

    const legendDataWithStyle = data.map((dateItem, index) => {
      return { name : dateItem.x, symbol: { fill: colors[index], type: "square" } }
    }
    )


    return (
      <div style={{ width: width + 100, height: height + 100 }} >
        <svg viewBox={viewBox}>
   

          <VictoryPie
            standalone={false}
            width={width} height={height}
            data={data}
            innerRadius={innerRadius}
            colorScale={colorScale}
            
          />
          <VictoryLabel
            textAnchor="middle"
            style={{ fontSize: 20 }}
            x={width / 2} y={height / 2}
            text={total.y}
          />

          <VictoryLegend x={width - 50} y={30}
            title="Totals"
            centerTitle
            orientation="vertical"
            gutter={20}
            style={{
              title: { fontSize: 15 }
            }}
            data={legendDataWithStyle}
            standalone={false}
          />



        </svg>
      </div>
    )
  }
}

const dounutData = [
  { x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 },
  { x: 'd', y: 4 }, { x: 'e', y: 2 }, { x: 'f', y: 6 }
];


ReactDOM.render(
<DonutChart data={dounutData} width={300}...