resultSet.seriesNames().map((series, i) => ( <Area key={series.key} stackId="a" dataKey={series.key} name={series.title} stroke={colors[i]} fill={colors[i]} /> ))
<YAxis tickFormatter={currencyFormatter} fontSize={12}/> <Tooltip formatter={currencyFormatter} labelFormatter={dateFormatter} /> <Area type="monotone" dataKey="StripeSaaSMetrics.mrr" name="MRR" stroke="rgb(106, 110, 229)" fill="rgba(106, 110, 229, .16)" /> </AreaChart> </ResponsiveContainer>
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> ); }
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <ComposedChart data={datas} margin={{top: 5, right: 5, bottom: 5, left: 5}}> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Legend /> <CartesianGrid stroke='#f5f5f5' /> <Area type='monotone' dataKey='amt' fill='#8884d8' stroke='#8884d8' /> <Bar dataKey='pv' barSize={20} fill='#413ea0' /> <Line type='monotone' dataKey='uv' stroke='#ff7300' /> </ComposedChart> </ResponsiveContainer> ) }
dot={false} /> <Area dataKey="baseline" fill="#8884d8"
margin={{top: 5, right: 0, left: 0, bottom: 5}}> <Tooltip content={<CustomTooltip />} /> <Area type='monotone' dataKey='total' stroke='#f5f5f5' fill='#f5f5f5' /> </AreaChart> </Card> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Area type='monotone' dataKey='male' stackId="1" stroke='#8884d8' fill='#8884d8' /> <Area type='monotone' dataKey='total' stackId="1" stroke='#82ca9d' fill='#82ca9d' /> </AreaChart> </Card>
<YAxis /> <Tooltip /> <Area type="monotone" dataKey="uv"
const StackedAreaChart = ({ data, width = 0, height = 0, absolute }) => ( <StyledAreaChart width={width} height={height} data={data} absolute={absolute}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="name" /> <YAxis /> <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" /> </StyledAreaChart> )
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> ); }