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/dual-axis.html

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

Rendered Source

code112 linesFree

templates/dual-axis.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>Dual Axis 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:480px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    // === DATA ===
30    // Left axis: large-scale values (e.g. total market cap in trillions)
31    // Right axis: small-scale values (e.g. stablecoin supply in billions)
32    const categories = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
33    const leftSeries = {
34      name: 'Total Market Cap ($T)',
35      data: [1.8, 1.6, 1.9, 2.1, 2.4, 2.2, 2.6, 2.8, 3.0, 2.9, 3.2, 3.5],
36    };
37    const rightSeries = {
38      name: 'Stablecoin Supply ($B)',
39      data: [130, 128, 132, 135, 138, 140, 143, 145, 148, 150, 153, 156],
40    };
41 
42    // === CHART ===
43    window.CHART_INSTANCES = [];
44    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
45    chart.setOption({
46      backgroundColor: 'transparent',
47      tooltip: {
48        trigger: 'axis',
49        axisPointer: { type: 'cross' },
50      },
51      legend: { top: 8 },
52      grid: { top: 50, right: 80, bottom: 50, left: 70 },
53      xAxis: {
54        type: 'category',
55        data: categories,
56        boundaryGap: false,
57        axisLine: { lineStyle: { color: '#444' } },
58      },
59      yAxis: [
60        {
61          type: 'value',
62          name: leftSeries.name,
63          nameLocation: 'middle',
64          nameGap: 55,
65          nameTextStyle: { color: '#5470c6', fontSize: 12 },
66          axisLabel: { color: '#5470c6', formatter: v => `$${v}T` },
67          splitLine: { lineStyle: { color: '#2a2d3a' } },
68        },
69        {
70          type: 'value',
71          name: rightSeries.name,
72          nameLocation: 'middle',
73          nameGap: 60,
74          nameTextStyle: { color: '#91cc75', fontSize: 12 },
75          axisLabel: { color: '#91cc75', formatter: v => `$${v}B` },
76          splitLine: { show: false },
77        },
78      ],
79      dataZoom: [{ type: 'inside' }, { type: 'slider', height: 20, bottom: 5 }],
80      series: [
81        {
82          name: leftSeries.name,
83          type: 'line',
84          yAxisIndex: 0,
85          data: leftSeries.data,
86          smooth: true,
87          symbol: 'circle',
88          symbolSize: 6,
89          lineStyle: { width: 2.5, color: '#5470c6' },
90          itemStyle: { color: '#5470c6' },
91          areaStyle: { opacity: 0.08, color: '#5470c6' },
92        },
93        {
94          name: rightSeries.name,
95          type: 'line',
96          yAxisIndex: 1,
97          data: rightSeries.data,
98          smooth: true,
99          symbol: 'circle',
100          symbolSize: 6,
101          lineStyle: { width: 2.5, color: '#91cc75' },
102          itemStyle: { color: '#91cc75' },
103          areaStyle: { opacity: 0.08, color: '#91cc75' },
104        },
105      ],
106    });
107 
108    CHART_INSTANCES.push(chart);
109  </script>
110</body>
111</html>
112

Preparing the source view

Charting

templates/dual-axis.html