Skip to main content

Vanilla JavaScript

Vanilla JavaScript is the simplest way to integrate the charting library. You just need an HTML file and a container element.

Quick Setup​

1. Include the Library​

Add the library to your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>My Chart</title>
    <!-- Include the library -->
    <script src="path/to/financial-charting-library.js"></script>
</head>
<body>
    <!-- Create a container for the chart -->
    <div id="chart" style="width: 100%; height: 600px;"></div>
    
    <script>
        // Your chart code goes here
    </script>
</body>
</html>

2. Create Your Datafeed​

The chart needs a datafeed to provide market data. You can create a simple one:

// Create a datafeed (you'll need to implement this based on your data source)
const datafeed = new YourDataFeedImplementation();

3. Initialize the Chart​

// Wait for the page to load
document.addEventListener('DOMContentLoaded', function() {
    // Get the container element
    const chartContainer = document.getElementById('chart');
    
    // Create the chart
    const chart = new FinancialChartingLibrary.Chart({
        container: chartContainer,
        datafeed: datafeed,
        symbol: 'AAPL',           // Default symbol
        interval: '1D',           // Default timeframe (1 Day)
        theme: 'light',           // 'light' or 'dark'
        width: '100%',
        height: 600
    });
    
    // Get the API instance for controlling the chart
    const chartApi = chart.getApi();
    
    // Do something when chart is ready
    chart.onChartReady(() => {
        console.log('Chart is ready!');
        
        // Example: Add an indicator
        // chartApi.addIndicator('RSI');
    });
});

Configuration Options​

You can customize the chart with these options:

const chart = new FinancialChartingLibrary.Chart({
    container: document.getElementById('chart'),
    datafeed: datafeed,
    
    // Required
    symbol: 'AAPL',              // Symbol to display
    interval: '1D',              // Timeframe: '1', '5', '15', '1D', '1W', etc.
    
    // Optional
    theme: 'light',              // 'light' or 'dark'
    width: '100%',               // Chart width (CSS value)
    height: 600,                 // Chart height in pixels
    
    // Available timeframes
    enabled_resolution: ['1', '5', '15', '30', '60', '1D', '1W', '1M'],
    
    // Features to disable (optional)
    disabled_features: ['watchlist', 'settings'],
    
    // Auto-save to localStorage
    save_to_local_storage: true,
    
    // Load last viewed chart
    load_last_chart: false
});

Accessing the Chart API​

The Chart API lets you control the chart programmatically:

const chart = new FinancialChartingLibrary.Chart({
    container: document.getElementById('chart'),
    datafeed: datafeed,
    symbol: 'AAPL',
    interval: '1D'
});

// Get the API instance
const api = chart.getApi();

// Now you can use the API
api.addIndicator('RSI');
api.setSymbol('GOOGL', '1D');
api.saveLayout('My Layout');

Complete Example​

Here's a complete working example:

<!DOCTYPE html>
<html>
<head>
    <title>Financial Chart</title>
    <script src="financial-charting-library.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        #chart {
            width: 100%;
            height: 600px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h1>My Financial Chart</h1>
    <div id="chart"></div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Create your datafeed here
            const datafeed = new YourDataFeed();
            
            // Initialize the chart
            const chart = new FinancialChartingLibrary.Chart({
                container: document.getElementById('chart'),
                datafeed: datafeed,
                symbol: 'AAPL',
                interval: '1D',
                theme: 'light'
            });
            
            // Get API when chart is ready
            chart.onChartReady(() => {
                const api = chart.getApi();
                console.log('Chart API ready:', api);
            });
        });
    </script>
</body>
</html>

Next Steps​