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

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

Rendered Source

code67 linesFree

templates/line.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>Line Chart</title>
7  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
8  <style>
9    {{BASE_STYLES}}
10  </style>
11</head>
12<body>
13  <div class="toolbar">
14    <div>
15      <h1>{{TITLE}}</h1>
16      <div class="subtitle">{{SUBTITLE}}</div>
17    </div>
18    <div class="actions">
19      <button onclick="downloadPNG(this)">📥 Download PNG</button>
20      <button onclick="copyToClipboard(this)">📋 Copy Image</button>
21      <button onclick="saveToProject(this)">💾 Save Image</button>
22    </div>
23  </div>
24 
25  <div id="chart-area">
26    <div id="main-chart" style="width:100%;height:450px;"></div>
27  </div>
28 
29  <script>
30    {{BASE_EXPORT_JS}}
31  </script>
32  <script>
33    // === DATA (replace with real data) ===
34    const categories = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
35    const series = [
36      { name: 'Revenue', data: [820,932,901,934,1290,1330,1320,1400,1500,1600,1700,1800] },
37      { name: 'Expenses', data: [600,700,680,720,850,900,880,950,1000,1050,1100,1150] },
38    ];
39 
40    // === CHART ===
41    window.CHART_INSTANCES = [];
42    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
43    chart.setOption({
44      backgroundColor: 'transparent',
45      tooltip: { trigger: 'axis' },
46      legend: { top: 8 },
47      grid: { top: 50, right: 30, bottom: 40, left: 60 },
48      xAxis: { type: 'category', data: categories, boundaryGap: false },
49      yAxis: { type: 'value' },
50      dataZoom: [{ type: 'inside' }, { type: 'slider', height: 20, bottom: 5 }],
51      series: series.map(s => ({
52        name: s.name,
53        type: 'line',
54        data: s.data,
55        smooth: true,
56        symbol: 'circle',
57        symbolSize: 6,
58        areaStyle: { opacity: 0.08 },
59        emphasis: { focus: 'series' },
60      })),
61    });
62  
63    CHART_INSTANCES.push(chart);
64    </script>
65</body>
66</html>
67

Preparing the source view

Charting

templates/line.html