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

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

Rendered Source

code81 linesFree

templates/pie.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>Pie 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 class="grid-2">
25      <div class="chart-box">
26        <div class="chart-title">Distribution</div>
27        <div id="pie-chart" style="width:100%;height:400px;"></div>
28      </div>
29      <div class="chart-box">
30        <div class="chart-title">Breakdown (Donut)</div>
31        <div id="donut-chart" style="width:100%;height:400px;"></div>
32      </div>
33    </div>
34  </div>
35 
36  <script>{{BASE_EXPORT_JS}}</script>
37  <script>
38    // === DATA ===
39    const data = [
40      { name: 'Category A', value: 335 },
41      { name: 'Category B', value: 234 },
42      { name: 'Category C', value: 154 },
43      { name: 'Category D', value: 135 },
44      { name: 'Category E', value: 108 },
45    ];
46 
47    // === PIE ===
48    window.CHART_INSTANCES = [];
49    const pie = echarts.init(document.getElementById('pie-chart'), 'dark');
50    pie.setOption({
51      backgroundColor: 'transparent',
52      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
53      series: [{
54        type: 'pie', radius: '65%', center: ['50%','55%'],
55        data: data,
56        emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)' } },
57        label: { color: '#c8cdd6' },
58      }],
59    });
60 
61    
62    CHART_INSTANCES.push(pie);
63// === DONUT ===
64    const donut = echarts.init(document.getElementById('donut-chart'), 'dark');
65    donut.setOption({
66      backgroundColor: 'transparent',
67      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
68      series: [{
69        type: 'pie', radius: ['40%','70%'], center: ['50%','55%'],
70        data: data,
71        emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
72        label: { show: true, formatter: '{b}\n{d}%', color: '#c8cdd6' },
73        itemStyle: { borderRadius: 6, borderColor: '#12141c', borderWidth: 2 },
74      }],
75    });
76  
77    CHART_INSTANCES.push(donut);
78    </script>
79</body>
80</html>
81

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

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

Rendered Source

code81 linesFree

templates/pie.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>Pie 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 class="grid-2">
25      <div class="chart-box">
26        <div class="chart-title">Distribution</div>
27        <div id="pie-chart" style="width:100%;height:400px;"></div>
28      </div>
29      <div class="chart-box">
30        <div class="chart-title">Breakdown (Donut)</div>
31        <div id="donut-chart" style="width:100%;height:400px;"></div>
32      </div>
33    </div>
34  </div>
35 
36  <script>{{BASE_EXPORT_JS}}</script>
37  <script>
38    // === DATA ===
39    const data = [
40      { name: 'Category A', value: 335 },
41      { name: 'Category B', value: 234 },
42      { name: 'Category C', value: 154 },
43      { name: 'Category D', value: 135 },
44      { name: 'Category E', value: 108 },
45    ];
46 
47    // === PIE ===
48    window.CHART_INSTANCES = [];
49    const pie = echarts.init(document.getElementById('pie-chart'), 'dark');
50    pie.setOption({
51      backgroundColor: 'transparent',
52      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
53      series: [{
54        type: 'pie', radius: '65%', center: ['50%','55%'],
55        data: data,
56        emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)' } },
57        label: { color: '#c8cdd6' },
58      }],
59    });
60 
61    
62    CHART_INSTANCES.push(pie);
63// === DONUT ===
64    const donut = echarts.init(document.getElementById('donut-chart'), 'dark');
65    donut.setOption({
66      backgroundColor: 'transparent',
67      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
68      series: [{
69        type: 'pie', radius: ['40%','70%'], center: ['50%','55%'],
70        data: data,
71        emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
72        label: { show: true, formatter: '{b}\n{d}%', color: '#c8cdd6' },
73        itemStyle: { borderRadius: 6, borderColor: '#12141c', borderWidth: 2 },
74      }],
75    });
76  
77    CHART_INSTANCES.push(donut);
78    </script>
79</body>
80</html>
81

Charting

templates/pie.html

Preparing the source view

Charting

templates/pie.html