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" />
}} render={(resultSet) => ( <ResponsiveContainer width="100%" height={300}> <AreaChart data={resultSet.chartPivot()}> <XAxis dataKey="category" tickFormatter={dateFormatter} fontSize={12} /> const colors = ['#7DB3FF', '#49457B', '#FF7C78', '#FED3D0']; return ( <ResponsiveContainer width="100%" height={300}> <PieChart> <Pie }} render={(resultSet) => ( <ResponsiveContainer width="100%" height={300}> <BarChart data={resultSet.chartPivot()}> <XAxis dataKey="category" tickFormatter={dateFormatter} fontSize={12} />
<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>
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 ( <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> ) }
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 ( <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}> <Treemap data={datas} dataKey="size" ratio={4/3} stroke="#fff" fill="#8884d8" content={<CustomizedContent colors={COLORS}/>} /> </ResponsiveContainer> ) }
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <ScatterChart margin={{ top: 5, right: 5, bottom: 5, left: 5 }}> <XAxis dataKey="x" name="stature" unit="cm" /> <YAxis dataKey="y" name="weight" unit="kg" /> <ZAxis dataKey="z" range={[4, 20]} name="score" unit="km" /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip cursor={{ strokeDasharray: '3 3' }} /> <Legend /> <Scatter name="A school" data={datas1} fill="#8884d8" /> <Scatter name="B school" data={datas2} fill="#82ca9d" /> </ScatterChart> </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}> <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> ) }
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 ( <ResponsiveContainer minWidth={260} minHeight={240}> <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}> <Pie data={datas} nameKey="name" valueKey="value" dataKey="value" innerRadius={60} outerRadius={80} fill="#8884d8" paddingAngle={5}> { datas.map((entry, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/>) } </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> ) }
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> ); }