# Chart Demo

- order: 0


pie demo

---

````js
/** @jsx createElement */
'use strict';
import { createElement, Component, PropTypes,render } from 'rax';
import { View, Text, Env ,Dimensions,Page,Button} from 'weex-nuke';
import Chart, { Bar, Axis, Line, Point, Pie, Coord } from 'nuke-biz-custom-chart';


const CHART_WIDTH = 304;
const CHART_HEIGHT = 304;

class Demo extends Component {
  constructor(){
    super();
    this.changeData = this.changeData.bind(this);
    this.state = {
       pieData2 : [
        { circle: 'wallet', val: 0.8, part: 'deposited'}, 
        { circle: 'wallet', val: 0.2,  part: 'rebates'}
      ],
      pieData3 : [
        {circle: 'wallet', val: 0 ,  part: 'deposited'}, 
        {circle: 'wallet', val: 0,  part: 'refunds'},
        {circle: 'wallet', val: 0,  part: 'rebates'},
        {circle: 'wallet', val: 1,  part: 'test'}
        
      ]     
    }
  }
  changeData(){
    this.setState({
      pieData3:[
        {circle: 'wallet', val: 0.08,  part: 'deposited'}, 
        {circle: 'wallet', val: 0.33,  part: 'refunds'},
        {circle: 'wallet', val: 0.59,  part: 'rebates'},
        { circle: 'wallet', val: 0,  part: 'test'}
      ]     
    })
  }
  render() {
    return (
      <Page title="Pie">
        <Button onPress={this.changeData} type="primary" >ChangeData</Button>
        <Page.Intro sub="2 parts"></Page.Intro>

        <Page.Intro sub="first 1,then 3 parts"></Page.Intro>
        <View style={{width:CHART_WIDTH,height:CHART_HEIGHT,backgroundColor:'#f0d4d9'}}>
          <Chart style={{width: CHART_WIDTH,height: CHART_HEIGHT}} data={this.state.pieData3} margin={12}>
            <Coord type="polar" inner={0.62} transposed />
            <Pie position="circle*val" color={'part'} inner={0.3} theme={['#1A9CB7','#F44336','#FECC05','#3089dc']}  />
          </Chart>
          
        </View>
      </Page>
    );
  }
}

render(<Demo />);

````