Charts

Modern & Interactive Open Source Charts

https://apexcharts.com/

Data with Bar Chart

Unlike the Column chart, a ReactJS Bar Chart is oriented in a horizontal manner using rectangular bars.

Your Earning this month

$3,210

Update your payout method in settings

Withdraw Earning

Your paypal account has been authorized for payouts.

Remove Account
// import custom components
import ApexCharts from 'components/elements/charts/ApexCharts';
// import data files
import { PayoutChartSeries, PayoutChartOptions } from 'data/charts/ChartData';
// import required media files
import PaypalSmall from 'assets/images/brand/paypal-small.svg';
import Payoneer from 'assets/images/brand/payoneer.svg';
export const DataWithBarChartExample = () => {
const AlertDismissible = () => {
const [show, setShow] = useState(true);
if (show) {
return (
<Alert variant="warning" className='bg-light-warning text-dark-warning border-0' onClose={() => setShow(false)} dismissible>
<Alert.Heading className="mb-0">
<strong>payout@geeks.com</strong>
</Alert.Heading>
Your selected payout method was confirmed on Next Payout on 15 July,
2020
</Alert>
);
}
return '';
};
return (
<section className='p-4 bg-light'>
<Card className="border-0">
<Card.Body>
<AlertDismissible />
<Row className="mt-6">
<Col xl={4} lg={4} md={12} sm={12} className="mb-3 mb-lg-0">
<div className="text-center">
<ApexCharts options={PayoutChartOptions} series={PayoutChartSeries} height={165} type="bar" />
<h4 className="mb-1">Your Earning this month</h4>
<h5 className="mb-0 display-4 fw-bold">$3,210</h5>
<p className="px-4">Update your payout method in settings</p>
<Link to="#" className="btn btn-primary"> Withdraw Earning </Link>
</div>
</Col>
<Col xl={8} lg={8} md={12} sm={12}>
<div className="border p-4 rounded-3 mb-3">
<Form.Check id="default-radio1">
<Form.Check.Input type="radio" name="customRadio" />
<Form.Check.Label>
<Image src={PaypalSmall} alt="" />
</Form.Check.Label>
</Form.Check>
<p>Your paypal account has been authorized for payouts.</p>
<Link to="#" className="btn btn-outline-primary">
Remove Account
</Link>
</div>
<div className="border p-4 rounded-3 mb-3">
<Form.Check id="default-radio2" >
<Form.Check.Input type="radio" name="customRadio" />
<Form.Check.Label>
<Image src={Payoneer} alt="" />
</Form.Check.Label>
</Form.Check>
</div>
<div className="border p-4 rounded-3">
<Form.Check id="default-radio3" >
<Form.Check.Input type="radio" name="customRadio" />
<Form.Check.Label>Bank Transfer</Form.Check.Label>
</Form.Check>
</div>
</Col>
</Row>
</Card.Body>
</Card>
</section>
)
}

Data With Line Chart

View samples of line charts below along with the source code, so you can integrate right away.

$3,210

Your total earnings

32%

Update your payout method in settings.

40k40k30k30k20k20k10k10kJanJanFebFebMarchMarchAprilAprilMayMayJunJunJulJulAugAugSepSepOctOctNovNovDecDec
// import node module libraries
import { Card, Row, Col, Badge, } from 'react-bootstrap';
// import custom components
import StatTopIcon from 'components/marketing/common/stats/StatTopIcon';
import ApexCharts from 'components/elements/charts/ApexCharts';
// import data files
import { TotalEarningChartOptions, TotalEarningChartSeries, EarningsChartOptions, EarningsChartSeries } from 'data/charts/ChartData';
export const DataWithLineChartExample = () => {
return (
<section className='p-4 bg-light'>
<Card>
<Card.Body>
<Row>
<Col xl={3} lg={4} md={12} sm={12} className="mb-3 mb-lg-0">
<div>
<StatTopIcon title="Your total earnings" value="$3,210" iconName="shopping-cart" colorVariant="success" progress={0} flat />
<Row>
<Col className="col ps-0">
<ApexCharts options={TotalEarningChartOptions} series={TotalEarningChartSeries} width={130} />
</Col>
<Col className="col-auto">
<Badge bg="success">
<i className="fe fe-trending-up fs-6 me-2"></i>32%
</Badge>
</Col>
</Row>
<p className="mb-0 lh-1.5"> Update your payout method in settings. </p>
</div>
</Col>
<Col xl={9} lg={8} md={12} sm={12}>
<ApexCharts options={EarningsChartOptions} series={EarningsChartSeries} height={350} type="line" />
</Col>
</Row>
</Card.Body>
</Card>
</section>
)
}

Donut Chart

ReactJS Pie Charts and ReactJS Donut Charts are optimally used in the display of just a few sets of data.

Direct
Referral
Organic
// import node module libraries
import { Card } from 'react-bootstrap';
// import custom components
import ApexCharts from 'components/elements/charts/ApexCharts';
// import data files
import { TrafficChartOptions, TrafficChartSeries } from 'data/charts/ChartData';
export const DonutChartExample = () => {
return (
<section className='p-4 bg-light'>
<Card className="border-0">
<Card.Body>
<ApexCharts
options={TrafficChartOptions}
series={TrafficChartSeries}
type="donut"
/>
</Card.Body>
</Card>
</section>
)
}

Bar Chart

Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars.

101088664422001 Jun1 Jun9 Jun9 Jun16 jun16 jun18 Jun18 Jun19 Jun19 Jun22 jun22 jun24 Jun24 Jun26 Jun26 Jun
// import node module libraries
import { Card } from 'react-bootstrap';
// import custom components
import ApexCharts from 'components/elements/charts/ApexCharts';
// import data files
import { OrderColumnChartOptions, OrderColumnChartSeries } from 'data/charts/ChartData';
export const BarChartExample = () => {
return (
<section className='p-4 bg-light'>
<Card className="border-0">
<Card.Body>
<ApexCharts
options={OrderColumnChartOptions}
series={OrderColumnChartSeries}
height={287}
type="bar"
/>
</Card.Body>
</Card>
</section>
)
}

Line Chart

View samples of line charts below along with the source code, so you can integrate right away.

40k40k30k30k20k20k10k10kJanJanFebFebMarchMarchAprilAprilMayMayJunJunJulJulAugAugSepSepOctOctNovNovDecDec
// import node module libraries
import { Card } from 'react-bootstrap';
// import custom components
import ApexCharts from 'components/elements/charts/ApexCharts';
// import data files
import { EarningsChartOptions, EarningsChartSeries } from 'data/charts/ChartData';
export const LineChartExample = () => {
return (
<section className='p-4 bg-light'>
<Card className="border-0">
<Card.Body>
<ApexCharts
options={EarningsChartOptions}
series={EarningsChartSeries}
type="line"
/>
</Card.Body>
</Card>
</section>
)
}
Buy Now