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

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

Rendered Source

code61 linesFree

templates/bar.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>Bar 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:450px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    // === DATA ===
30    const categories = ['Product A','Product B','Product C','Product D','Product E'];
31    const series = [
32      { name: 'Q1', data: [120,200,150,80,70] },
33      { name: 'Q2', data: [150,230,180,100,90] },
34      { name: 'Q3', data: [180,260,200,120,110] },
35    ];
36 
37    // === CHART ===
38    window.CHART_INSTANCES = [];
39    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
40    chart.setOption({
41      backgroundColor: 'transparent',
42      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
43      legend: { top: 8 },
44      grid: { top: 50, right: 30, bottom: 30, left: 60 },
45      xAxis: { type: 'category', data: categories },
46      yAxis: { type: 'value' },
47      series: series.map(s => ({
48        name: s.name,
49        type: 'bar',
50        data: s.data,
51        barMaxWidth: 40,
52        emphasis: { focus: 'series' },
53        itemStyle: { borderRadius: [4, 4, 0, 0] },
54      })),
55    });
56  
57    CHART_INSTANCES.push(chart);
58    </script>
59</body>
60</html>
61

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

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

Rendered Source

code61 linesFree

templates/bar.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>Bar 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:450px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    // === DATA ===
30    const categories = ['Product A','Product B','Product C','Product D','Product E'];
31    const series = [
32      { name: 'Q1', data: [120,200,150,80,70] },
33      { name: 'Q2', data: [150,230,180,100,90] },
34      { name: 'Q3', data: [180,260,200,120,110] },
35    ];
36 
37    // === CHART ===
38    window.CHART_INSTANCES = [];
39    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
40    chart.setOption({
41      backgroundColor: 'transparent',
42      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
43      legend: { top: 8 },
44      grid: { top: 50, right: 30, bottom: 30, left: 60 },
45      xAxis: { type: 'category', data: categories },
46      yAxis: { type: 'value' },
47      series: series.map(s => ({
48        name: s.name,
49        type: 'bar',
50        data: s.data,
51        barMaxWidth: 40,
52        emphasis: { focus: 'series' },
53        itemStyle: { borderRadius: [4, 4, 0, 0] },
54      })),
55    });
56  
57    CHART_INSTANCES.push(chart);
58    </script>
59</body>
60</html>
61

Charting

templates/bar.html

Preparing the source view

Charting

templates/bar.html