@amcharts/amcharts5-mcp 1.0.0

package/amcharts5-skill/amcharts5-skill/references/stock.md

@@ -0,0 +1,664 @@
+# Stock & Financial Charts
+Build financial stock charts with panels, indicators, and toolbar.
+
+
+## Required imports
+
+### ES modules
+```ts
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import * as am5stock from "@amcharts/amcharts5/stock";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+```
+
+### CDN
+```html
+<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
+<script src="https://cdn.amcharts.com/lib/5/stock.js"></script>
+<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+```
+
+## Core setup
+
+```html
+<div id="chartcontrols"></div>  <!-- toolbar container -->
+<div id="chartdiv"></div>       <!-- chart container -->
+```
+
+```js
+const root = am5.Root.new("chartdiv");
+root.setThemes([am5themes_Animated.new(root)]);
+
+// 1. Stock chart (wrapper)
+const stockChart = root.container.children.push(
+  am5stock.StockChart.new(root, {})
+);
+
+// 2. Main panel (is an XYChart)
+const mainPanel = stockChart.panels.push(
+  am5stock.StockPanel.new(root, {
+    wheelY: "zoomX",
+    panX: true,
+    panY: true
+  })
+);
+
+// 3. Axes on the panel
+const dateAxis = mainPanel.xAxes.push(am5xy.DateAxis.new(root, {
+  baseInterval: { timeUnit: "day", count: 1 },
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {})
+}));
+
+const valueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+// 4. Main series (candlestick)
+const valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
+  name: "STCK",
+  xAxis: dateAxis,
+  yAxis: valueAxis,
+  valueXField: "Date",
+  valueYField: "Close",
+  highValueYField: "High",
+  lowValueYField: "Low",
+  openValueYField: "Open",
+  calculateAggregates: true,
+  legendValueText: "{valueY}"
+}));
+
+// 5. Register as main stock series (CRITICAL)
+stockChart.set("stockSeries", valueSeries);
+
+// 6. Stock legend
+const legend = mainPanel.plotContainer.children.push(
+  am5stock.StockLegend.new(root, { stockChart: stockChart })
+);
+
+// 7. Cursor
+mainPanel.set("cursor", am5xy.XYCursor.new(root, {
+  yAxis: valueAxis,
+  xAxis: dateAxis,
+  behavior: "none",
+  snapToSeries: [valueSeries]
+}));
+
+// 8. Scrollbar with preview series
+const scrollbar = mainPanel.set("scrollbarX",
+  am5xy.XYChartScrollbar.new(root, {
+    orientation: "horizontal",
+    height: 50
+  })
+);
+
+var sbDateAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
+  baseInterval: { timeUnit: "day", count: 1 },
+  renderer: am5xy.AxisRendererX.new(root, {})
+}));
+var sbValueAxis = scrollbar.chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+var sbSeries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
+  xAxis: sbDateAxis,
+  yAxis: sbValueAxis,
+  valueYField: "Close",
+  valueXField: "Date"
+}));
+
+// 9. Data — LAST
+valueSeries.data.setAll(data);
+sbSeries.data.setAll(data);
+
+// 10. Toolbar (optional)
+const toolbar = am5stock.StockToolbar.new(root, {
+  container: document.getElementById("chartcontrols"),
+  stockChart: stockChart,
+  controls: [
+    am5stock.IndicatorControl.new(root, { stockChart: stockChart }),
+    am5stock.DrawingControl.new(root, { stockChart: stockChart }),
+    am5stock.PeriodSelector.new(root, {
+      stockChart: stockChart,
+      periods: [
+        { timeUnit: "day", count: 1, name: "1D" },
+        { timeUnit: "month", count: 1, name: "1M" },
+        { timeUnit: "month", count: 3, name: "3M" },
+        { timeUnit: "year", count: 1, name: "1Y" },
+        { timeUnit: "max", name: "Max" }
+      ]
+    }),
+    am5stock.SeriesTypeControl.new(root, { stockChart: stockChart }),
+    am5stock.SettingsControl.new(root, { stockChart: stockChart }),
+    am5stock.ResetControl.new(root, { stockChart: stockChart })
+  ]
+});
+```
+
+## Adding a volume panel
+
+```js
+const volumePanel = stockChart.panels.push(
+  am5stock.StockPanel.new(root, {
+    wheelY: "zoomX",
+    panX: true,
+    panY: true,
+    height: am5.percent(30)
+  })
+);
+
+const volDateAxis = volumePanel.xAxes.push(am5xy.DateAxis.new(root, {
+  baseInterval: { timeUnit: "day", count: 1 },
+  renderer: am5xy.AxisRendererX.new(root, {})
+}));
+
+const volValueAxis = volumePanel.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+const volumeSeries = volumePanel.series.push(am5xy.ColumnSeries.new(root, {
+  name: "Volume",
+  xAxis: volDateAxis,
+  yAxis: volValueAxis,
+  valueXField: "Date",
+  valueYField: "Volume"
+}));
+
+stockChart.set("volumeSeries", volumeSeries);
+volumeSeries.data.setAll(data);
+```
+
+## Adding indicators programmatically
+
+```js
+// Bollinger Bands
+stockChart.indicators.push(am5stock.BollingerBands.new(root, {
+  stockChart: stockChart,
+  stockSeries: valueSeries,
+  legend: legend
+}));
+
+// Moving Average (SMA)
+stockChart.indicators.push(am5stock.MovingAverage.new(root, {
+  stockChart: stockChart,
+  stockSeries: valueSeries,
+  legend: legend,
+  period: 20,
+  type: "simple"  // "simple", "weighted", "exponential", "dema", "tema"
+}));
+
+// RSI (creates its own panel)
+stockChart.indicators.push(am5stock.RelativeStrengthIndex.new(root, {
+  stockChart: stockChart,
+  stockSeries: valueSeries,
+  legend: legend
+}));
+
+// MACD (creates its own panel)
+stockChart.indicators.push(am5stock.MACD.new(root, {
+  stockChart: stockChart,
+  stockSeries: valueSeries,
+  legend: legend
+}));
+
+// Volume (requires volumeSeries)
+stockChart.indicators.push(am5stock.Volume.new(root, {
+  stockChart: stockChart,
+  stockSeries: valueSeries,
+  volumeSeries: volumeSeries,
+  legend: legend
+}));
+```
+
+### Available indicators
+
+| Indicator | Class | Needs volumeSeries |
+|-----------|-------|--------------------|
+| Moving Average | `MovingAverage` | No |
+| Moving Average Cross | `MovingAverageCross` | No |
+| Moving Average Envelope | `MovingAverageEnvelope` | No |
+| Moving Average Deviation | `MovingAverageDeviation` | No |
+| Bollinger Bands | `BollingerBands` | No |
+| MACD | `MACD` | No |
+| RSI | `RelativeStrengthIndex` | No |
+| Stochastic Oscillator | `StochasticOscillator` | No |
+| Williams %R | `WilliamsR` | No |
+| Aroon | `Aroon` | No |
+| Awesome Oscillator | `AwesomeOscillator` | No |
+| Commodity Channel Index | `CommodityChannelIndex` | No |
+| Standard Deviation | `StandardDeviation` | No |
+| Disparity Index | `DisparityIndex` | No |
+| Trix | `Trix` | No |
+| ZigZag | `ZigZag` | No |
+| Typical Price | `TypicalPrice` | No |
+| Median Price | `MedianPrice` | No |
+| On Balance Volume | `OnBalanceVolume` | Yes |
+| Accumulation Distribution | `AccumulationDistribution` | Yes |
+| Chaikin Money Flow | `ChaikinMoneyFlow` | Yes |
+| Chaikin Oscillator | `ChaikinOscillator` | Yes |
+| Volume Profile | `VolumeProfile` | Yes |
+| VWAP | `VWAP` | Yes |
+| PVT | `PVT` | Yes |
+| Volume | `Volume` | Yes |
+
+All classes are under `am5stock.*` (e.g., `am5stock.BollingerBands`).
+
+## Data format
+
+```js
+var data = [
+  { Date: new Date(2024, 0, 2).getTime(), Open: 150.0, High: 155.2, Low: 148.5, Close: 153.1, Volume: 1200000 },
+  { Date: new Date(2024, 0, 3).getTime(), Open: 153.1, High: 158.0, Low: 151.3, Close: 156.4, Volume: 1350000 },
+  { Date: new Date(2024, 0, 4).getTime(), Open: 156.4, High: 160.1, Low: 154.8, Close: 159.7, Volume: 1100000 },
+  { Date: new Date(2024, 0, 5).getTime(), Open: 159.7, High: 162.5, Low: 157.2, Close: 158.3, Volume: 980000 },
+  { Date: new Date(2024, 0, 8).getTime(), Open: 158.3, High: 163.0, Low: 156.9, Close: 161.8, Volume: 1420000 },
+  { Date: new Date(2024, 0, 9).getTime(), Open: 161.8, High: 165.4, Low: 160.1, Close: 164.2, Volume: 1560000 },
+  { Date: new Date(2024, 0, 10).getTime(), Open: 164.2, High: 167.8, Low: 162.0, Close: 163.5, Volume: 1180000 },
+  { Date: new Date(2024, 0, 11).getTime(), Open: 163.5, High: 166.3, Low: 161.7, Close: 165.9, Volume: 1050000 },
+  { Date: new Date(2024, 0, 12).getTime(), Open: 165.9, High: 170.2, Low: 164.5, Close: 169.1, Volume: 1630000 },
+  { Date: new Date(2024, 0, 16).getTime(), Open: 169.1, High: 172.0, Low: 167.3, Close: 171.4, Volume: 1470000 },
+  // ... more data points
+];
+```
+
+**All date values must be timestamps (milliseconds).** Data must be sorted ascending by date.
+
+## Toolbar controls
+
+| Control | Class | Purpose |
+|---------|-------|---------|
+| Period selector | `am5stock.PeriodSelector` | 1D, 1M, 1Y, Max buttons |
+| Date range | `am5stock.DateRangeSelector` | Date picker for custom range |
+| Series type | `am5stock.SeriesTypeControl` | Switch line/candlestick/OHLC/area |
+| Indicators | `am5stock.IndicatorControl` | Add SMA, EMA, Bollinger, RSI, etc. |
+| Drawing | `am5stock.DrawingControl` | Trend lines, Fibonacci, annotations |
+| Comparison | `am5stock.ComparisonControl` | Compare multiple symbols |
+| Settings | `am5stock.SettingsControl` | Theme, fills, auto-save |
+| Reset | `am5stock.ResetControl` | Reset chart to defaults |
+| Interval | `am5stock.IntervalControl` | Switch time interval |
+
+## Events
+
+```js
+// Period changed
+stockChart.events.on("periodselected", (ev) => {
+  console.log("Period:", ev.period);
+});
+
+// Series type changed
+valueSeries.events.on("datavalidated", () => {
+  console.log("Data updated");
+});
+```
+
+## Disposal
+
+```js
+root.dispose();
+```
+
+---
+
+## Example 1: Stock chart with candlesticks and toolbar
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Stock Chart</title>
+  <style>
+    body { font-family: -apple-system, sans-serif; margin: 0; padding: 20px; }
+    #chartcontrols { height: auto; padding: 5px 0; }
+    #chartdiv { width: 100%; height: 500px; }
+  </style>
+  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/stock.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+</head>
+<body>
+  <div id="chartcontrols"></div>
+  <div id="chartdiv"></div>
+  <script>
+    var root = am5.Root.new("chartdiv");
+    root.setThemes([am5themes_Animated.new(root)]);
+
+    // Stock chart wrapper
+    var stockChart = root.container.children.push(
+      am5stock.StockChart.new(root, {})
+    );
+
+    // Main panel
+    var mainPanel = stockChart.panels.push(
+      am5stock.StockPanel.new(root, {
+        wheelY: "zoomX",
+        panX: true,
+        panY: true
+      })
+    );
+
+    // Axes
+    var dateAxis = mainPanel.xAxes.push(am5xy.DateAxis.new(root, {
+      baseInterval: { timeUnit: "day", count: 1 },
+      renderer: am5xy.AxisRendererX.new(root, {}),
+      tooltip: am5.Tooltip.new(root, {})
+    }));
+
+    var valueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
+      renderer: am5xy.AxisRendererY.new(root, {})
+    }));
+
+    // Candlestick series
+    var valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
+      name: "ACME",
+      xAxis: dateAxis,
+      yAxis: valueAxis,
+      valueXField: "Date",
+      valueYField: "Close",
+      highValueYField: "High",
+      lowValueYField: "Low",
+      openValueYField: "Open",
+      calculateAggregates: true,
+      legendValueText: "O:{openValueY} H:{highValueY} L:{lowValueY} C:{valueY}"
+    }));
+
+    // CRITICAL: register as stock series
+    stockChart.set("stockSeries", valueSeries);
+
+    // Legend
+    var legend = mainPanel.plotContainer.children.push(
+      am5stock.StockLegend.new(root, { stockChart: stockChart })
+    );
+
+    // Cursor
+    mainPanel.set("cursor", am5xy.XYCursor.new(root, {
+      yAxis: valueAxis,
+      xAxis: dateAxis,
+      behavior: "none",
+      snapToSeries: [valueSeries]
+    }));
+
+    // Scrollbar
+    var scrollbar = mainPanel.set("scrollbarX",
+      am5xy.XYChartScrollbar.new(root, {
+        orientation: "horizontal",
+        height: 50
+      })
+    );
+
+    // Scrollbar preview series
+    var sbDateAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
+      baseInterval: { timeUnit: "day", count: 1 },
+      renderer: am5xy.AxisRendererX.new(root, {})
+    }));
+    var sbValueAxis = scrollbar.chart.yAxes.push(am5xy.ValueAxis.new(root, {
+      renderer: am5xy.AxisRendererY.new(root, {})
+    }));
+    var sbSeries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
+      xAxis: sbDateAxis,
+      yAxis: sbValueAxis,
+      valueYField: "Close",
+      valueXField: "Date"
+    }));
+
+    // Toolbar
+    am5stock.StockToolbar.new(root, {
+      container: document.getElementById("chartcontrols"),
+      stockChart: stockChart,
+      controls: [
+        am5stock.IndicatorControl.new(root, { stockChart: stockChart }),
+        am5stock.DrawingControl.new(root, { stockChart: stockChart }),
+        am5stock.PeriodSelector.new(root, {
+          stockChart: stockChart,
+          periods: [
+            { timeUnit: "month", count: 1, name: "1M" },
+            { timeUnit: "month", count: 3, name: "3M" },
+            { timeUnit: "month", count: 6, name: "6M" },
+            { timeUnit: "year", count: 1, name: "1Y" },
+            { timeUnit: "max", name: "Max" }
+          ]
+        }),
+        am5stock.SeriesTypeControl.new(root, { stockChart: stockChart }),
+        am5stock.ResetControl.new(root, { stockChart: stockChart })
+      ]
+    });
+
+    // Generate sample OHLCV data
+    var data = [];
+    var open = 150;
+    var date = new Date(2024, 0, 2);
+    for (var i = 0; i < 120; i++) {
+      // Skip weekends
+      if (date.getDay() === 0) date.setDate(date.getDate() + 1);
+      if (date.getDay() === 6) date.setDate(date.getDate() + 2);
+
+      var change = (Math.random() - 0.48) * 4;
+      var high = open + Math.random() * 3 + 1;
+      var low = open - Math.random() * 3 - 1;
+      var close = open + change;
+      close = Math.max(low, Math.min(high, close));
+
+      data.push({
+        Date: date.getTime(),
+        Open: Math.round(open * 100) / 100,
+        High: Math.round(high * 100) / 100,
+        Low: Math.round(low * 100) / 100,
+        Close: Math.round(close * 100) / 100,
+        Volume: Math.round(800000 + Math.random() * 1200000)
+      });
+
+      open = close;
+      date = new Date(date);
+      date.setDate(date.getDate() + 1);
+    }
+
+    // Set data LAST
+    valueSeries.data.setAll(data);
+    sbSeries.data.setAll(data);
+
+    stockChart.appear(1000, 100);
+  </script>
+</body>
+</html>
+```
+
+## Example 2: Stock chart with volume panel and Bollinger Bands indicator
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Stock Chart with Volume & Indicators</title>
+  <style>
+    body { font-family: -apple-system, sans-serif; margin: 0; padding: 20px; }
+    #chartcontrols { height: auto; padding: 5px 0; }
+    #chartdiv { width: 100%; height: 600px; }
+  </style>
+  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/stock.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+</head>
+<body>
+  <div id="chartcontrols"></div>
+  <div id="chartdiv"></div>
+  <script>
+    var root = am5.Root.new("chartdiv");
+    root.setThemes([am5themes_Animated.new(root)]);
+
+    var stockChart = root.container.children.push(
+      am5stock.StockChart.new(root, {})
+    );
+
+    // === Main panel ===
+    var mainPanel = stockChart.panels.push(
+      am5stock.StockPanel.new(root, {
+        wheelY: "zoomX",
+        panX: true,
+        panY: true
+      })
+    );
+
+    var dateAxis = mainPanel.xAxes.push(am5xy.DateAxis.new(root, {
+      baseInterval: { timeUnit: "day", count: 1 },
+      renderer: am5xy.AxisRendererX.new(root, {}),
+      tooltip: am5.Tooltip.new(root, {})
+    }));
+
+    var valueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
+      renderer: am5xy.AxisRendererY.new(root, {})
+    }));
+
+    var valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
+      name: "TECH",
+      xAxis: dateAxis,
+      yAxis: valueAxis,
+      valueXField: "Date",
+      valueYField: "Close",
+      highValueYField: "High",
+      lowValueYField: "Low",
+      openValueYField: "Open",
+      calculateAggregates: true,
+      legendValueText: "O:{openValueY} H:{highValueY} L:{lowValueY} C:{valueY}"
+    }));
+
+    stockChart.set("stockSeries", valueSeries);
+
+    var legend = mainPanel.plotContainer.children.push(
+      am5stock.StockLegend.new(root, { stockChart: stockChart })
+    );
+
+    mainPanel.set("cursor", am5xy.XYCursor.new(root, {
+      yAxis: valueAxis,
+      xAxis: dateAxis,
+      behavior: "none",
+      snapToSeries: [valueSeries]
+    }));
+
+    // Scrollbar
+    mainPanel.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
+      orientation: "horizontal",
+      height: 50
+    }));
+
+    // === Volume panel ===
+    var volumePanel = stockChart.panels.push(
+      am5stock.StockPanel.new(root, {
+        wheelY: "zoomX",
+        panX: true,
+        panY: true,
+        height: am5.percent(30)
+      })
+    );
+
+    var volDateAxis = volumePanel.xAxes.push(am5xy.DateAxis.new(root, {
+      baseInterval: { timeUnit: "day", count: 1 },
+      renderer: am5xy.AxisRendererX.new(root, {})
+    }));
+
+    var volValueAxis = volumePanel.yAxes.push(am5xy.ValueAxis.new(root, {
+      renderer: am5xy.AxisRendererY.new(root, {}),
+      numberFormat: "#.#a"
+    }));
+
+    var volumeSeries = volumePanel.series.push(am5xy.ColumnSeries.new(root, {
+      name: "Volume",
+      xAxis: volDateAxis,
+      yAxis: volValueAxis,
+      valueXField: "Date",
+      valueYField: "Volume",
+      tooltip: am5.Tooltip.new(root, { labelText: "Vol: {valueY}" })
+    }));
+
+    // Color volume bars by price direction
+    volumeSeries.columns.template.adapters.add("fill", function(fill, target) {
+      var dataItem = target.dataItem;
+      if (dataItem) {
+        var dc = dataItem.dataContext;
+        return dc.Close >= dc.Open
+          ? am5.color(0x26a69a)
+          : am5.color(0xef5350);
+      }
+      return fill;
+    });
+    volumeSeries.columns.template.adapters.add("stroke", function(stroke, target) {
+      var dataItem = target.dataItem;
+      if (dataItem) {
+        var dc = dataItem.dataContext;
+        return dc.Close >= dc.Open
+          ? am5.color(0x26a69a)
+          : am5.color(0xef5350);
+      }
+      return stroke;
+    });
+
+    stockChart.set("volumeSeries", volumeSeries);
+
+    var volLegend = volumePanel.plotContainer.children.push(
+      am5stock.StockLegend.new(root, { stockChart: stockChart })
+    );
+
+    // === Toolbar ===
+    am5stock.StockToolbar.new(root, {
+      container: document.getElementById("chartcontrols"),
+      stockChart: stockChart,
+      controls: [
+        am5stock.IndicatorControl.new(root, { stockChart: stockChart }),
+        am5stock.DrawingControl.new(root, { stockChart: stockChart }),
+        am5stock.PeriodSelector.new(root, {
+          stockChart: stockChart,
+          periods: [
+            { timeUnit: "month", count: 1, name: "1M" },
+            { timeUnit: "month", count: 3, name: "3M" },
+            { timeUnit: "year", count: 1, name: "1Y" },
+            { timeUnit: "max", name: "Max" }
+          ]
+        }),
+        am5stock.SeriesTypeControl.new(root, { stockChart: stockChart }),
+        am5stock.ResetControl.new(root, { stockChart: stockChart })
+      ]
+    });
+
+    // Generate sample data
+    var data = [];
+    var open = 280;
+    var date = new Date(2023, 6, 3);
+    for (var i = 0; i < 200; i++) {
+      if (date.getDay() === 0) date.setDate(date.getDate() + 1);
+      if (date.getDay() === 6) date.setDate(date.getDate() + 2);
+      var change = (Math.random() - 0.47) * 6;
+      var high = open + Math.random() * 4 + 1;
+      var low = open - Math.random() * 4 - 1;
+      var close = Math.max(low, Math.min(high, open + change));
+      data.push({
+        Date: date.getTime(),
+        Open: Math.round(open * 100) / 100,
+        High: Math.round(high * 100) / 100,
+        Low: Math.round(low * 100) / 100,
+        Close: Math.round(close * 100) / 100,
+        Volume: Math.round(500000 + Math.random() * 2000000)
+      });
+      open = close;
+      date = new Date(date);
+      date.setDate(date.getDate() + 1);
+    }
+
+    // Set data LAST
+    valueSeries.data.setAll(data);
+    volumeSeries.data.setAll(data);
+
+    // Add Bollinger Bands indicator programmatically
+    stockChart.indicators.push(am5stock.BollingerBands.new(root, {
+      stockChart: stockChart,
+      stockSeries: valueSeries,
+      legend: legend
+    }));
+
+    stockChart.appear(1000, 100);
+  </script>
+</body>
+</html>
+```