render={(resultSet) => ( <ResponsiveContainer width="100%" height={300}> <AreaChart data={resultSet.chartPivot()}> <XAxis dataKey="category" tickFormatter={dateFormatter} fontSize={12} /> <YAxis tickFormatter={currencyFormatter} fontSize={12}/>
render() { return ( <AreaChart width={700} height={350} data={data} style={{ margin: "0 auto" }}> <XAxis dataKey="name" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Area type='monotone' dataKey='uv' stackId="1" stroke='#8884d8' fill='#8884d8' /> <Area type='monotone' dataKey='pv' stackId="1" stroke='#82ca9d' fill='#82ca9d' /> <Area type='monotone' dataKey='amt' stackId="1" stroke='#ffc658' fill='#ffc658' /> </AreaChart> ) }
render () { return ( <ResponsiveContainer height={300} width='100%'> <AreaChart data={this.props.data} stackOffset="expand" margin={{top: 20, left: -15}} > <XAxis dataKey="month"/> <YAxis tickFormatter={this.toPercent}/> <Tooltip content={this.renderTooltipContent}/> <Area type='monotone' dataKey='uv' stackId="1" stroke='#ffffff' fill='#f3c363' /> <Area type='monotone' dataKey='pv' stackId="1" stroke='#ffffff' fill='#1ab394' /> <Area type='monotone' dataKey='amt' stackId="1" stroke='#ffffff' fill='#5d80f9' /> </AreaChart> </ResponsiveContainer> ); }
render () { return ( <AreaChart width={750} height={300} data={data.data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}> <defs> <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#1bc98e" stopOpacity={0.8}/> <stop offset="95%" stopColor="#1bc98e" stopOpacity={0}/> </linearGradient> <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#1ca8dd" stopOpacity={0.8}/> <stop offset="95%" stopColor="#1ca8dd" stopOpacity={0}/> </linearGradient> </defs> <XAxis dataKey="date" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" fill="rgba(37, 40, 48, 0.3)" vertical={false} horizontal={false}/> <Tooltip /> <Area type="monotone" dataKey="bitcoin" stroke="#1bc98e" fillOpacity={1} fill="url(#colorUv)" /> <Area type="monotone" dataKey="ether" stroke="#1ca8dd" fillOpacity={1} fill="url(#colorPv)" /> </AreaChart> ); }
<div className="income-chart-container"> <ResponsiveContainer> <AreaChart data={props.data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}> <defs> <linearGradient id="colorIncome" x1="0" y1="0" x2="0" y2="1">
<Paper className={classes.paper}> <ResponsiveContainer width="100%" height={200}> <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
render () { return ( <ResponsiveContainer height={300} width='100%'> <AreaChart data={this.props.data} stackOffset="expand" margin={{top: 20, left: -15}} > <XAxis dataKey="month"/> <YAxis tickFormatter={this.toPercent}/> <Tooltip content={this.renderTooltipContent}/> <Area type='monotone' dataKey='uv' stackId="1" stroke='#ffffff' fill='#f3c363' /> <Area type='monotone' dataKey='pv' stackId="1" stroke='#ffffff' fill='#1ab394' /> <Area type='monotone' dataKey='amt' stackId="1" stroke='#ffffff' fill='#5d80f9' /> </AreaChart> </ResponsiveContainer> ); }