Shadcn Chart Area

Overview

The VShadcnChartArea component is a chart visualization component built using Unovis and Vue 3. It displays data in an area chart format with customizable curve types, tooltips, and gradient options. It also supports rendering axes and legends.

Usage

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

bash

yarn add @unovis/ts @unovis/vue

Import the VShadcnChartArea component into your Vue file:

vue

import VShadcnChartArea from 'UiKit/components/VCharts/VShadcnChartArea/VShadcnChartArea.vue';

Props

Prop	Type	Default	Description
`customTooltip`	`Component`	-	A custom tooltip component to render.
`curveType`	`CurveType`	`CurveType.MonotoneX`	Defines the type of curve for the chart (e.g., `MonotoneX`, `Linear`).
`showGradiant`	`Boolean`	`true`	Controls the visibility of the gradient. If `true`, a gradient effect is applied to the chart lines.
`title`	`String`	-	The title of the chart, displayed above the chart area.
`showLegend`	`Boolean`	`true`	Controls whether the chart legend is displayed.
`showTooltip`	`Boolean`	`true`	Controls whether the tooltip is displayed when hovering over the chart.
`showXAxis`	`Boolean`	`true`	Controls whether the X-axis is displayed.
`showYAxis`	`Boolean`	`true`	Controls whether the Y-axis is displayed.
`showGridLine`	`Boolean`	`true`	Controls whether grid lines are shown on the chart.
`filterOpacity`	`Number`	`0.2`	The opacity for inactive legend items.
`margin`	`Function`	`{ top: 0, bottom: 0, left: 0, right: 0 }`	Sets the margin for the chart container.
`data`	`Array`	-	The data to be visualized in the chart. Each data point should correspond to a category (e.g., a property in the `Data` type).
`categories`	`Array`	-	The categories of data to plot on the chart. For example, ["Category1", "Category2"].
`xFormatter`	`Function`	-	Custom function for formatting X-axis ticks.
`yFormatter`	`Function`	-	Custom function for formatting Y-axis ticks.

Example

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

vue

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

const data = [
  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
]
</script>

<template>

      <VShadcnChartArea
          title="Portfolio Performance"
          :data="data"
          index="name"
          :categories="['total', 'predicted']"
        />
</template>