There are few options on how to include/import ApexCharts into your project:
Install the ApexCharts icon library from command prompt from the root directory of the project:
npm install apexcharts --save
How to import ApexCharts package?
import ReactApexChart from 'react-apexcharts';
Import the helper function to manage the charts colors based on mode changes. It will take updated values from the root variables.
import useChartColors from '@hooks/useChartColors';
Below the example how to use the package and make it working ApexCharts on any page.
HTML
import React from 'react'; import { ApexOptions } from 'apexcharts'; import useChartColors from '@hooks/useChartColors'; import ReactApexChart from 'react-apexcharts'; interface AreaChartsProps { chartColors: string; chartDarkColors: string; chartId: string; } const BasicAreaChart = ({ chartColors, chartDarkColors, chartId }: AreaChartsProps) => { // Pass both chartColors and chartDarkColors to the hook const chartsColor = useChartColors({ chartColors, chartDarkColors }); const series = [ { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] } ]; const options: ApexOptions = { chart: { defaultLocale: "en", height: 300, type: "area", zoom: { enabled: false }, }, dataLabels: { enabled: false }, stroke: { width: [5, 7, 5], curve: 'straight', dashArray: [0, 8, 5] }, title: { text: 'Page Statistics', align: 'left' }, legend: { tooltipHoverFormatter: function (val: string, opts: any) { return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''; } }, markers: { size: 0, hover: { sizeOffset: 6 } }, grid: { padding: { top: -20, right: 0, bottom: 0, }, }, tooltip: { y: [ { title: { formatter: function (val: string) { return val + " (mins)"; } } }, { title: { formatter: function (val: string) { return val + " per session"; } } }, { title: { formatter: function (val: string) { return val; } } } ] }, colors: chartsColor } return ( <React.Fragment> <ReactApexChart dir="ltr" className="!min-h-full" options={options} series={series} data-chart-colors="[bg-primary-500]" type="area" id={chartId} height={380} width="100%" /> </React.Fragment> ); }; export default BasicAreaChart;
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.
Hire Us© Domiex Created & Crafted by SRBThemes.