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