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> )
<ResponsiveContainer width="100%" height={300}> <BarChart data={resultSet.chartPivot()} cursor="pointer"> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="x" tickFormatter={dateFormatter} /> <YAxis />
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 ( <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}> <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 ( <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}> <LineChart data={this.props.models} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}> <Line type="monotone" dataKey="Model_ID" stroke="#8884d8" /> <CartesianGrid stroke="#ccc" strokeDasharray="5 5" /> <XAxis dataKey="Model_Name" /> <YAxis /> <Tooltip /> </LineChart> </ResponsiveContainer> ) }
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 ( <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> ); }
const ChartItem = (props) => { const { data, xKey, valKey } = props; return ( <ResponsiveContainer height="75%" width="90%"> <LineChart data={data}> <XAxis dataKey={xKey} /> <YAxis type="number" domain={[0, 'dataMax + 100']} /> <Tooltip /> <CartesianGrid stroke="#eee" strokeDasharray="5 5" /> <Line type="monotone" dataKey={valKey} stroke="#8884d8" /> </LineChart> </ResponsiveContainer> ); }
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 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={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> ); }
const ChartItem = (props) => { const { data, xKey, valKey } = props; return ( <ResponsiveContainer height="75%" width="90%"> <LineChart data={data}> <XAxis dataKey={xKey} /> <YAxis type="number" domain={[0, 'dataMax + 100']} /> <Tooltip /> <CartesianGrid stroke="#eee" strokeDasharray="5 5" /> <Line type="monotone" dataKey={valKey} stroke="#8884d8" /> </LineChart> </ResponsiveContainer> ); }
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> ); }