render={(resultSet) => ( <ResponsiveContainer width="100%" height={300}> <BarChart data={resultSet.chartPivot()}> <XAxis dataKey="category" tickFormatter={dateFormatter} fontSize={12} /> <YAxis fontSize={12} />
<> <ResponsiveContainer width="100%" height={300}> <BarChart data={resultSet.chartPivot()} cursor="pointer"> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="x" tickFormatter={dateFormatter} />
const Info = (props) => ( <InfoWrap> <div> <h3 className='name'>{props.name}</h3> <p className='title'>{props.title}</p> </div> <BarChart width={360} height={100} data={props.data}> <Bar dataKey='y' fill='#CEEEAE' /> </BarChart> </InfoWrap> )
const ChartBar = ({ report, dataKeyX, data, height, width }) => { // console.log('datakeyx: ' + dataKeyX); // console.log(report); // const useQuantity = report === 'dailySales' || report === 'monthlySales'; // console.log('useqty: ' + useQuantity); return ( <BarChart width={width} height={height} data={data}> <XAxis dataKey={dataKeyX} /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="amount" fill="#8884d8" /> {/* {useQuantity && <Bar dataKey="quantity" fill="#8b34d8" />} */} </BarChart> ); }
render () { return ( <ResponsiveContainer height={300} width='100%'> <BarChart width={600} height={300} data={this.props.data} margin={{top: 20, left: -10}}> <CartesianGrid strokeDasharray="3 3"/> <XAxis dataKey="name"/> <YAxis yAxisId="left" orientation="left" stroke="#f3c363"/> <YAxis yAxisId="right" orientation="right" stroke="#eb3349"/> <Tooltip/> <Legend /> <Bar yAxisId="left" dataKey="pv" fill="#f3c363" /> <Bar yAxisId="right" dataKey="uv" fill="#eb3349" /> </BarChart> </ResponsiveContainer> ); }
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <BarChart data={datas} margin={{top: 5, right: 5, left: 5, bottom: 5}}> <XAxis dataKey="name" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Legend /> <ReferenceLine y={0} stroke='#000' /> <Bar dataKey="pv" fill="#8884d8" /> <Bar dataKey="uv" fill="#82ca9d" /> </BarChart> </ResponsiveContainer> ) }
return ( <ResponsiveContainer width="100%" aspect={calcAspectRatio()}> <BarChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}> <CartesianGrid strokeDasharray="3 3" /> <XAxis
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> ); }
<BarChart height={300} data={filteredData}
)) .add('Barchart - simple', () => ( <BarChart width={600} height={300} data={data}> <Bar dataKey="y" fill="#8884d8" /> </BarChart> )) .add('Barchart - with grid & legend & tooltip', () => ( <BarChart width={600} height={300} data={data}> <XAxis dataKey="x" /> <YAxis /> )) .add('Custom style', () => ( <BarChart width={600} height={300} data={data} style={{ 'font-family': 'sans-serif' }} > <YAxis /> <CartesianGrid stroke="rgba(0,0,0,0.1)" vertical={false} />
function BarChartSimple(props) { return ( <div style={{ width: '100%', height: 300, textAlign: 'center' }}> <ResponsiveContainer> <BarChart data={props.data} margin={{top: 5, right: 3, left: 2, bottom: 5}}> <CartesianGrid strokeDasharray="3 3"/> <XAxis dataKey="name" interval={0} minTickGap={20}/> <YAxis/> <Tooltip/> {props.showLegend && <Legend /> } <Bar dataKey={props.target} fill="#82ca9d"> <LabelList dataKey={props.target} position="top" /> </Bar> </BarChart> </ResponsiveContainer> </div> ) }
render() { return ( <BarChart width={700} height={350} data={data} style={{ margin: "0 auto" }}> <XAxis dataKey="name" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Legend verticalAlign="top" wrapperStyle={{ lineHeight: '40px' }} /> <ReferenceLine y={0} stroke='#000' /> <Brush dataKey='name' height={30} stroke="#8884d8" /> <Bar dataKey="pv" fill="#8884d8" /> <Bar dataKey="uv" fill="#82ca9d" /> </BarChart> ) }
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 ( <ResponsiveContainer height={300} width='100%'> <BarChart width={600} height={300} data={this.props.data} margin={{top: 20, left: -10}}> <CartesianGrid strokeDasharray="3 3"/> <XAxis dataKey="name"/> <YAxis yAxisId="left" orientation="left" stroke="#f3c363"/> <YAxis yAxisId="right" orientation="right" stroke="#eb3349"/> <Tooltip/> <Legend /> <Bar yAxisId="left" dataKey="pv" fill="#f3c363" /> <Bar yAxisId="right" dataKey="uv" fill="#eb3349" /> </BarChart> </ResponsiveContainer> ); }
return ( <ResponsiveContainer width="100%" aspect={calcAspectRatio()}> <BarChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}> <CartesianGrid strokeDasharray="3 3" /> <XAxis