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> )
<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> <Tooltip formatter={currencyFormatter} /> </PieChart> </ResponsiveContainer> <XAxis dataKey="category" tickFormatter={dateFormatter} fontSize={12} /> <YAxis fontSize={12} /> <Tooltip labelFormatter={dateFormatter} /> <Bar dataKey="StripeSaaSMetrics.activeCustomers" name="Active Customers" fill="rgb(106, 110, 229)" /> </BarChart>
<Tooltip /> <Brush dataKey="date" data={data} /> </LineChart>
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() { const {data} = this.props; return ( <PieChart width={400} height={350}> <Pie dataKey="value" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill="#8884d8" label /> <Tooltip /> </PieChart> ); }
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <RadarChart outerRadius={100} data={datas}> <Radar name="Mike" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6}/> <PolarGrid /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis /> <Tooltip /> </RadarChart> </ResponsiveContainer> ) }
renderTooltipWithLabel(props) { const label = props.payload[0] && props.payload[0].payload.label const newProps = { ...props, content: null } return <Tooltip {...newProps} label={label} /> }
render() { return ( <LineChart width={700} height={350} data={data} style={{ margin: "0 auto" }}> <XAxis dataKey="name" height={60} tick={<CustomizedAxisTick />} /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" label={<CustomizedLabel />} /> <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> </LineChart> ) }
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 minWidth={260} minHeight={240}> <PieChart onMouseEnter={this.onPieEnter}> <Pie data={datas} nameKey="name" valueKey="value" dataKey="value" labelLine={false} label={renderCustomizedLabel} outerRadius={80} fill="#8884d8"> { datas.map((entry, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/>) } </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> ) }
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <LineChart data={datas} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}> <Line type="monotone" dataKey="uv" stroke="#8884d8" /> <CartesianGrid stroke="#ccc" strokeDasharray="5 5" /> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> </LineChart> </ResponsiveContainer> ) }
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> ) }
render () { return ( <LineChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}> <XAxis dataKey="date"/> <YAxis/> <CartesianGrid strokeDasharray="3 3"/> <Tooltip/> <Legend /> <Line type="monotone" dataKey="glucose" stroke="#8884d8" /> </LineChart> ); }
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <PieChart margin={{ top: 5, right: 5, left: 5, bottom: 5 }}> <Pie data={datas1} nameKey="name" valueKey="value" dataKey="value" outerRadius={60} fill="#8884d8"/> <Pie data={datas2} nameKey="name" valueKey="value" dataKey="value" innerRadius={70} outerRadius={90} fill="#82ca9d" label/> <Tooltip /> </PieChart> </ResponsiveContainer> ) }
render() { return ( <LineChart layout="vertical" width={700} height={350} data={data} style={{ margin: "0 auto" }}> <XAxis type="number" /> <YAxis dataKey="name" type="category" /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Legend /> <Line dataKey="pv" stroke="#8884d8" /> <Line dataKey="uv" stroke="#82ca9d" /> </LineChart> ) }