Skip to main content

Vue

The charting library provides a Vue component for easy integration with Vue 3 applications.

Installation​

npm install financial-charting-library

Basic Usage​

1. Import the Component​

<script setup>
import { ref } from 'vue';
import { Chart } from 'financial-charting-library/vue';
</script>

2. Use in Your Component​

<script setup>
import { ref } from 'vue';
import { Chart } from 'financial-charting-library/vue';

const symbol = ref('AAPL');
const theme = ref('light');

// Create your datafeed
const datafeed = new YourDataFeedImplementation();

const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
};
</script>

<template>
  <div class="container">
    <h1>Vue Chart Example</h1>
    <button @click="toggleTheme">Toggle Theme</button>
    
    <Chart 
      :datafeed="datafeed" 
      :symbol="symbol" 
      interval="1D"
      :theme="theme"
      width="100%"
      height="600px"
    />
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}
</style>

Props​

The Chart component accepts these props:

PropTypeDescription
datafeedIBasicDataFeedRequired - Datafeed instance
symbolstringRequired - Symbol to display
intervalstringRequired - Timeframe ('1', '5', '1D', etc.)
themestring'light' or 'dark' (default: 'light')
widthstringChart width (default: '100%')
heightstringChart height (default: '600px')

Complete Example​

Here's a full example with dynamic controls:

<script setup>
import { ref } from 'vue';
import { Chart } from 'financial-charting-library/vue';

const symbol = ref('AAPL');
const interval = ref('1D');
const theme = ref('light');

// Create datafeed
const datafeed = new YourDataFeedImplementation();

const changeSymbol = (newSymbol) => {
  symbol.value = newSymbol;
};

const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
};
</script>

<template>
  <div class="container">
    <h1>Financial Chart - Vue Example</h1>
    
    <!-- Controls -->
    <div class="controls">
      <button @click="changeSymbol('AAPL')">AAPL</button>
      <button @click="changeSymbol('GOOGL')">GOOGL</button>
      <button @click="changeSymbol('MSFT')">MSFT</button>
      <button @click="toggleTheme">Toggle Theme ({{ theme }})</button>
    </div>

    <!-- Chart -->
    <Chart 
      :datafeed="datafeed" 
      :symbol="symbol" 
      :interval="interval"
      :theme="theme"
      width="100%"
      height="600px"
    />
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.controls {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>

Next Steps​