@amcharts/amcharts5 5.0.0-beta.3 → 5.0.0-beta.30

package/examples/javascript/xy-stock/index.js

@@ -2,24 +2,21 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5xy from "@amcharts/amcharts5/xy";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
-/**
- * Create root element
- * https://www.amcharts.com/docs/v5/getting-started/#Root_element
- */
+
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
 const root = am5.Root.new("chartdiv");
 
-/**
- * Set themes
- * https://www.amcharts.com/docs/v5/concepts/themes/
- */
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
 root.setThemes([
   am5themes_Animated.new(root)
 ]);
 
-/**
- * Create chart
- * https://www.amcharts.com/docs/v5/charts/xy-chart/
- */
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
 const chart = root.container.children.push(
   am5xy.XYChart.new(root, {
     panX: true,
@@ -30,51 +27,143 @@ const chart = root.container.children.push(
   })
 );
 
-chart.get("colors").set("step", 2);
+chart.get("colors") .set("step", 2);
 
-const valueAxisRenderer = am5xy.AxisRendererY.new(root, { inside: true });
-valueAxisRenderer.labels.template.setAll({ centerY: am5.percent(100), maxPosition: 0.98 });
-const valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: valueAxisRenderer, height: am5.percent(70) }));
-valueAxis.axisHeader.children.push(am5.Label.new(root, { text: "Value", fontWeight: "bold", paddingBottom: 5, paddingTop: 5 }));
 
-const volumeAxisRenderer = am5xy.AxisRendererY.new(root, { inside: true });
-volumeAxisRenderer.labels.template.setAll({ centerY: am5.percent(100), maxPosition: 0.98 });
-const volumeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: volumeAxisRenderer, height: am5.percent(30), layer: 5 }));
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+const valueAxisRenderer = am5xy.AxisRendererY.new(root, {
+  inside: true
+});
+valueAxisRenderer.labels.template.setAll({
+  centerY: am5.percent(100),
+  maxPosition: 0.98
+});
+const valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: valueAxisRenderer,
+  height: am5.percent(70)
+}));
+valueAxis.axisHeader.children.push(am5.Label.new(root, {
+  text: "Value",
+  fontWeight: "bold",
+  paddingBottom: 5,
+  paddingTop: 5
+}));
+
+const volumeAxisRenderer = am5xy.AxisRendererY.new(root, {
+  inside: true
+});
+volumeAxisRenderer.labels.template.setAll({
+  centerY: am5.percent(100),
+  maxPosition: 0.98
+});
+const volumeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: volumeAxisRenderer,
+  height: am5.percent(30),
+  layer: 5
+}));
 volumeAxis.axisHeader.set("paddingTop", 10);
-volumeAxis.axisHeader.children.push(am5.Label.new(root, { text: "Volume", fontWeight: "bold", paddingTop: 5, paddingBottom: 5 }));
+volumeAxis.axisHeader.children.push(am5.Label.new(root, {
+  text: "Volume",
+  fontWeight: "bold",
+  paddingTop: 5,
+  paddingBottom: 5
+}));
 
 
 const dateAxisRenderer = am5xy.AxisRendererX.new(root, {});
-dateAxisRenderer.labels.template.setAll({ minPosition: 0.01, maxPosition: 0.99 });
-const dateAxis = chart.xAxes.push(am5xy.DateAxis.new(root, { groupData: true, baseInterval: { timeUnit: "day", count: 1 }, renderer: dateAxisRenderer }));
-dateAxis.set("tooltip", am5.Tooltip.new(root, { themeTags: ["axis"] }));
+dateAxisRenderer.labels.template.setAll({
+  minPosition: 0.01,
+  maxPosition: 0.99
+});
+const dateAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+  groupData: true,
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: dateAxisRenderer
+}));
+dateAxis.set("tooltip", am5.Tooltip.new(root, {
+  themeTags: ["axis"]
+}));
 
-const valueSeries1 = chart.series.push(am5xy.LineSeries.new(root, { name: "XTD", valueYField: "price1", calculateAggregates: true, valueYShow: "valueYChangeSelectionPercent", valueXField: "date", xAxis: dateAxis, yAxis: valueAxis, legendValueText: "{valueY}" }));
 
-const valueLegend = valueAxis.axisHeader.children.push(am5.Legend.new(root, { useDefaultMarker: true }));
-valueLegend.data.setAll([valueSeries1]);
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+const valueSeries1 = chart.series.push(am5xy.LineSeries.new(root, {
+  name: "XTD",
+  valueYField: "price1",
+  calculateAggregates: true,
+  valueYShow: "valueYChangeSelectionPercent",
+  valueXField: "date",
+  xAxis: dateAxis,
+  yAxis: valueAxis,
+  legendValueText: "{valueY}"
+}));
 
