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/scatter.html

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

Rendered Source

code56 linesFree

templates/scatter.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>Scatter 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="main-chart" style="width:100%;height:500px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    // === DATA: [x, y, size, category] ===
30    const data = {
31      'Group A': Array.from({length:30}, () => [Math.random()*100, Math.random()*100, Math.random()*40+5]),
32      'Group B': Array.from({length:30}, () => [Math.random()*100, Math.random()*100, Math.random()*40+5]),
33    };
34 
35    window.CHART_INSTANCES = [];
36    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
37    chart.setOption({
38      backgroundColor: 'transparent',
39      tooltip: { formatter: p => `${p.seriesName}<br>X: ${p.data[0].toFixed(1)}, Y: ${p.data[1].toFixed(1)}` },
40      legend: { top: 8 },
41      grid: { top: 50, right: 30, bottom: 40, left: 60 },
42      xAxis: { type: 'value', name: 'X Axis' },
43      yAxis: { type: 'value', name: 'Y Axis' },
44      series: Object.entries(data).map(([name, vals]) => ({
45        name, type: 'scatter', data: vals,
46        symbolSize: d => d[2] / 3,
47        emphasis: { focus: 'series' },
48        itemStyle: { opacity: 0.75 },
49      })),
50    });
51  
52    CHART_INSTANCES.push(chart);
53    </script>
54</body>
55</html>
56

Marketplace

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/scatter.html

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

Rendered Source

code56 linesFree

templates/scatter.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>Scatter 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="main-chart" style="width:100%;height:500px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    // === DATA: [x, y, size, category] ===
30    const data = {
31      'Group A': Array.from({length:30}, () => [Math.random()*100, Math.random()*100, Math.random()*40+5]),
32      'Group B': Array.from({length:30}, () => [Math.random()*100, Math.random()*100, Math.random()*40+5]),
33    };
34 
35    window.CHART_INSTANCES = [];
36    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
37    chart.setOption({
38      backgroundColor: 'transparent',
39      tooltip: { formatter: p => `${p.seriesName}<br>X: ${p.data[0].toFixed(1)}, Y: ${p.data[1].toFixed(1)}` },
40      legend: { top: 8 },
41      grid: { top: 50, right: 30, bottom: 40, left: 60 },
42      xAxis: { type: 'value', name: 'X Axis' },
43      yAxis: { type: 'value', name: 'Y Axis' },
44      series: Object.entries(data).map(([name, vals]) => ({
45        name, type: 'scatter', data: vals,
46        symbolSize: d => d[2] / 3,
47        emphasis: { focus: 'series' },
48        itemStyle: { opacity: 0.75 },
49      })),
50    });
51  
52    CHART_INSTANCES.push(chart);
53    </script>
54</body>
55</html>
56

Charting

templates/scatter.html

Preparing the source view

Charting

templates/scatter.html