resultSet.seriesNames().map((series, i) => ( <Bar key={series.key} stackId="a" dataKey={series.key} name={series.title} fill={colors[i]} /> ))
const CartesianChart = ({ resultSet, legend, children, ChartComponent, height }) => ( <ResponsiveContainer width="100%" height={height || 250}> <ChartComponent margin={{ top: 16, right: 16, bottom: 0, left: 0, }} data={resultSet.chartPivot()}> <XAxis axisLine={false} tickLine={false} tickFormatter={xAxisFormatter} dataKey="x" minTickGap={20} /> <YAxis axisLine={false} tickLine={false} tickFormatter={numberFormatter} /> <CartesianGrid vertical={false} /> {children} { legend && <Legend /> } <Tooltip labelFormatter={dateFormatter} formatter={numberFormatter} /> </ChartComponent> </ResponsiveContainer> )
resultSet.chartPivot().map((e, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/> )
const BarwithSteps = (props) => { const { x, y, width, height, index, resultSet } = props; const data = resultSet.chartPivot() const lastIndex = data.length - 1; const showStep = index !== lastIndex; let conversion = null if (showStep) { conversion = Math.round(100 * Object.values(data[index + 1])[2]/Object.values(data[index])[2]); } const baseY = y + (height - 100); const baseX = x + (width + 5); return ( <g> <Rectangle {...props} /> {showStep && ([ <path d={getPath(x, y, width, height)} stroke="none" fill="#50556C"/>, <text x={baseX + 25} y={baseY + 15} fill="#fff" textAnchor="middle" dominantBaseline="middle"> {conversion}% </text> ]) } </g> ); }
extractSeries(resultSet).map((s, i) => <Bar label={label} key={i} dataKey={s} shape={customShape(shape, resultSet)} name={humanName(resultSet, s)} stackId="a" fill={COLORS[i % COLORS.length]} /> )
<ResponsiveContainer width="100%" height={300}> <BarChart data={resultSet.chartPivot()} cursor="pointer"> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="x" tickFormatter={dateFormatter} /> <YAxis /> <RechartsTooltip content={<Tooltip />} /> <Legend /> <Bar key={key} dataKey={key}
}} render={(resultSet) => ( <ResponsiveContainer width="100%" height={300}> <AreaChart data={resultSet.chartPivot()}> <XAxis dataKey="category" tickFormatter={dateFormatter} fontSize={12} /> <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> const colors = ['#7DB3FF', '#49457B', '#FF7C78', '#FED3D0']; return ( <ResponsiveContainer width="100%" height={300}> <PieChart> <Pie data={resultSet.chartPivot()} nameKey="category" <Cell fill={colors[index % colors.length]}/> )) <Legend verticalAlign="middle" align="right" layout="vertical" /> <Tooltip formatter={currencyFormatter} /> </PieChart> </ResponsiveContainer> }} render={(resultSet) => (
{data && hasLinesToRender && ( <LineChart width={window.innerWidth - 72} height={400} <Line type="monotone" dataKey="DAU" stroke={cColors.dau} /> )} <Line type="monotone" dataKey="WAU" stroke={cColors.wau} /> )} <Line type="monotone" dataKey="MAU" stroke={cColors.mau} /> )} <Line type="monotone" dataKey="DAC" stroke={cColors.dac} /> )} <Line type="monotone" dataKey="WAC" stroke={cColors.wac} /> )} <Line type="monotone" dataKey="MAC" stroke={cColors.mac} /> )} <Line type="monotone" dataKey="communities/user" <Line
resultSet.seriesNames().map((series, i) => ( <Line key={series.key} stackId="a" dataKey={series.key} name={series.title} stroke={colors[i]} /> ))
resultSet.seriesNames().map((series, i) => ( <Area key={series.key} stackId="a" dataKey={series.key} name={series.title} stroke={colors[i]} fill={colors[i]} /> ))
<Hidden mdDown> <div style={{ width: '100%', height: 140, display: 'flex', justifyContent: "space-around" }}> <ResponsiveContainer> <PieChart> <Pie cy="85%" startAngle={180} endAngle={0} data={typesData} dataKey="value" outerRadius={80} label> typesData.map((entry, index) => <Cell key={entry.name} fill={theme.palette[entry.color].main} />)
render() { return ( <RadialBarChart width={500} height={350} innerRadius={20} outerRadius={140} barSize={10} data={data} style={{ margin: "0 auto" }}> <RadialBar minAngle={15} label background clockWise={true} dataKey='uv' /> <Legend iconSize={10} width={120} height={140} layout='vertical' verticalAlign='middle' wrapperStyle={style} /> </RadialBarChart> ) }
const SimpleBarChart = ({ data, width = 0, height = 0, absolute }) => ( <StyledBarChart width={width} height={height} data={data} absolute={absolute}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="pv" fill="#8884d8" /> <Bar dataKey="uv" fill="#82ca9d" /> </StyledBarChart> )
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <RadialBarChart data={datas} innerRadius={20} outerRadius={120} barSize={10}> <RadialBar minAngle={15} label background clockWise={true} dataKey='uv' /> <Legend iconSize={10} width={120} height={140} layout='vertical' verticalAlign='middle' wrapperStyle={style} /> <Tooltip /> </RadialBarChart> </ResponsiveContainer> ) }
resultSet.chartPivot().map((e, index) => ( <Cell key={index} fill={colors[index % colors.length]} /> ))