Skip to main content

Svelte

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

Installation​

npm install financial-charting-library

Basic Usage​

1. Import the Component​

<script>
  import { Chart } from 'financial-charting-library/svelte';
</script>

2. Use in Your Component​

<script>
  import { Chart } from 'financial-charting-library/svelte';

  let symbol = 'AAPL';
  let theme = 'light';
  
  // Create your datafeed
  const datafeed = new YourDataFeedImplementation();

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

<main class="container">
  <h1>Svelte Chart Example</h1>
  <button on:click={toggleTheme}>Toggle Theme ({theme})</button>
  
  <Chart 
    {datafeed} 
    {symbol} 
    interval="1D"
    {theme} 
    width="100%"
    height="600px"
  />
</main>

<style>
.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
themestring'light' or 'dark'
widthstringChart width
heightstringChart height

Complete Example​

Here's a full example with dynamic controls:

<script>
  import { Chart } from 'financial-charting-library/svelte';

  let symbol = 'AAPL';
  let interval = '1D';
  let theme = 'light';
  
  const datafeed = new YourDataFeedImplementation();

  function changeSymbol(newSymbol) {
    symbol = newSymbol;
  }

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

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

  <!-- Chart -->
  <Chart 
    {datafeed} 
    {symbol} 
    {interval}
    {theme} 
    width="100%"
    height="600px"
  />
</main>

<style>
.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​