-const valueTooltip = valueSeries1.set("tooltip", am5.Tooltip.new(root, { getFillFromSprite: false, getStrokeFromSprite: true, getLabelFillFromSprite: true, autoTextColor: false, pointerOrientation: "horizontal" }));
-valueTooltip.get("background").set("fill", root.interfaceColors.get("background"));
+const valueTooltip = valueSeries1.set("tooltip", am5.Tooltip.new(root, {
+  getFillFromSprite: false,
+  getStrokeFromSprite: true,
+  getLabelFillFromSprite: true,
+  autoTextColor: false,
+  pointerOrientation: "horizontal"
+}));
+valueTooltip.get("background") .set("fill", root.interfaceColors.get("background"));
 valueTooltip.label.set("text", "{name}: {valueY} {valueYChangePercent.formatNumber('[#00ff00]+#,###.##|[#ff0000]#,###.##|[#999999]0')}%");
 
-const firstColor = chart.get("colors").getIndex(0);
-const volumeSeries = chart.series.push(am5xy.ColumnSeries.new(root, { name: "XTD", fill: firstColor, stroke: firstColor, valueYField: "quantity", valueXField: "date", valueYGrouped: "sum", xAxis: dateAxis, yAxis: volumeAxis, legendValueText: "{valueY}" }));
-volumeSeries.columns.template.setAll({ strokeWidth: 0.2, strokeOpacity: 1, stroke: am5.color(0xffffff) });
+const firstColor = chart.get("colors") .getIndex(0);
+const volumeSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
+  name: "XTD",
+  fill: firstColor,
+  stroke: firstColor,
+  valueYField: "quantity",
+  valueXField: "date",
+  valueYGrouped: "sum",
+  xAxis: dateAxis,
+  yAxis: volumeAxis,
+  legendValueText: "{valueY}"
+}));
+volumeSeries.columns.template.setAll({
+  strokeWidth: 0.2,
+  strokeOpacity: 1,
+  stroke: am5.color(0xffffff)
+});
 
 const volumeTooltip = volumeSeries.set("tooltip", am5.Tooltip.new(root, {}));
 volumeTooltip.label.set("text", "{valueY}");
 
-const volumeLegend = volumeAxis.axisHeader.children.push(am5.Legend.new(root, { useDefaultMarker: true }));
+
+// Add legend to axis header
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-headers/
+// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
+const valueLegend = valueAxis.axisHeader.children.push(
+  am5.Legend.new(root, {
+    useDefaultMarker: true
+  })
+);
+valueLegend.data.setAll([valueSeries1]);
+
+const volumeLegend = volumeAxis.axisHeader.children.push(
+  am5.Legend.new(root, {
+    useDefaultMarker: true
+  })
+);
 volumeLegend.data.setAll([volumeSeries]);
 
+
+// Stack axes vertically
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#Stacked_axes
 chart.leftAxesContainer.set("layout", root.verticalLayout);
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
 chart.set("cursor", am5xy.XYCursor.new(root, {}))
 
-/**
- * Add scrollbar
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 const scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
   orientation: "horizontal",
   height: 50
@@ -83,8 +172,14 @@ const scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
 const sbDateAxis = scrollbar.chart.xAxes.push(
   am5xy.DateAxis.new(root, {
     groupData: true,
-    groupIntervals: [{ timeUnit: "week", count: 1 }],
-    baseInterval: { timeUnit: "day", count: 1 },
+    groupIntervals: [{
+      timeUnit: "week",
+      count: 1
+    }],
+    baseInterval: {
+      timeUnit: "day",
+      count: 1
+    },
     renderer: am5xy.AxisRendererX.new(root, {})
   })
 );
@@ -110,6 +205,8 @@ sbSeries.fills.template.setAll({
 });
 
 
+// Generate random data and set on series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Setting_data
 const data = [];
 let price1 = 1000;
 let quantity = 10000;
@@ -126,10 +223,18 @@ for (var i = 1; i < 5000; i++) {
   if (quantity < 0) {
     quantity *= -1;
   }
-  data.push({ date: new Date(2010, 0, i).getTime(), price1: price1, quantity: quantity });
+  data.push({
+    date: new Date(2010, 0, i).getTime(),
+    price1: price1,
+    quantity: quantity
+  });
 }
 
 valueSeries1.data.setAll(data);
-
 volumeSeries.data.setAll(data);
-sbSeries.data.setAll(data);
+sbSeries.data.setAll(data);
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+chart.appear(1000, 100);

package/examples/javascript/xy-stock/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-stock",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.3",
+    "@amcharts/amcharts5": "^5.0.0-beta.30",
     "source-map-loader": "^3.0.0",
     "webpack": "^5.1.3",
     "webpack-cli": "^4.1.0",

package/examples/javascript/xy-stock-comparing/index.js

@@ -2,114 +2,230 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5xy from "@amcharts/amcharts5/xy";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
-/**
- * Create root element
- * https://www.amcharts.com/docs/v5/getting-started/#Root_element
- */
+
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
 const root = am5.Root.new("chartdiv");
 
