> ## Documentation Index
> Fetch the complete documentation index at: https://docs.deploystack.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts with Vue ECharts

> Guide to using Apache ECharts for data visualization in DeployStack frontend

DeployStack uses [vue-echarts](https://github.com/ecomfe/vue-echarts) for data visualization, providing powerful and performant charts with Apache ECharts integration for Vue 3.

## Chart Components

The chart components are available in `/components/ui/chart/` following the shadcn/vue pattern with CVA variants.

### LineChart Component

The `LineChart` component provides a simplified API for time-series data visualization, perfect for displaying metrics like HTTP calls, user activity, or any trend data.

```vue theme={null}
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { LineChart } from '@/components/ui/chart'
import { McpServerService } from '@/services/mcpServerService'

const httpCalls = ref<number[]>([])
const labels = ref<string[]>([])
const isLoading = ref(true)

async function fetchMetrics() {
  isLoading.value = true
  try {
    const data = await McpServerService.getUsageMetrics(serverId)
    httpCalls.value = data.map(d => d.calls)
    labels.value = data.map(d => d.hour)
  } catch (error) {
    console.error('Failed to fetch metrics:', error)
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  fetchMetrics()
})
</script>

<template>
  <div class="space-y-4">
    <div>
      <h3 class="text-lg font-semibold">HTTP Call Usage</h3>
      <p class="text-sm text-muted-foreground">
        Requests per hour for the selected period
      </p>
    </div>

    <LineChart 
      :data="httpCalls"
      :labels="labels"
      name="HTTP Calls"
      size="lg"
      :loading="isLoading"
    />
  </div>
</template>
```

### LineChart Props

| Prop         | Type                           | Default                     | Description                      |
| ------------ | ------------------------------ | --------------------------- | -------------------------------- |
| `data`       | `number[]`                     | required                    | Array of data points             |
| `labels`     | `string[]`                     | required                    | Array of x-axis labels           |
| `name`       | `string`                       | `'Data'`                    | Series name for tooltip          |
| `smooth`     | `boolean`                      | `true`                      | Enable smooth line interpolation |
| `showArea`   | `boolean`                      | `true`                      | Show area fill under line        |
| `color`      | `string`                       | `'#0f766e'`                 | Line color (DeployStack teal)    |
| `areaColor`  | `string`                       | `'rgba(15, 118, 110, 0.3)'` | Area gradient color              |
| `size`       | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'`                      | Chart height                     |
| `loading`    | `boolean`                      | `false`                     | Show loading state               |
| `autoresize` | `boolean`                      | `true`                      | Auto-resize with container       |

### Size Variants

```vue theme={null}
<!-- Small: 200px height -->
<LineChart :data="data" :labels="labels" size="sm" />

<!-- Medium: 300px height (default) -->
<LineChart :data="data" :labels="labels" size="md" />

<!-- Large: 400px height -->
<LineChart :data="data" :labels="labels" size="lg" />

<!-- Extra Large: 500px height -->
<LineChart :data="data" :labels="labels" size="xl" />
```

### Custom Styling

```html theme={null}
<!-- Custom colors -->
<LineChart 
  :data="data"
  :labels="labels"
  color="#dc2626"
  area-color="rgba(220, 38, 38, 0.3)"
/>

<!-- No area fill -->
<LineChart 
  :data="data"
  :labels="labels"
  :show-area="false"
/>

<!-- Sharp lines (no smoothing) -->
<LineChart 
  :data="data"
  :labels="labels"
  :smooth="false"
/>
```

## Advanced Usage: Base Chart Component

For full control over chart configuration, use the base `Chart` component with custom ECharts options:

```html theme={null}
<script setup lang="ts">
import { ref } from 'vue'
import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { Chart } from '@/components/ui/chart'
import type { EChartsOption } from 'echarts'

// Register required ECharts components
use([
  GridComponent,
  TooltipComponent,
  BarChart,
  CanvasRenderer
])

const option = ref<EChartsOption>({
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130],
      itemStyle: {
        color: '#0f766e'
      }
    }
  ]
})
</script>

<template>
  <Chart 
    :option="option"
    variant="bar"
    size="lg"
  />
</template>
```

## Best Practices

1. **Use LineChart for simple cases** - The simplified API reduces boilerplate
2. **Use Chart for complex visualizations** - When you need full ECharts control
3. **Set explicit height** - Always use size prop for consistent layouts
4. **Enable autoresize** - Charts automatically adapt to container size changes
5. **Handle loading states** - Use the `loading` prop for better UX
6. **Use CanvasRenderer** - Better performance for most use cases

## Resources

* [GitHub Repository](https://github.com/ecomfe/vue-echarts)
* [Apache ECharts Documentation](https://echarts.apache.org/)
* [Chart Examples](https://echarts.apache.org/examples/)