Installation

pnpm add nuxt-charts

pnpm add vue-chrts @unovis/ts @unovis/vue

<script setup lang="ts">
const data = [
  { month: 'Jan', sales: 100, profit: 50 },
  { month: 'Feb', sales: 120, profit: 55 },
  { month: 'Mar', sales: 180, profit: 80 },
  { month: 'Apr', sales: 110, profit: 40 },
  { month: 'May', sales: 90, profit: 30 },
]

const categories = {
  sales: {
    name: 'Sales',
    color: '#3b82f6',
  },
  profit: {
    name: 'Profit',
    color: '#10b981',
  },
}

const xFormatter = (i: number) => data[i].month
</script>

<template>
  <LineChart
    :data="data"
    :categories="categories"
    :height="300"
    :xFormatter="xFormatter"
    xLabel="Month"
    yLabel="Amount"
  />
</template>

<script setup lang="ts">
import { LineChart, LegendPosition } from 'vue-chrts'

const data = [
  { month: 'Jan', sales: 100 },
  { month: 'Feb', sales: 120 },
]

const categories = {
  sales: {
    name: 'Sales',
    color: '#3b82f6'
  }
}
</script>

<template>
  <LineChart
    :data="data"
    :categories="categories"
    :legendPosition="LegendPosition.TopCenter"
  />
</template>