Apexchart
Installing via npm
npm i react-apexcharts- For use of apexchart we create own custom hook with the help of appexchart.js
- The navigation path of this file are ../src/app/components/chart.tsx
- For the use of apexchart you want appear in your component please follow the below example code
Script
- below code is dynamic script of appexchart
import dynamic from 'react/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface Props {
options?: any;
series?: any;
type?: any;
width?: any
height?: any;
className?: string
}
const Charts = (props: Props) => {
return (
<>
<Chart options={props.options} series={props.series} type={props.type} height={props.height} width={props.width} />
</>
)
}
export default Charts;
- Write below example code in your component to use apexchart
Example
import Charts from '@/components/Chart'
const Apexcharts = () => {
const chart1 = {
options: {
chart: {
fontFamily: '"Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
toolbar: {
show: false
},
sparkline: {
enabled: false,
}
},
colors: colors,
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 3,
},
yaxis: {
show: true,
labels: {
show: true,
minWidth: 19,
maxWidth: 19,
style: {
colors: "#8A92A6",
},
offsetX: -5,
},
},
legend: {
show: false,
},
xaxis: {
labels: {
minHeight: 22,
maxHeight: 22,
show: true,
style: {
colors: "#8A92A6",
},
},
lines: {
show: false //or just here to disable only x axis grids
},
categories: ["Jan", "Feb", "Mar", "Apr", "Jun", "Jul", "Aug"]
},
grid: {
show: false,
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: "vertical",
shadeIntensity: 0,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: .4,
opacityTo: .1,
stops: [0, 50, 80],
// colors: colors
}
},
tooltip: {
enabled: true,
},
},
series: [{
name: 'total',
data: [94, 80, 94, 80, 94, 80, 94]
}, {
name: 'pipline',
data: [72, 60, 84, 60, 74, 60, 78]
}]
}
return (
<>
<Charts options={chart1.options} series={chart1.series} type="area" height="245" width="100%" />
</>
)
}