-/**
- * Set themes
- * https://www.amcharts.com/docs/v5/concepts/themes/
- */
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
 root.setThemes([
   am5themes_Animated.new(root)
 ]);
 
-/**
- * Create chart
- * https://www.amcharts.com/docs/v5/charts/xy-chart/
- */
-const chart = root.container.children.push(
-  am5xy.XYChart.new(root, {
-    panX: true,
-    panY: false,
-    wheelX: "panX",
-    wheelY: "zoomX",
-    layout: root.verticalLayout
-  })
-);
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+const chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: true,
+  panY: false,
+  wheelX: "panX",
+  wheelY: "zoomX",
+  layout: root.verticalLayout
+}));
 
 chart.get("colors").set("step", 2);
 
-const valueAxisRenderer = am5xy.AxisRendererY.new(root, { inside: true });
-valueAxisRenderer.labels.template.setAll({ centerY: am5.percent(100), maxPosition: 0.98 });
-const valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: valueAxisRenderer, height: am5.percent(70) }));
-valueAxis.axisHeader.children.push(am5.Label.new(root, { text: "Value", fontWeight: "bold", paddingBottom: 5, paddingTop: 5 }));
 
-const volumeAxisRenderer = am5xy.AxisRendererY.new(root, { inside: true });
-volumeAxisRenderer.labels.template.setAll({ centerY: am5.percent(100), maxPosition: 0.98 });
-const volumeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: volumeAxisRenderer, height: am5.percent(30), layer: 5 }));
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+
+// Y axis #1
+const valueAxisRenderer = am5xy.AxisRendererY.new(root, {
+  inside: true
+});
+
+valueAxisRenderer.labels.template.setAll({
+  centerY: am5.percent(100),
+  maxPosition: 0.98
+});
+
+const valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: valueAxisRenderer,
+  height: am5.percent(70)
+}));
+
+valueAxis.axisHeader.children.push(am5.Label.new(root, {
+  text: "Value",
+  fontWeight: "bold",
+  paddingBottom: 5,
+  paddingTop: 5
+}));
+
+
+// Y axis #2
+const volumeAxisRenderer = am5xy.AxisRendererY.new(root, {
+  inside: true
+});
+
+volumeAxisRenderer.labels.template.setAll({
+  centerY: am5.percent(100),
+  maxPosition: 0.98
+});
+
+const volumeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: volumeAxisRenderer,
+  height: am5.percent(30),
+  layer: 5
+}));
+
 volumeAxis.axisHeader.set("paddingTop", 10);
-volumeAxis.axisHeader.children.push(am5.Label.new(root, { text: "Volume", fontWeight: "bold", paddingTop: 5, paddingBottom: 5 }));
+
+volumeAxis.axisHeader.children.push(am5.Label.new(root, {
+  text: "Volume",
+  fontWeight: "bold",
+  paddingTop: 5,
+  paddingBottom: 5
+}));
 
 
+// X axis
 const dateAxisRenderer = am5xy.AxisRendererX.new(root, {});
-dateAxisRenderer.labels.template.setAll({ minPosition: 0.01, maxPosition: 0.99 });
-const dateAxis = chart.xAxes.push(am5xy.DateAxis.new(root, { groupData: true, baseInterval: { timeUnit: "day", count: 1 }, renderer: dateAxisRenderer }));
-dateAxis.set("tooltip", am5.Tooltip.new(root, { themeTags: ["axis"] }));
 
