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> )
<YAxis /> <RechartsTooltip content={<Tooltip />} /> <Legend />
<Legend verticalAlign="middle" align="right" layout="vertical" /> <Tooltip formatter={currencyFormatter} /> </PieChart>
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 ( <RadarChart outerRadius={150} width={500} height={350} style={{ margin: "0 auto" }} data={data}> <Radar name="Mike" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} /> <Radar name="Lily" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} /> <PolarGrid /> <Legend /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis angle={30} domain={[0, 150]} /> </RadarChart> ) }
render() { return ( <ScatterChart width={700} height={350} style={{ margin: "0 auto" }}> <XAxis dataKey={'x'} name='stature' unit='cm' /> <YAxis dataKey={'y'} name='weight' unit='kg' /> <ZAxis dataKey={'z'} range={[60, 400]} name='score' unit='km' /> <CartesianGrid /> <Tooltip cursor={{ strokeDasharray: '3 3' }} /> <Legend /> <Scatter name='A school' data={data01} fill='#8884d8' shape="star" /> <Scatter name='B school' data={data02} fill='#82ca9d' shape="triangle" /> </ScatterChart> ) }
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() { const {data} = this.props return (<LineChart width={700} height={250} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}> <CartesianGrid strokeDasharray="3 3"/> <XAxis dataKey="date" tickFormatter={d3.timeFormat('%b-%d %I%p')} /> <YAxis><Label value='Temperature (C)' angle={-90} position='insideBottomLeft'/></YAxis> <Tooltip/> <Legend/> <Line type="monotone" dataKey="low" stroke="#4286f4"/> <Line type="monotone" dataKey="high" stroke="#f46241"/> <Line type="monotone" dataKey="temp" stroke="gray"/> </LineChart>) }
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> ) }
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 ( <BarChart width={700} height={350} data={data} style={{ margin: "0 auto" }}> <XAxis dataKey="name" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Legend /> <Bar dataKey="female" stackId="a" fill="#8884d8" /> <Bar dataKey="male" stackId="a" fill="#82ca9d" /> <Bar dataKey="uv" fill="#ffc658" /> </BarChart> ) }
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 ( <BarChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}> <XAxis dataKey="name"/> <YAxis/> <CartesianGrid strokeDasharray="3 3"/> <Tooltip/> <Legend /> <Bar dataKey="pv" fill="#8884d8" /> <Bar dataKey="uv" fill="#82ca9d" /> </BarChart> ); }
render () { return ( <LineChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}> <XAxis dataKey="name"/> <YAxis/> <CartesianGrid strokeDasharray="3 3"/> <Tooltip/> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/> <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> </LineChart> ); }