Charts
Modern & Interactive Open Source Charts
Data with Bar Chart
Unlike the Column chart, a ReactJS Bar Chart is oriented in a horizontal manner using rectangular bars.
payout@geeks.com
Your selected payout method was confirmed on Next Payout on 15 July, 2020// import custom componentsimport ApexCharts from 'components/elements/charts/ApexCharts';// import data filesimport { PayoutChartSeries, PayoutChartOptions } from 'data/charts/ChartData';// import required media filesimport 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.
// import node module librariesimport { Card, Row, Col, Badge, } from 'react-bootstrap';// import custom componentsimport StatTopIcon from 'components/marketing/common/stats/StatTopIcon';import ApexCharts from 'components/elements/charts/ApexCharts';// import data filesimport { 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.
// import node module librariesimport { Card } from 'react-bootstrap';// import custom componentsimport ApexCharts from 'components/elements/charts/ApexCharts';// import data filesimport { TrafficChartOptions, TrafficChartSeries } from 'data/charts/ChartData';export const DonutChartExample = () => {return (<section className='p-4 bg-light'><Card className="border-0"><Card.Body><ApexChartsoptions={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.
// import node module librariesimport { Card } from 'react-bootstrap';// import custom componentsimport ApexCharts from 'components/elements/charts/ApexCharts';// import data filesimport { OrderColumnChartOptions, OrderColumnChartSeries } from 'data/charts/ChartData';export const BarChartExample = () => {return (<section className='p-4 bg-light'><Card className="border-0"><Card.Body><ApexChartsoptions={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.
// import node module librariesimport { Card } from 'react-bootstrap';// import custom componentsimport ApexCharts from 'components/elements/charts/ApexCharts';// import data filesimport { EarningsChartOptions, EarningsChartSeries } from 'data/charts/ChartData';export const LineChartExample = () => {return (<section className='p-4 bg-light'><Card className="border-0"><Card.Body><ApexChartsoptions={EarningsChartOptions}series={EarningsChartSeries}type="line"/></Card.Body></Card></section>)}