candlestick-chart-generator
Version:
A Node.js library for generating candlestick chart screenshots using financial data
85 lines (74 loc) • 2.78 kB
HTML
<html>
<head>
<title>Candlestick Chart</title>
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.umd.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#chart-container {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="chart-container"></div>
<script>
// Global variables to be set by the chart renderer
let chartData = [];
let chartOptions = {};
let chartWidth = 1200;
let chartHeight = 600;
// Function to initialize and render the chart
function initializeChart() {
const chartContainer = document.getElementById('chart-container');
// Default chart options
const defaultOptions = {
width: chartWidth,
height: chartHeight,
layout: {
background: { type: LightweightCharts.ColorType.Solid, color: '#131722' },
textColor: '#d1d4dc',
},
grid: {
vertLines: { color: 'rgba(42, 46, 57, 0.5)' },
horzLines: { color: 'rgba(42, 46, 57, 0.5)' },
},
timeScale: {
borderColor: 'rgba(197, 203, 206, 0.8)'
},
rightPriceScale: {
borderColor: 'rgba(197, 203, 206, 0.8)'
}
};
// Merge default options with custom options
const finalOptions = { ...defaultOptions, ...chartOptions };
// Create the chart
const chart = LightweightCharts.createChart(chartContainer, finalOptions);
// Add candlestick series
const candlestickSeries = chart.addCandlestickSeries({
upColor: '#26a69a',
downColor: '#ef5350',
borderVisible: false,
wickUpColor: '#26a69a',
wickDownColor: '#ef5350',
});
// Set the data
candlestickSeries.setData(chartData);
// Fit content to show all data
chart.timeScale().fitContent();
// Signal that the chart is ready
window.chartReady = true;
}
// Initialize chart when the page loads
window.addEventListener('load', () => {
// Small delay to ensure everything is loaded
setTimeout(initializeChart, 100);
});
</script>
</body>
</html>