Chart Area

Overview

The VApexChartArea component leverages the vue3-apexcharts library to create dynamic and responsive area charts. It supports customization through component properties, such as colors and labels, and allows for fine-tuning the visual appearance of charts using pre-defined SASS variables. This charting solution fits well with projects that require data visualization with minimal dependencies.

Usage

This component uses the vue3-apexcharts library, which must be installed in your project. If not already added, you can install it using:

yarn add @apexcharts/apexcharts vue3-apexcharts

Import the VApexChartArea component into your Vue file:

import VApexChartArea from 'UiKit/components/VApexChartArea/VApexChartArea.vue';

Include the component in your template like this:

<VApexChartArea
    :data="[10, 15, 25, 30]"
    :labels="['Jan', 'Feb', 'Mar', 'Apr']"
    fontSize="14px"
    baseColor="#4CAF50"
    labelColor="#FF9800"
    borderColor="#9E9E9E"
    name="Monthly Sales"
/>

Props

interface Props {
  data: number[];
  labels: string[];
  fontSize?: string;
  baseColor?: string;
  labelColor?: string;
  borderColor?: string;
  name?: string;
  title?: string;
}

• data: Array of numerical data points to be displayed on the chart.
• labels: Array of corresponding label strings for each data point.
• fontSize (optional): Font size for the chart labels (default is '10px').
• baseColor (optional): Base color for the chart lines and fills (default is '#FF3B3B').
• labelColor (optional): Color for the axis labels (default is '#ADB5BD').
• borderColor (optional): Border color for the chart elements (default is '#DEE2E6').
• name (optional): A name for the dataset that will appear in tooltips.
• title (optional): Title for the chart (can be displayed separately).

Example Props

const chartData = {
  data: [10, 15, 25, 30, 45],
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  fontSize: '12px',
  baseColor: '#2196F3',
  labelColor: '#FF5722',
  borderColor: '#E0E0E0',
  name: 'Revenue',
};

Complete Example

Here’s a full example of the VApexChartArea component usage:

<script setup lang="ts">
import VApexChartArea from 'UiKit/components/VApexChartArea/VApexChartArea.vue';

const chartData = {
  data: [20, 30, 40, 25, 15, 35],
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  fontSize: '12px',
  baseColor: '#00BCD4',
  labelColor: '#FFEB3B',
  borderColor: '#BDBDBD',
  name: 'Daily Sales',
};
</script>

<template>
  <VApexChartArea
    :data="chartData.data"
    :labels="chartData.labels"
    :font-size="chartData.fontSize"
    :base-color="chartData.baseColor"
    :label-color="chartData.labelColor"
    :border-color="chartData.borderColor"
    :name="chartData.name"
  />
</template>

Problems

• Customizing the chart for new visual requirements may require extending or modifying the component's core properties or computed options.
• Complex customizations may necessitate overriding ApexCharts' default configurations.

Advantages

• Leverages vue3-apexcharts for robust charting capabilities and a responsive layout.
• Offers flexibility for future visual adjustments using props without requiring external CSS changes.