Charts Installation

How to install and configure @meldui/charts-vue in your project.

Install the Package

pnpm add @meldui/charts-vue

Note: @meldui/charts-vue requires @meldui/vue and vue as peer dependencies. Make sure you have the core MeldUI setup completed first — see the main Installation guide.

Import a Chart Component

Each chart has a dedicated component and a TypeScript config type:

import { MeldLineChart } from '@meldui/charts-vue'
import type { MeldLineChartConfig } from '@meldui/charts-vue'

Basic Usage

<script setup lang="ts">
import { MeldLineChart } from '@meldui/charts-vue'
import type { MeldLineChartConfig } from '@meldui/charts-vue'

const config: MeldLineChartConfig = {
  series: [
    { name: 'Sales', data: [100, 150, 200, 180, 250] },
    { name: 'Revenue', data: [200, 280, 350, 320, 400] },
  ],
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  },
}
</script>

<template>
  <MeldLineChart :config="config" height="400px" />
</template>

Available Components

CSS Setup

Charts inherit theme variables from your MeldUI CSS. No additional CSS imports are needed beyond what the main Installation guide covers. Dark mode is detected automatically.