-const valueSeries1 = chart.series.push(am5xy.LineSeries.new(root, { name: "XTD", valueYField: "price1", calculateAggregates: true, valueYShow: "valueYChangeSelectionPercent", valueXField: "date", xAxis: dateAxis, yAxis: valueAxis, legendValueText: "{valueY}" }));
-const valueSeries2 = chart.series.push(am5xy.LineSeries.new(root, { name: "BTD", valueYField: "price2", calculateAggregates: true, valueYShow: "valueYChangeSelectionPercent", valueXField: "date", xAxis: dateAxis, yAxis: valueAxis, legendValueText: "{valueY}" }));
+dateAxisRenderer.labels.template.setAll({
+  minPosition: 0.01,
+  maxPosition: 0.99
+});
+
+const dateAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+  groupData: true,
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: dateAxisRenderer
+}));
+
+dateAxis.set("tooltip", am5.Tooltip.new(root, {
+  themeTags: ["axis"]
+}));
+
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+const valueSeries1 = chart.series.push(am5xy.LineSeries.new(root, {
+  name: "XTD",
+  valueYField: "price1",
+  calculateAggregates: true,
+  valueYShow: "valueYChangeSelectionPercent",
+  valueXField: "date",
+  xAxis: dateAxis,
+  yAxis: valueAxis,
+  legendValueText: "{valueY}"
+}));
+
+const valueSeries2 = chart.series.push(am5xy.LineSeries.new(root, {
+  name: "BTD",
+  valueYField: "price2",
+  calculateAggregates: true,
+  valueYShow: "valueYChangeSelectionPercent",
+  valueXField: "date",
+  xAxis: dateAxis,
+  yAxis: valueAxis,
+  legendValueText: "{valueY}"
+}));
 
-const valueLegend = valueAxis.axisHeader.children.push(am5.Legend.new(root, { useDefaultMarker: true }));
-valueLegend.data.setAll([valueSeries1, valueSeries2]);
 
-const valueTooltip = valueSeries1.set("tooltip", am5.Tooltip.new(root, { getFillFromSprite: false, getStrokeFromSprite: true, getLabelFillFromSprite: true, autoTextColor: false, pointerOrientation: "horizontal" }));
+// Add series tooltips
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Tooltips
+const valueTooltip = valueSeries1.set("tooltip", am5.Tooltip.new(root, {
+  getFillFromSprite: false,
+  getStrokeFromSprite: true,
+  getLabelFillFromSprite: true,
+  autoTextColor: false,
+  pointerOrientation: "horizontal"
+}));
 valueTooltip.get("background").set("fill", root.interfaceColors.get("background"));
 valueTooltip.label.set("text", "{name}: {valueY} {valueYChangePercent.formatNumber('[#00ff00]+#,###.##|[#ff0000]#,###.##|[#999999]0')}%");
 
-const valueTooltip2 = valueSeries2.set("tooltip", am5.Tooltip.new(root, { getFillFromSprite: false, getStrokeFromSprite: true, getLabelFillFromSprite: true, autoTextColor: false, pointerOrientation: "horizontal" }));
+const valueTooltip2 = valueSeries2.set("tooltip", am5.Tooltip.new(root, {
+  getFillFromSprite: false,
+  getStrokeFromSprite: true,
+  getLabelFillFromSprite: true,
+  autoTextColor: false,
+  pointerOrientation: "horizontal"
+}));
 valueTooltip2.get("background").set("fill", root.interfaceColors.get("background"));
 valueTooltip2.label.set("text", "{name}: {valueY} {valueYChangePercent.formatNumber('[#00ff00]+#,###.##|[#ff0000]#,###.##|[#999999]0')}%");
 
 const firstColor = chart.get("colors").getIndex(0);
-const volumeSeries = chart.series.push(am5xy.ColumnSeries.new(root, { name: "XTD", fill: firstColor, stroke: firstColor, valueYField: "quantity", valueXField: "date", valueYGrouped: "sum", xAxis: dateAxis, yAxis: volumeAxis, legendValueText: "{valueY}" }));
-volumeSeries.columns.template.setAll({ strokeWidth: 0.2, strokeOpacity: 1, stroke: am5.color(0xffffff) });
+const volumeSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
+  name: "XTD",
+  fill: firstColor,
+  stroke: firstColor,
+  valueYField: "quantity",
+  valueXField: "date",
+  valueYGrouped: "sum",
+  xAxis: dateAxis,
+  yAxis: volumeAxis,
+  legendValueText: "{valueY}"
+}));
+volumeSeries.columns.template.setAll({
+  strokeWidth: 0.2,
+  strokeOpacity: 1,
+  stroke: am5.color(0xffffff)
+});
 
 const volumeTooltip = volumeSeries.set("tooltip", am5.Tooltip.new(root, {}));
 volumeTooltip.label.set("text", "{valueY}");
 
 
-const volumeLegend = volumeAxis.axisHeader.children.push(am5.Legend.new(root, { useDefaultMarker: true }));
+// Add legend to axis header
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-headers/
+// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
+const valueLegend = valueAxis.axisHeader.children.push(am5.Legend.new(root, {
+  useDefaultMarker: true
+}));
+valueLegend.data.setAll([valueSeries1, valueSeries2]);
+
+
+const volumeLegend = volumeAxis.axisHeader.children.push(am5.Legend.new(root, {
+  useDefaultMarker: true
+}));
 volumeLegend.data.setAll([volumeSeries]);
 
 
