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

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

Rendered Source

code64 linesFree

templates/radar.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>Radar 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    const indicators = [
30      { name: 'Performance', max: 100 },
31      { name: 'Reliability', max: 100 },
32      { name: 'Usability', max: 100 },
33      { name: 'Security', max: 100 },
34      { name: 'Scalability', max: 100 },
35      { name: 'Cost', max: 100 },
36    ];
37 
38    window.CHART_INSTANCES = [];
39    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
40    chart.setOption({
41      backgroundColor: 'transparent',
42      tooltip: {},
43      legend: { top: 8, data: ['Product A', 'Product B'] },
44      radar: {
45        indicator: indicators,
46        shape: 'circle',
47        splitArea: { areaStyle: { color: ['transparent'] } },
48        splitLine: { lineStyle: { color: '#2d3148' } },
49        axisLine: { lineStyle: { color: '#2d3148' } },
50      },
51      series: [{
52        type: 'radar',
53        data: [
54          { name: 'Product A', value: [85, 90, 78, 95, 80, 70], areaStyle: { opacity: 0.15 } },
55          { name: 'Product B', value: [70, 75, 92, 80, 88, 85], areaStyle: { opacity: 0.15 } },
56        ],
57      }],
58    });
59  
60    CHART_INSTANCES.push(chart);
61    </script>
62</body>
63</html>
64

Preparing the source view

Charting

templates/radar.html