recharts#YAxis JavaScript Examples
The following examples show how to use
recharts#YAxis.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AssessmentsDay.js From SaraAlert with Apache License 2.0 | 6 votes |
|
render() {
const data = this.props.stats.assessment_result_by_day;
return (
<React.Fragment>
<Card className="card-square">
<Card.Header as="h5">Report Type Over Time</Card.Header>
<Card.Body>
<div style={{ width: '100%', height: '300px' }} className="recharts-wrapper">
<ResponsiveContainer>
<LineChart data={data}>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Legend />
<Tooltip />
<Line type="monotone" dataKey="Symptomatic Reports" stroke="#8884d8" activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="Asymptomatic Reports" stroke="#82ca9d" />
</LineChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #2
| Source File: BarGraph.js From video-journal-for-teams-fe with MIT License | 6 votes |
|
export default function BarGraph({ data }) {
return (
<div className="graph_wrapper">
<BarChart
width={window.screen.availWidth < 768 ? 350 : window.screen.availWidth < 1800 ? 700 : 800}
height={window.screen.availHeight < 768 ? 300 : window.screen.availHeight < 1100 ? 550 : 600}
data={data}
layout="vertical"
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<XAxis ticks={[0, 1, 2, 3, 4, 5]} domain={[0, 5]} type="number" />
<YAxis type="category" dataKey="field" />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Bar dataKey="score" fill="#FF7F50" />
<Legend />
</BarChart>
</div>
);
}
Example #3
| Source File: Chart.js From Simplify-Testing-with-React-Testing-Library with MIT License | 6 votes |
|
Chart = ({ data }) => {
if (data.length === 0) {
return (
<Typography variant='h6'>
Set your income and create some budgets!
</Typography>
);
}
return (
<div data-testid='chart'>
<BarChart
width={550}
height={300}
data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='category' />
<YAxis />
<Tooltip />
<Bar dataKey='amount' fill='#8884d8' background={{ fill: '#eee' }} />
</BarChart>
</div>
);
}
Example #4
| Source File: IndiaDistrictTrend.js From covid-19 with MIT License | 6 votes |
|
IndiaDistrictTrend = props => {
const districtTrendData = props.districtTrendData;
console.log('IndiaDistrictTrend', districtTrendData);
return (
<div style={{ display: 'flex' }}>
<ResponsiveContainer width='100%' height={300}>
<LineChart data={districtTrendData}
margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="active" stroke={COLOR_CODES.CATEGORIES.ACTIVE} />
<Line type="monotone" dataKey="recovered" stroke={COLOR_CODES.CATEGORIES.RECOVERED} />
<Line type="monotone" dataKey="deceased" stroke={COLOR_CODES.CATEGORIES.DEATHS} />
</LineChart>
</ResponsiveContainer>
</div>
)
}
Example #5
| Source File: index.js From tracker with MIT License | 6 votes |
|
//SIMPLE BAR CHART
export function SimpleBarChart(props)
{
return (
<div className='box-border shadow-lg bg-white w-full max-w-xl ml-auto mr-auto pb-5'>
<div className='bg-gray-100 p-2 font-serif text-lg text-blue-500'>
{props.heading}
</div>
<div className='justify-center -ml-1 mr-5 mt-10'>
<BarChart width={350}
height={300}
data={props.data} style={{marginLeft:"auto", marginRight: "auto"}}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="Date" angle="295" interval={0} tickMargin={20} height={80} allowDataOverflow="true" tickSize={20}/>
<YAxis />
<Tooltip />
<Bar dataKey="Cases" fill="#8884d8" />
</BarChart>
</div>
</div>
);
}
Example #6
| Source File: Sparkline.jsx From cosmoscan-front with Apache License 2.0 | 6 votes |
|
Sparkline = ({ data, color }) => (
<div style={{ width: '100%', minWidth: '120px', height: '40px' }}>
<ResponsiveContainer>
<AreaChart
data={data}
margin={{
top: 0, left: 0, right: 0, bottom: 0,
}}
>
<YAxis
hide
dataKey="y"
domain={['dataMin', 'dataMax']}
/>
<Area
type="monotone"
dataKey="y"
stroke={color}
fill={color}
fillOpacity={0.3}
strokeWidth={1}
connectNulls
/>
</AreaChart>
</ResponsiveContainer>
</div>
)
Example #7
| Source File: StatisChart.js From YApi-X with MIT License | 6 votes |
|
render() {
const width = 1050;
const { mockCount, mockDateList } = this.state.chartDate;
return (
<div>
<Spin spinning={this.state.showLoading}>
<div className="statis-chart-content">
<h3 className="statis-title">mock 接口访问总数为：{mockCount.toLocaleString()}</h3>
<div className="statis-chart">
<LineChart
width={width}
height={300}
data={mockDateList}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<XAxis dataKey="_id" />
<YAxis />
<CartesianGrid strokeDasharray="7 3" />
<Tooltip />
<Legend />
<Line
name="mock统计值"
type="monotone"
dataKey="count"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
</LineChart>
</div>
<div className="statis-footer">过去3个月mock接口调用情况</div>
</div>
</Spin>
</div>
);
}
Example #8
| Source File: BarCharts.js From gedge-platform with Apache License 2.0 | 6 votes |
|
BarCharts = observer(() => {
return (
<div>
<BarChart width={730} height={250} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="pv" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
</div>
);
})
Example #9
| Source File: SimpleBarChart.js From paper-and-ink with MIT License | 6 votes |
|
export default function SimpleBarChart() {
const theme = useTheme();
return (
<ResponsiveContainer width="100%" height={350}>
<BarChart data={byDevice} margin={{ top: 0, right: -15, left: -30, bottom: 0 }}>
<XAxis dataKey="month" tick={{ fontSize: 10 }} />
<YAxis tick={{ fontSize: 10 }} />
<Bar dataKey="mobile" barSize={5} fill={theme.palette.primary.dark} />
<Bar dataKey="desktop" barSize={5} fill={theme.palette.success.light} />
</BarChart>
</ResponsiveContainer>
);
}
Example #10
| Source File: LoadChart.js From admin-web with GNU Affero General Public License v3.0 | 6 votes |
|
function LoadChart(props) {
const { classes, t, load } = props;
return (
<Paper className={classes.paper}>
<div className={classes.root}>
<Typography className={classes.chartTitle}>{t("Load")}</Typography>
<ResponsiveContainer width="100%" height={200} >
<BarChart data={load} margin={{ top: 0, right: 32, left: 10, bottom: 16 }}>
<defs>
<linearGradient id="gradientBlue2" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#2980B9"} />
<stop offset="95%" stopColor={"#6DD5FA"} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" />
<YAxis />
<Legend />
<Tooltip labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}/>
<Bar
dataKey="value"
fill="url(#gradientBlue)"/>
</BarChart>
</ResponsiveContainer>
</div>
</Paper>
);
}
Example #11
| Source File: CoreView.js From Rover-Mission-Control with MIT License | 6 votes |
|
renderGraph(gridKey, title, dataKeys) {
return (
<div key={gridKey} style={ styles.gridCard }>
<ResponsiveContainer>
<LineChart
data={this.state.data}
dot={false}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis tick={false} >
<Label value={title} offset={0} style={{fill: 'green', fontSize: '1.4em'}} position="insideLeft" />
</XAxis>
<YAxis axisLine={false} tickLine={false} />
<Tooltip />
{dataKeys.map((dataKey, i) => {
return <Line dot={false} isAnimationActive={false} key={dataKey} type="monotone" dataKey={dataKey} stroke={lineColors[i % lineColors.length]} fill={lineColors[i % lineColors.length]} />
})}
</LineChart >
</ResponsiveContainer>
</div>
);
}
Example #12
| Source File: RatingsChart.js From willow-grandstack with Apache License 2.0 | 6 votes |
|
export default function RatingsChart() {
const theme = useTheme()
const { loading, error, data } = useQuery(GET_DATA_QUERY)
if (error) return <p>Sign in to view</p>
if (loading) return <p>Loading</p>
return (
<React.Fragment>
<Title>Average City Property Value</Title>
<ResponsiveContainer>
<BarChart
data={data.cityValues}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24,
}}
>
<XAxis dataKey="city" stroke={theme.palette.text.secondary} />
<YAxis stroke={theme.palette.text.secondary}>
<Label
angle={270}
position="left"
style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
>
City
</Label>
</YAxis>
<Bar dataKey="average" fill={theme.palette.primary.main}></Bar>
</BarChart>
</ResponsiveContainer>
</React.Fragment>
)
}
Example #13
| Source File: Chart.js From dnd-builder with MIT License | 6 votes |
|
ChartColumn = () => (
<ResponsiveContainer>
<BarChart
data={data}
height={300}
width={400}
>
<XAxis dataKey="name" />
<YAxis />
<Bar
dataKey="value"
fill="#8884d8"
isAnimationActive={false}
/>
</BarChart>
</ResponsiveContainer>
)
Example #14
| Source File: allCountriesGraph.js From caricovidsite with MIT License | 6 votes |
|
render() {
return (
<LineChart
width={700}
height={500}
data={this.state.data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip content={<CustomTooltip/>}/>
<Legend />
{countryList.map(country =>
<Line
type="monotone"
dataKey={country}
stroke={'#'+Math.floor(Math.random()*16777215).toString(16)}
dot={false}
/>
)}
</LineChart>
);
}
Example #15
| Source File: AirlineFlightsInfo.js From dev-example-flights with MIT License | 6 votes |
|
render() {
const { airline_delays, delays_comparison } = this.state;
return (
<div className="charts-main">
<div className="form-sub-header">
{ !!(this.props.airline) ? this.props.airline.name : ''}
</div>
<div>
<div className="inline-div-50">
<p class="charts-title">Delay % By Type</p>
<PieChart className="form-content" width={400} height={300}>
<Pie isAnimationActive={false} data={airline_delays} cx={200} cy={125} outerRadius={80} fill="#8884d8" label>
{
airline_delays.map((entry, index) => (
<Cell key={`cell-${index}`} fill={this.colors[index]}/>
))
}
</Pie>
<Tooltip/>
<Legend align="center" />
</PieChart>
</div>
<div className="inline-div-50">
<p class="charts-title">Airline (avg minutes) delays vs. All (avg minutes) delays </p>
<BarChart className="Form-content" width={400} height={300} data={delays_comparison}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend align="center" />
<Bar dataKey="Target" fill="#96DDCF" />
<Bar dataKey="Average" fill="#0E6488" />
</BarChart>
</div>
</div>
</div>
);
}
Example #16
| Source File: MainSurveyBar.js From front-app with MIT License | 6 votes |
|
MainSurveyBar = ({ datas, title, style }) => {
const sorted = datas.slice(0).sort(function (a, b) {
return a.count > b.count ? -1 : a.count < b.count ? 1 : 0
})
const getColor = (i) => {
return i > 4 ? COLORS[4] : COLORS[i]
}
return (
<div className="main-survey-bar" style={style}>
<div className="main-survey-bar-title">{title}</div>
<BarChart width={374} height={220} data={datas} barSize={15} margin={{ right: 5, left: -35 }} style={{ marginTop: 10, marginBottom: 30 }}>
<XAxis interval={0} dataKey="name" tick={<CustomizedAxisTick />} scale="point" padding={{ left: 10, right: 10 }} width={3} />
<YAxis valueKey="count" fontSize={10} />
<Tooltip />
<CartesianGrid strokeDasharray="3 3" />
<Bar dataKey="count" fill="#8884d8" background={{ fill: '#eee' }}>
{datas.map((entry, index) => {
const color = getColor(sorted.indexOf(entry))
return <Cell key={index} fill={color} />
})}
</Bar>
</BarChart>
</div>
)
}
Example #17
| Source File: TodayWidget.js From module-federation-examples with MIT License | 6 votes |
|
export default function TodayWidget() {
const theme = useTheme();
return (
<Box display="flex" flexDirection="column" flex={1}>
<Typography component="h2" variant="h6" color="primary" gutterBottom>
Today
</Typography>
<ResponsiveContainer>
<LineChart
data={data}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24,
}}
>
<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
<YAxis stroke={theme.palette.text.secondary}>
<Label
angle={270}
position="left"
style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
>
Sales ($)
</Label>
</YAxis>
<Line type="monotone" dataKey="amount" stroke={theme.palette.primary.main} dot={false} />
</LineChart>
</ResponsiveContainer>
</Box>
);
}
Example #18
| Source File: OftadehBarChart.jsx From oftadeh-react-admin with MIT License | 6 votes |
|
render() {
return (
<div style={{ width: "99%", height: 300 }}>
<ResponsiveContainer>
<BarChart
data={data}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0,
}}
barSize={16}
>
<XAxis
dataKey="name"
scale="point"
padding={{ left: 10, right: 10 }}
/>
<YAxis />
<Tooltip />
<Legend />
<CartesianGrid strokeDasharray="3 3" />
<Bar dataKey="sales" fill="#8884d8" background={{ fill: "#eee" }} />
</BarChart>
</ResponsiveContainer>
</div>
);
}
Example #19
| Source File: qty-products.jsx From product-collector with MIT License | 6 votes |
|
export default function QtyPublishedProducts({ products, keywords }) {
if (!products) {
return <div> Loading ... </div>;
}
const lines = keywords.map((item, index) => ({
keyword: item,
fill: colors[index],
}));
return (
<ResponsiveContainer height={300}>
<LineChart data={products}>
<CartesianGrid strokeDasharray='5 5' />
<XAxis dataKey='date' />
<YAxis />
<Tooltip />
{lines.map(({ keyword, fill }) => {
return (
<Line
key={keyword.replace(' ', '-')}
dataKey={`"${keyword}"`}
fill={fill}
stroke={fill}
/>
);
})}
</LineChart>
</ResponsiveContainer>
);
}
Example #20
| Source File: LineChartMain.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
LineChartWithXAxisPading = (data) => (
<ResponsiveContainer width="100%" height={data.height} data-test="responsive-component">
<LineChart data-test="linechart-component" data={data.data} margin={{top: 10, right: 0, left: -15, bottom: 0}}>
<XAxis dataKey="month" padding={{left: 30, right: 30}}/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend/>
<Line type="monotone" dataKey="deliveries" stroke="#3367d6" activeDot={{r: 8}}/>
{/* <Line type="monotone" dataKey="Drone" stroke="#ffc658"/> */}
</LineChart>
</ResponsiveContainer>
)
Example #21
| Source File: greeksChart.jsx From GraphVega with MIT License | 6 votes |
|
GreeksChart = (props) => {
return(
<LineChart
width={900}
height={500}
data={props.data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="strike">
<Label value="Strike price" offset={0} position="insideBottom"/>
</XAxis>
<YAxis label={{ value: 'Value', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
<Tooltip />
<Legend />
<Line type="monotone" dataKey="delta" stroke="rgba(0, 123, 255, 1)" />
<Line type="monotone" dataKey="gamma" stroke="rgba(255, 230, 70, 1)" />
<Line type="monotone" dataKey="theta" stroke="rgba(40, 167, 69, 1)" />
<Line type="monotone" dataKey="vega" stroke="rgba(255, 7, 58, 1)" />
</LineChart>
)
}
Example #22
| Source File: UserActivityStatsWidget.js From web-client with Apache License 2.0 | 6 votes |
|
UserActivityStatsWidget = () => {
const [auditLogStats] = useFetch('/auditlog/stats')
return <DashboardWidget title="User activity over time">
{auditLogStats && auditLogStats.length > 0 ?
<LineChart width={320} height={320} data={auditLogStats}>
<Line type="monotone" dataKey="total" stroke="var(--primary-color)" strokeWidth="var(--borderWidth)" />
<CartesianGrid stroke="var(--bg-color)" />
<XAxis dataKey="log_date" />
<YAxis dataKey="total" />
</LineChart> :
<p>No enough data to generate the chart.</p>
}
</DashboardWidget>
}
Example #23
| Source File: annualIncidentsChart.js From DengueStop with Apache License 2.0 | 6 votes |
|
AnnualIncidentsChart = () => {
const currentUser = getSession();
const incidentService = new IncidentService();
const [annualIncidentCount, setAnnualIncidentCount] = useState([]);
useEffect(() => {
const orgId = currentUser.org_id;
incidentService.getMonthlyIncidentCount(orgId).then((res) => {
setAnnualIncidentCount(res);
});
}, []);
return (
<MDBCard className="annual-incidents-chart-container">
<MDBCardBody>
<p className="text-center font-weight-bold">
Dengue Incidents Reported Over the year
</p>
<ResponsiveContainer width="100%" height={250}>
<LineChart data={annualIncidentCount}>
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Line
type="monotone"
dataKey="count"
strokeWidth={3}
stroke="#0783EC"
fill="#0783EC"
/>
</LineChart>
</ResponsiveContainer>
</MDBCardBody>
</MDBCard>
);
}
Example #24
| Source File: forever.js From stacker.news with MIT License | 6 votes |
|
function GrowthAreaChart ({ data, xName, title }) {
return (
<ResponsiveContainer width='100%' height={300} minWidth={300}>
<AreaChart
data={data}
margin={{
top: 5,
right: 5,
left: 0,
bottom: 0
}}
>
<XAxis
dataKey='time' tickFormatter={dateFormatter} name={xName}
tick={{ fill: 'var(--theme-grey)' }}
/>
<YAxis tickFormatter={formatSats} tick={{ fill: 'var(--theme-grey)' }} />
<Tooltip labelFormatter={dateFormatter} contentStyle={{ color: 'var(--theme-color)', backgroundColor: 'var(--theme-body)' }} />
<Legend />
{Object.keys(data[0]).filter(v => v !== 'time' && v !== '__typename').map((v, i) =>
<Area key={v} type='monotone' dataKey={v} name={v} stackId='1' stroke={COLORS[i]} fill={COLORS[i]} />)}
</AreaChart>
</ResponsiveContainer>
)
}
Example #25
| Source File: TimeChart.js From study-chain with MIT License | 6 votes |
|
TimeChart = ({ chartData, classes }) => (
<div>
<Card>
<CardContent className={classes.content}>
<ResponsiveContainer width="100%" height={255}>
<ScatterChart>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="datetime" className="datetime" />
<YAxis domain={[0, chartData.dataMax]} dataKey="count" />
<Tooltip cursor={{ strokeDasharray: '3 3' }} />
<Scatter
className="datetime"
data={chartData.displayData}
line={{}}
/>
</ScatterChart>
</ResponsiveContainer>
</CardContent>
</Card>
</div>
)
Example #26
| Source File: graphs.js From minerva with MIT License | 6 votes |
|
Histogram = (props) => {
const { discrete, labels, values } = props
const data = values.map((value, index) => {
const label = labels[index]
return {
x: discrete ? label.toString() : label.toFixed(DISPLAY_DECIMAL_LENGTH),
y: value
}
})
return (
<ResponsiveContainer width='100%' height={400}>
<BarChart
data={data}
width={500}
height={300}
margin={{ top: 0, bottom: 30 }}
>
<CartesianGrid strokeDasharray='3 3' />
<XAxis
dataKey='x'
label={{
value: props.xLabel,
position: 'insideBottom',
offset: -20
}}
/>
<YAxis
label={{
value: props.yLabel,
angle: -90,
position: 'insideLeft'
}}
/>
<Tooltip />
<Bar dataKey='y' fill='#2980b9' />
</BarChart>
</ResponsiveContainer>
)
}
Example #27
| Source File: BarGraph.jsx From covid19-updates with GNU General Public License v3.0 | 6 votes |
|
BarGraph = props => {
const {
data,
dataKey1,
dataKey2,
height,
margin,
maxHeight,
strokeColor1,
strokeColor2,
title,
width,
xAxisKey
} = props;
return (
<div className='graph'>
<p className='title'>{title}</p>
<BarChart
width={width}
height={maxHeight > 0 ? (
height <= maxHeight ? height : maxHeight
) : height}
data={data}
margin={margin}
>
<CartesianGrid strokeDasharray="5 5" />
<XAxis dataKey={xAxisKey} />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey={dataKey1} fill={strokeColor1} />
<Bar dataKey={dataKey2} fill={strokeColor2} />
</BarChart>
</div>
);
}
Example #28
| Source File: FeesChart.js From acy-dex-interface with MIT License | 5 votes |
|
export default function FeesChart(props) {
const {
data,
loading,
chartHeight,
yaxisWidth,
xaxisTickFormatter,
yaxisTickFormatter,
tooltipFormatter,
tooltipLabelFormatter
} = props
const csvFields = [
// {key: 'swap', name: 'Swap'},
{key: 'margin', name: 'Margin trading'},
{key: 'mint', name: 'Mint ALP'},
{key: 'burn', name: 'Burn ALP'},
{key: 'liquidation', name: 'Liquidation'},
{key: 'cumulative', name: 'Cumulative'}
]
return <ChartWrapper title="Fees" loading={loading} csvFields={csvFields} data={data}>
<ResponsiveContainer width="100%" height={chartHeight}>
<ComposedChart data={data} syncId="syncA">
<CartesianGrid strokeDasharray="3 3" stroke='#333333' />
<XAxis dataKey="timestamp" tickFormatter={xaxisTickFormatter} minTickGap={30} />
<YAxis dataKey="all" interval="preserveStartEnd" tickCount={7} tickFormatter={yaxisTickFormatter} width={yaxisWidth} />
<YAxis dataKey="cumulative" orientation="right" yAxisId="right" tickFormatter={yaxisTickFormatter} width={yaxisWidth} />
<Tooltip
formatter={tooltipFormatter}
labelFormatter={tooltipLabelFormatter}
contentStyle={{ textAlign: 'left' }}
/>
<Legend />
{/* <Bar isAnimationActive={false} type="monotone" dataKey="swap" stackId="a" name="Swap" fill={COLORS[0]} /> */}
<Bar isAnimationActive={false} type="monotone" dataKey="mint" stackId="a" name="Mint ALP" fill={COLORS[1]} />
<Bar isAnimationActive={false} type="monotone" dataKey="burn" stackId="a" name="Burn ALP" fill={COLORS[2]} />
<Bar isAnimationActive={false} type="monotone" dataKey="liquidation" stackId="a" name="Liquidation" fill={COLORS[3]} />
<Bar isAnimationActive={false} type="monotone" dataKey="margin" stackId="a" name="Margin trading" fill={COLORS[4]} />
<Line isAnimationActive={false} type="monotone" strokeWidth={3} dot={false} stroke={COLORS[0]} dataKey="cumulative" yAxisId="right" name="Cumulative" />
</ComposedChart>
</ResponsiveContainer>
<div className="chart-description">
Collected fees. USD value is calculated with token price at the moment of swap, trade, minting or redeeming ALP
</div>
</ChartWrapper>
}
Example #29
| Source File: Demographics.js From SaraAlert with Apache License 2.0 | 5 votes |
|
renderBarGraph() {
return (
<div className="mx-3 mt-2">
<ResponsiveContainer width="100%" height={400}>
<BarChart
width={500}
height={300}
data={this.ageData}
margin={{
top: 20,
right: 30,
left: 20,
bottom: 5,
}}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="High" stackId="a" fill="#FA897B" />
<Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
<Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
<Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
<Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer width="100%" height={400}>
<BarChart
width={500}
height={300}
data={this.sexData}
margin={{
top: 20,
right: 30,
left: 20,
bottom: 5,
}}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="High" stackId="a" fill="#FA897B" />
<Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
<Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
<Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
<Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
</BarChart>
</ResponsiveContainer>
</div>
);
}