+// Stack axes vertically
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#Stacked_axes
 chart.leftAxesContainer.set("layout", root.verticalLayout);
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
 chart.set("cursor", am5xy.XYCursor.new(root, {}))
 
-/**
- * Add scrollbar
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 const scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
   orientation: "horizontal",
   height: 50
 }));
 
-const sbDateAxis = scrollbar.chart.xAxes.push(
-  am5xy.DateAxis.new(root, {
-    groupData: true,
-    groupIntervals: [{ timeUnit: "week", count: 1 }],
-    baseInterval: { timeUnit: "day", count: 1 },
-    renderer: am5xy.AxisRendererX.new(root, {})
-  })
-);
-
-const sbValueAxis = scrollbar.chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    renderer: am5xy.AxisRendererY.new(root, {})
-  })
-);
-
-const sbSeries = scrollbar.chart.series.push(
-  am5xy.LineSeries.new(root, {
-    valueYField: "price1",
-    valueXField: "date",
-    xAxis: sbDateAxis,
-    yAxis: sbValueAxis
-  })
-);
+const sbDateAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
+  groupData: true,
+  groupIntervals: [{
+    timeUnit: "week",
+    count: 1
+  }],
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: am5xy.AxisRendererX.new(root, {})
+}));
+
+const sbValueAxis = scrollbar.chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+const sbSeries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
+  valueYField: "price1",
+  valueXField: "date",
+  xAxis: sbDateAxis,
+  yAxis: sbValueAxis
+}));
 
 sbSeries.fills.template.setAll({
   visible: true,
@@ -117,6 +233,8 @@ sbSeries.fills.template.setAll({
 });
 
 
+// Generate random data and set on series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Setting_data
 const data = [];
 let price1 = 1000;
 let price2 = 2000;
@@ -139,11 +257,21 @@ for (var i = 1; i < 5000; i++) {
   if (quantity < 0) {
     quantity *= -1;
   }
-  data.push({ date: new Date(2010, 0, i).getTime(), price1: price1, price2: price2, quantity: quantity });
+  data.push({
+    date: new Date(2010, 0, i).getTime(),
+    price1: price1,
+    price2: price2,
+    quantity: quantity
+  });
 }
 
 valueSeries1.data.setAll(data);
 valueSeries2.data.setAll(data);
 
 volumeSeries.data.setAll(data);
-sbSeries.data.setAll(data);
+sbSeries.data.setAll(data);
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+chart.appear(1000, 100);

package/examples/javascript/xy-stock-comparing/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-stock-comparing",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.3",
+    "@amcharts/amcharts5": "^5.0.0-beta.30",
     "source-map-loader": "^3.0.0",
     "webpack": "^5.1.3",
     "webpack-cli": "^4.1.0",

package/examples/typescript/flow-chord/index.ts

@@ -2,37 +2,31 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5flow from "@amcharts/amcharts5/flow";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
-/**
- * Create root element
- * https://www.amcharts.com/docs/v5/getting-started/#Root_element
- */
+
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
 const root = am5.Root.new("chartdiv");
 
-/**
- * Set themes
- * https://www.amcharts.com/docs/v5/concepts/themes/
- */
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
 root.setThemes([
   am5themes_Animated.new(root)
 ]);
 
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/flow-charts/
- */
-const series = root.container.children.push(
-  am5flow.Chord.new(root, {
-    sourceIdField: "source",
-    targetIdField: "target",
-    valueField: "value"
-  })
-);
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/flow-charts/
+const series = root.container.children.push(am5flow.Chord.new(root, {
+  sourceIdField: "source",
+  targetIdField: "target",
+  valueField: "value"
+}));
 series.nodes.get("colors")!.set("step", 2);
 
-/**
- * Set data
- * https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
- */
+
+// Set data
+// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
 series.data.setAll([
   { source: "Berlin", target: "Amsterdam", value: 14 },
   { source: "Berlin", target: "London", value: 33 },
@@ -58,4 +52,8 @@ series.data.setAll([
   { source: "Madrid", target: "London", value: 25 },
   { source: "Madrid", target: "Paris", value: 19 },
   { source: "Madrid", target: "Berlin", value: 7 }
-]);
+]);
+
+
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/typescript/flow-chord/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-flow-chord",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.3",
+    "@amcharts/amcharts5": "^5.0.0-beta.30",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",