Source from repo

Charting

Generate TradingView-style dark-theme candlestick charts with RSI, MACD, Bollinger Bands, and EMA/SMA using mplfinance.

starchild-ai-agentGitHub starchild-ai-agentSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

68.8 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

templates/candlestick.html

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

code108 linesFree

templates/candlestick.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Candlestick Chart</title>
7  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
8  <style>{{BASE_STYLES}}</style>
9</head>
10<body>
11  <div class="toolbar">
12    <div>
13      <h1>{{TITLE}}</h1>
14      <div class="subtitle">{{SUBTITLE}}</div>
15    </div>
16    <div class="actions">
17      <button onclick="downloadPNG(this)">📥 Download PNG</button>
18      <button onclick="copyToClipboard(this)">📋 Copy Image</button>
19      <button onclick="saveToProject(this)">💾 Save Image</button>
20    </div>
21  </div>
22 
23  <div id="chart-area">
24    <div id="kline-chart" style="width:100%;height:500px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    // === DATA: [date, open, close, low, high, volume] ===
30    const rawData = [
31      ['2025-01-02', 94500, 96200, 93800, 96800, 12500],
32      ['2025-01-03', 96200, 95100, 94200, 97000, 11200],
33      ['2025-01-04', 95100, 97800, 94800, 98200, 15300],
34      // ... replace with real data
35    ];
36 
37    const dates = rawData.map(d => d[0]);
38    const ohlc = rawData.map(d => [d[1], d[2], d[3], d[4]]);  // open, close, low, high
39    const volumes = rawData.map(d => d[5]);
40    const isUp = rawData.map(d => d[2] >= d[1]);
41 
42    // Simple MA calculation
43    function calcMA(data, period) {
44      const result = [];
45      for (let i = 0; i < data.length; i++) {
46        if (i < period - 1) { result.push('-'); continue; }
47        let sum = 0;
48        for (let j = 0; j < period; j++) sum += data[i - j][1]; // close price
49        result.push((sum / period).toFixed(2));
50      }
51      return result;
52    }
53 
54    window.CHART_INSTANCES = [];
55    const chart = echarts.init(document.getElementById('kline-chart'), 'dark');
56    chart.setOption({
57      backgroundColor: 'transparent',
58      tooltip: {
59        trigger: 'axis',
60        axisPointer: { type: 'cross' },
61      },
62      legend: { data: ['K', 'MA7', 'MA25'], top: 8 },
63      grid: [
64        { top: 50, left: 60, right: 30, height: '60%' },
65        { left: 60, right: 30, top: '76%', height: '16%' },
66      ],
67      xAxis: [
68        { type: 'category', data: dates, gridIndex: 0, boundaryGap: true,
69          axisLine: { lineStyle: { color: '#2d3148' } } },
70        { type: 'category', data: dates, gridIndex: 1, boundaryGap: true,
71          axisLine: { lineStyle: { color: '#2d3148' } } },
72      ],
73      yAxis: [
74        { scale: true, gridIndex: 0, splitLine: { lineStyle: { color: '#1e2236' } } },
75        { scale: true, gridIndex: 1, splitLine: { show: false },
76          axisLabel: { show: false }, axisTick: { show: false } },
77      ],
78      dataZoom: [
79        { type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100 },
80        { type: 'slider', xAxisIndex: [0, 1], height: 20, bottom: 5 },
81      ],
82      series: [
83        {
84          name: 'K', type: 'candlestick', data: ohlc,
85          itemStyle: {
86            color: '#26a69a', color0: '#ef5350',
87            borderColor: '#26a69a', borderColor0: '#ef5350',
88          },
89        },
90        { name: 'MA7', type: 'line', data: calcMA(ohlc, 7), smooth: true,
91          lineStyle: { width: 1.5 }, symbol: 'none' },
92        { name: 'MA25', type: 'line', data: calcMA(ohlc, 25), smooth: true,
93          lineStyle: { width: 1.5 }, symbol: 'none' },
94        {
95          name: 'Volume', type: 'bar', xAxisIndex: 1, yAxisIndex: 1,
96          data: volumes.map((v, i) => ({
97            value: v,
98            itemStyle: { color: isUp[i] ? 'rgba(38,166,154,0.5)' : 'rgba(239,83,80,0.5)' },
99          })),
100        },
101      ],
102    });
103  
104    CHART_INSTANCES.push(chart);
105    </script>
106</body>
107</html>
108

Preparing the source view

Charting

templates/candlestick.html