Chart Donut

Overview

The VApexChartDonut component renders a donut chart using the vue3-apexcharts library. This component accepts various props to customize the chart's appearance, including data, labels, font size, colors, and a title.

Usage

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

bash

yarn add @apexcharts/apexcharts vue3-apexcharts

Import the VApexChartDonut component into your Vue file:

vue

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

Include the component in your template like this:

vue

<VApexChartDonut
  :data="[20, 30, 25, 15, 10]"
  :labels="['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5']"
  fontSize="12px"
  :colors="['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FFD633']"
  title="Donut Chart Example"
/>

Props

Name	Type	Default Value	Description
`data`	`number[]`	`[]`	Array of data values for the chart.
`labels`	`string[]`	`[]`	Array of label names corresponding to the data values.
`fontSize`	`string`	`'10px'`	Font size for the donut chart's value labels.
`colors`	`string[]`	`['#004FFF', '#3DDC97', '#FF7070', '#6F3DFD', '#FFC24D']`	Array of color codes for the chart segments.
`title`	`string`	N/A	Title to be displayed above the chart.

Example Usage

vue

<VApexChartDonut
  :data="[20, 30, 25, 15, 10]"
  :labels="['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5']"
  fontSize="12px"
  :colors="['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FFD633']"
  title="Donut Chart Example"
/>

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.