diffract

import React, {Component} from 'react';
import ReactDom from 'react-dom';
import {Chart, DataSeries, Pie} from 'diffract';

const DonutDemo = () => (
  <Chart width={width} height={height}>
      <DataSeries data={this.state.values}>
          <Pie innerRadius={75} outerRadius={110}
              onClick={(e, v, i) => console.log(this.state.labels[i] + ' clicked')}
              style={(d, i) => ({fill: this.getColors(i)})}>
              <text className="donut-title" textAnchor="middle"
                  x={0} y={0} fontSize={18}>
                  {'Hello'}
              </text>
              <text className="donut-subtitle" textAnchor="middle"
                  x={0} y={18} fontSize={10}>
                  {'diffract'}
              </text>
          </Pie>
      </DataSeries>
  </Chart>
);
React.render(
  <DonutDemo/>;,
  document.getElementById( 'donutDemo' )
);

import React, {Component} from 'react';
import ReactDom from 'react-dom';
import {
    util, Chart, DataSeries, BarChart, XAxis, YAxis
} from 'diffract';

const BarGraphDemo = () => (
  <Chart width={width} height={height}
      margin={margins}>
      <DataSeries data={this.state.values}
          xScale={xScale} yScale={yScale}>
          <BarChart onClick={(e, v, i) => console.log(this.state.labels[i] + ' clicked')}
              style={(d, i) => ({fill: this.getColors(i)})}/>
          <XAxis textRotation={30} tickFormat={(d, i) => this.state.labels[i]} debug/>
          <YAxis
              tickFormat={d => {
                  return d;
              }}/>
      </DataSeries>
  </Chart>
);
React.render(
  <BarGraphDemo/>;,
  document.getElementById( 'barGraphDemo' )
);

import React, {Component} from 'react';
import ReactDom from 'react-dom';
import {
    util, Chart, DataSeries, BarChart, XAxis, YAxis, Stack
} from 'diffract';

const StackedBarGraphDemo = () => (
  <Chart width={width} height={height}
      margin={margins}>
      <DataSeries data={this.state.multiValues}
          xScale={xScale} yScale={yScale}>
          <Stack>
              <BarChart style={(d, i) => ({fill: this.getColors(i)})}/>
              <XAxis tickFormat={(d, i) => this.state.labels[i]}/>
              <YAxis
                  tickFormat={d => {
                      return d;
                  }}/>
          </Stack>
      </DataSeries>
  </Chart>
);

React.render(
  <StackedBarGraphDemo/>,
  document.getElementById( 'stackedBarGraphDemo' )
);

import React, {Component} from 'react';
import ReactDom from 'react-dom';
import {
    util, Chart, DataSeries, BarChart, XAxis, YAxis, Group
} from 'diffract';

const GroupedBarGraphDemo = () => (
  <Chart width={width} height={height} data={this.state.multiValues}
      xScale={xScale} yScale={yScale}
      margin={margins}>
      <DataSeries data={this.state.multiValues}
          xScale={xScale} yScale={yScale}>
          <Group>
              <BarChart style={(d, i) => ({fill: this.getColors(i)})}/>
              <XAxis tickFormat={(d, i) => this.state.labels[i]}/>
              <YAxis
                  tickFormat={d => {
                      return d;
                  }}/>
          </Group>
      </DataSeries>
  </Chart>
);


React.render(
  <GroupedBarGraphDemo/>,
  document.getElementById( 'groupedBarGraphDemo' )
);