resultSet.seriesNames().map((series, i) => ( <Line key={series.key} stackId="a" dataKey={series.key} name={series.title} stroke={colors[i]} /> ))
<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 type="monotone" dataKey="messages/user" <Line type="monotone" dataKey="threads/user"
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 ( <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={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() { 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>) }
keys.map(key => <Line type="monotone" dataKey={key} stroke="#8884d8" key={key} /> )
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}> <ComposedChart data={datas} margin={{top: 5, right: 5, bottom: 5, left: 5}}> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Legend /> <CartesianGrid stroke='#f5f5f5' /> <Area type='monotone' dataKey='amt' fill='#8884d8' stroke='#8884d8' /> <Bar dataKey='pv' barSize={20} fill='#413ea0' /> <Line type='monotone' dataKey='uv' stroke='#ff7300' /> </ComposedChart> </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 height={300} width='100%'> <LineChart data={this.props.data} margin={{top: 20, left: -10}} > <XAxis dataKey="name"/> <YAxis/> <CartesianGrid strokeDasharray="3 3"/> <Tooltip/> <Legend /> <Line type="monotone" dataKey="pv" stroke="#5d80f9" activeDot={{r: 8}}/> <Line type="monotone" dataKey="uv" stroke="#f3c363" /> </LineChart> </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> ) }
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> ); }