Vue 3 Trading Chart

A modern and customizable trading chart library built specifically for Vue 3.

Features

• 📊 Candlestick chart with volume
• 🎨 Customizable themes
• 🖱️ Interactive (zoom, pan)
• 📱 Responsive design
• ⚡ High performance with Canvas
• 💻 Modern Vue 3 Composition API

Installation

npm install vue3-trading-chart
# or
yarn add vue3-trading-chart

Usage

<template>
  <TradingVue
    :data="chartData"
    :width="800"
    :height="600"
    :color-theme="theme"
  />
</template>

<script setup>
import { ref } from 'vue'
import { TradingVue } from 'vue3-trading-chart'

const chartData = ref({
  ohlcv: [
    // timestamp, open, high, low, close, volume
    [1625097600000, 35000, 35500, 34800, 35200, 1000],
    [1625184000000, 35200, 36000, 35100, 35800, 1500],
    // ... more data
  ],
  indicators: []
})

const theme = ref({
  background: '#1e222d',
  gridLines: '#2a2e39',
  candleUp: '#26a69a',
  candleDown: '#ef5350',
  volumeUp: '#26a69a55',
  volumeDown: '#ef535055',
  axisText: '#999'
})
</script>

Props

Prop	Type	Default	Description
data	Object	required	Chart data including OHLCV and indicators
width	Number	800	Chart width in pixels
height	Number	400	Chart height in pixels
colorTheme	Object	{...}	Theme configuration

Data Format

The chart expects data in the following format:

{
  ohlcv: [
    // [timestamp, open, high, low, close, volume]
    [1625097600000, 35000, 35500, 34800, 35200, 1000],
    // ... more candles
  ],
  indicators: [
    // Coming soon...
  ]
}

Theme Customization

You can customize the chart appearance by providing a theme object:

const theme = {
  background: '#1e222d',    // Chart background
  gridLines: '#2a2e39',     // Grid lines color
  candleUp: '#26a69a',      // Up candle color
  candleDown: '#ef5350',    // Down candle color
  volumeUp: '#26a69a55',    // Up volume color
  volumeDown: '#ef535055',  // Down volume color
  axisText: '#999'          // Axis text color
}

License

MIT