AppReactApexCharts

In this guide, we'll discuss how to effectively utilize ApexCharts, a modern charting library, with Material-UI styling in a Next.js application. For more information on ApexCharts, see the official documentation.

Overview

ApexCharts is a feature-rich charting library that allows for the creation of interactive and visually appealing charts. To ensure these charts blend seamlessly with the Material-UI themed application, we have created a custom wrapper component.

Styling ApexCharts

We use Material-UI's styling capabilities to apply custom styles to ApexCharts. This is achieved through the AppReactApexCharts component, which is a styled Box component from Material-UI, adapted specifically for ApexCharts.

Styled Component: AppReactApexCharts

AppReactApexCharts encapsulates an ApexCharts component within a Material-UI Box, applying tailored styles for consistency with the overall theme.

Example Code

// MUI Imports
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import type { BoxProps } from '@mui/material/Box';

import ReactApexcharts from '@/libs/ApexCharts';

// Third-party Imports
import type { Props } from 'react-apexcharts'

type ApexChartWrapperProps = Props & {
  boxProps?: BoxProps
}

// Define custom styles and properties
const ApexChartWrapper = styled(Box)<BoxProps>(({ theme }) => ({
  // Custom styles for the ApexCharts...
})) as typeof Box;

// Component to render the chart
const AppReactApexCharts = (props: ApexChartWrapperProps) => {
  const { boxProps, ...rest } = props;

  return (
    <ApexChartWrapper {...boxProps}>
      <ReactApexcharts {...rest} />
    </ApexChartWrapper>
  );
};

export default AppReactApexCharts;

In this code, AppReactApexCharts takes in the standard props for an ApexCharts component, along with additional BoxProps for further customization.

Implementing the Styled ApexCharts

Using AppReactApexCharts, you can easily incorporate customized ApexCharts into your application.

Example: Creating a Basic Line Chart

import dynamic from 'next/dynamic';
import Card from '@mui/material/Card';
import { useTheme } from '@mui/material/styles';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import type { ApexOptions } from 'apexcharts';

const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'));

const ApexLineChart = () => {
  const theme = useTheme();
  const options: ApexOptions = {
    // ApexCharts configuration...
  };

  return (
    <Card>
      <CardHeader
        title='Balance'
        subheader='Commercial networks & enterprises'
        // Additional styling...
      />
      <CardContent>
        <AppReactApexCharts type='line' width='100%' height={400} options={options} series={series} />
      </CardContent>
    </Card>
  );
};

export default ApexLineChart;

In this example, ApexLineChart is a functional component that renders a line chart using the AppReactApexCharts wrapper. It demonstrates how to pass configuration options and data series to the chart.