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.

Design

Code

payout@geeks.com

Your selected payout method was confirmed on Next Payout on 15 July, 2020

Your Earning this month

$3,210

Update your payout method in settings

Withdraw Earning

Your paypal account has been authorized for payouts.

Remove Account

Bank Transfer

// import node module libraries
import Link from 'next/link';
import { useState } from 'react';
import { Card, Row, Col, Image, Alert, Form, } from 'react-bootstrap';

// import widget/custom components
import { ApexCharts } from 'widgets';

// import data files
import { PayoutChartSeries, PayoutChartOptions } from 'data/charts/ChartData';

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 href="#" 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>
                                    <Form.Check.Input type="radio" name="customRadio" id="default-radio1" />
                                    <Form.Check.Label>
                                        <Image src="/images/brand/paypal-small.svg" alt="" />
                                    </Form.Check.Label>
                                </Form.Check>
                                <p>Your paypal account has been authorized for payouts.</p>
                                <Link href="#" className="btn btn-outline-primary">
                                    Remove Account
                                </Link>
                            </div>
                            <div className="border p-4 rounded-3 mb-3">
                                <Form.Check>
                                    <Form.Check.Input type="radio" name="customRadio" id="default-radio2" />
                                    <Form.Check.Label>
                                        <Image src="/images/brand/payoneer.svg" alt="" />
                                    </Form.Check.Label>
                                </Form.Check>
                            </div>
                            <div className="border p-4 rounded-3">
                                <Form.Check>
                                    <Form.Check.Input type="radio" name="customRadio" id="default-radio3" />
                                    <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.

Design

Code

$3,210

Your total earnings

32%

Update your payout method in settings.

// import node module libraries
import { Card, Row, Col, Badge, } from 'react-bootstrap';

// import widget/custom components
import { ApexCharts, StatTopIcon } from 'widgets';

// 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.

Design

Code

// import node module libraries
import { Card } from 'react-bootstrap';

// import widget/custom components
import { ApexCharts } from 'widgets';

// 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.

Design

Code

// import node module libraries
import { Card } from 'react-bootstrap';

// import widget/custom components
import { ApexCharts } from 'widgets';

// 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={EarningsChartOptions}
                        series={EarningsChartSeries}
                        type="line"
                    />
                </Card.Body>
            </Card>
        </section>
    )
}

Line Chart

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

Design

Code

// import node module libraries
import { Card } from 'react-bootstrap';

// import widget/custom components
import { ApexCharts } from 'widgets';

// 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>
    )
}