import dynamic from 'next/dynamic';
import { useState } from 'react';

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

function Area() {
	const [state] = useState({
		options: {
			xaxis: {
				categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}
		},
		series: [
			{
				name: 'series-1',
				data: [30, 40, 25, 50, 49, 21, 70, 51]
			},
			{
				name: 'series-2',
				data: [23, 12, 54, 61, 32, 56, 81, 19]
			}
		]
	});

	return (
		<div className="area">
			<Chart
				options={state.options}
				series={state.series}
				type="area"
				width="500"
			/>
		</div>
	);
}

export default Area;

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

function Bar() {
	const [state] = useState({
		options: {
			dataLabels: {
				enabled: false
			},
			plotOptions: {
				bar: {
					horizontal: true
				}
			},
			xaxis: {
				categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}
		},
		series: [
			{
				data: [30, 40, 25, 50, 49, 21, 70, 51]
			}
		]
	});

	return (
		<div className="bar">
			<Chart
				options={state.options}
				series={state.series}
				type="bar"
				width="500"
			/>
		</div>
	);
}

export default Bar;

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

function Column() {
	const [state] = useState({
		options: {
			dataLabels: {
				enabled: false
			},
			xaxis: {
				categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}
		},
		series: [
			{
				data: [30, 40, 25, 50, 49, 21, 70, 51]
			}
		]
	});

	return (
		<div className="column">
			<Chart
				options={state.options}
				series={state.series}
				type="bar"
				width="500"
			/>
		</div>
	);
}

export default Column;

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

function Donut() {
	const [state] = useState({
		options: {
			labels: ['A', 'B', 'C', 'D', 'E']
		},
		series: [44, 55, 41, 17, 15]
	});
	return (
		<div className="donut">
			<Chart
				options={state.options}
				series={state.series}
				type="donut"
				width="380"
			/>
		</div>
	);
}

export default Donut;

import { ApexOptions } from 'apexcharts';
import { useState } from 'react';
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

function Line() {
	const [state] = useState<{
		options: ApexOptions;
		series: { data: number[] }[];
	}>({
		options: {
			stroke: {
				curve: 'smooth' as const
			},
			markers: {
				size: 0
			},
			xaxis: {
				categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}
		},
		series: [
			{
				data: [30, 40, 25, 50, 49, 21, 70, 51]
			}
		]
	});

	return (
		<div className="line">
			<Chart
				options={state.options}
				series={state.series}
				type="line"
				width="500"
			/>
		</div>
	);
}

export default Line;

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

function RadialBar() {
	const [state] = useState({
		options: {
			labels: ['RadialBar'],
			plotOptions: {
				radialBar: {
					hollow: {
						size: '70%'
					}
				}
			}
		},
		series: [68]
	});

	return (
		<div className="radialbar">
			<Chart
				options={state.options}
				series={state.series}
				type="radialBar"
				height="380"
			/>
		</div>
	);
}

export default RadialBar;