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

package/examples/javascript/xy-smoothed-line/index.js

@@ -2,36 +2,37 @@ 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: false,
-    panY: false,
-    wheelX: "panX",
-    wheelY: "zoomX"
-  })
-);
 
-const cursor = chart.set("cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" }));
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+const chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: false,
+  panY: false,
+  wheelX: "panX",
+  wheelY: "zoomX"
+}));
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
+  behavior: "zoomX"
+}));
 cursor.lineY.set("visible", false);
 
+
+// Generate random data
 let date = new Date();
 date.setHours(0, 0, 0, 0);
 let value = 100;
@@ -39,7 +40,10 @@ let value = 100;
 function generateData() {
   value = Math.round((Math.random() * 10 - 5) + value);
   am5.time.add(date, "day", 1);
-  return { date: date.getTime(), value: value };
+  return {
+    date: date.getTime(),
+    value: value
+  };
 }
 
 function generateDatas(count) {
@@ -50,14 +54,16 @@ function generateDatas(count) {
   return data;
 }
 
-/**
- * Create axes
- * https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
- */
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
 const xAxis = chart.xAxes.push(
   am5xy.DateAxis.new(root, {
     maxDeviation: 0,
-    baseInterval: { timeUnit: "day", count: 1 },
+    baseInterval: {
+      timeUnit: "day",
+      count: 1
+    },
     renderer: am5xy.AxisRendererX.new(root, {}),
     tooltip: am5.Tooltip.new(root, {
       themeTags: ["axis"],
@@ -73,25 +79,49 @@ const yAxis = chart.yAxes.push(
 );
 
 
-const series = chart.series.push(am5xy.SmoothedXLineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date" }));
-series.fills.template.setAll({ visible: true, fillOpacity: 0.2 })
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+const series = chart.series.push(am5xy.SmoothedXLineSeries.new(root, {
+  name: "Series",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value",
+  valueXField: "date"
+}));
+
+series.fills.template.setAll({
+  visible: true,
+  fillOpacity: 0.2
+});
+
 series.bullets.push(() => {
-  return am5.Bullet.new(root, { locationY: 0, sprite: am5.Circle.new(root, { radius: 4, stroke: root.interfaceColors.get("background"), strokeWidth: 2, fill: series.get("fill") }) })
-})
+  return am5.Bullet.new(root, {
+    locationY: 0,
+    sprite: am5.Circle.new(root, {
+      radius: 4,
+      stroke: root.interfaceColors.get("background"),
+      strokeWidth: 2,
+      fill: series.get("fill")
+    })
+  });
+});
 
 const tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
 tooltip.label.set("text", "{valueY}");
 
-/**
- * Add scrollbar
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 chart.set("scrollbarX", am5.Scrollbar.new(root, {
   orientation: "horizontal"
 }));
 
+
 let data = generateDatas(50);
 series.data.setAll(data);
 
-series.appear();
-chart.appear();
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+series.appear(1000);
+chart.appear(1000, 100);

package/examples/javascript/xy-smoothed-line/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-smoothed-line",
   "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-stacked-and-clustered-column/index.js

@@ -2,35 +2,36 @@ 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: false,
-    panY: false,
-    wheelX: "panX",
-    wheelY: "zoomX"
-  })
-);
 
-chart.set("layout", root.verticalLayout);
-const legend = chart.children.push(am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }))
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+const chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: false,
+  panY: false,
+  wheelX: "panX",
+  wheelY: "zoomX",
+  layout: root.verticalLayout
+}));
+
+
+// Add legend
+// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
+const legend = chart.children.push(am5.Legend.new(root, {
+  centerX: am5.p50,
+  x: am5.p50
+}))
 
 const data = [{
   "year": "2021",
@@ -56,12 +57,11 @@ const data = [{
   "lamerica": 0.3,
   "meast": 0.9,
   "africa": 0.5
-}]
+}];
+
 
-/**
- * Create axes
- * https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
- */
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
 const xAxis = chart.xAxes.push(
   am5xy.CategoryAxis.new(root, {
     categoryField: "year",
@@ -86,16 +86,41 @@ const yAxis = chart.yAxes.push(
 );
 
 
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
 function makeSeries(name, fieldName, stacked) {
-  const series = chart.series.push(am5xy.ColumnSeries.new(root, { stacked: stacked, name: name, xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, categoryXField: "year" }));
-
-  series.columns.template.setAll({ tooltipText: "{name}, {categoryX}:{valueY}", width: am5.percent(90), tooltipY: am5.percent(10) });
+  const series = chart.series.push(am5xy.ColumnSeries.new(root, {
+    stacked: stacked,
+    name: name,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    valueYField: fieldName,
+    categoryXField: "year"
+  }));
+
+  series.columns.template.setAll({
+    tooltipText: "{name}, {categoryX}:{valueY}",
+    width: am5.percent(90),
+    tooltipY: am5.percent(10)
+  });
   series.data.setAll(data);
+
+  // Make stuff animate on load
+  // https://www.amcharts.com/docs/v5/concepts/animations/
   series.appear();
 
   series.bullets.push(() => {
-    return am5.Bullet.new(root, { locationY: 0.5, sprite: am5.Label.new(root, { text: "{valueY}", fill: root.interfaceColors.get("alternativeText"), centerY: am5.percent(50), centerX: am5.percent(50), populateText: true }) });
-  })
+    return am5.Bullet.new(root, {
+      locationY: 0.5,
+      sprite: am5.Label.new(root, {
+        text: "{valueY}",
+        fill: root.interfaceColors.get("alternativeText"),
+        centerY: am5.percent(50),
+        centerX: am5.percent(50),
+        populateText: true
+      })
+    });
+  });
 
   legend.data.push(series);
 }
@@ -108,4 +133,6 @@ makeSeries("Middle East", "meast", true);
 makeSeries("Africa", "africa", true);
 
 
-chart.appear();
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+chart.appear(1000, 100);

package/examples/javascript/xy-stacked-and-clustered-column/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-stacked-and-clustered-column",
   "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-stacked-column/index.js

@@ -2,44 +2,35 @@ 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: false,
-    panY: false,
-    wheelX: "panX",
-    wheelY: "zoomX"
-  })
-);
 
-/**
- * Add scrollbar
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+const chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: false,
+  panY: false,
+  wheelX: "panX",
+  wheelY: "zoomX",
+  layout: root.verticalLayout
+}));
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 chart.set("scrollbarX", am5.Scrollbar.new(root, {
   orientation: "horizontal"
 }));
 
-chart.set("layout", root.verticalLayout);
-const legend = chart.children.push(am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }))
-
 const data = [{
   "year": "2021",
   "europe": 2.5,
@@ -66,44 +57,67 @@ const data = [{
   "africa": 0.5
 }]
 
-/**
- * Create axes
- * https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
- */
-const xAxis = chart.xAxes.push(
-  am5xy.CategoryAxis.new(root, {
-    categoryField: "year",
-    renderer: am5xy.AxisRendererX.new(root, {}),
-    tooltip: am5.Tooltip.new(root, {
-      themeTags: ["axis"],
-      animationDuration: 200
-    })
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  categoryField: "year",
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 200
   })
-);
+}));
 
 xAxis.data.setAll(data);
 
-const yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    min: 0,
-    max: 100,
-    strictMinMax: true,
-    calculateTotals:true,
-    renderer: am5xy.AxisRendererY.new(root, {})
-  })
-);
+const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  min: 0,
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
 
 
-function makeSeries(name, fieldName) {
-  const series = chart.series.push(am5xy.ColumnSeries.new(root, { name: name, stacked: true, xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, valueYShow: "valueYTotalPercent", categoryXField: "year" }));
+// Add legend
+// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
+const legend = chart.children.push(am5.Legend.new(root, {
+  centerX: am5.p50,
+  x: am5.p50
+}));
 
-  series.columns.template.setAll({ tooltipText: "{name}, {categoryX}:{valueYTotalPercent.formatNumber('#.#')}%", tooltipY: am5.percent(10) });
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+function makeSeries(name, fieldName) {
+  const series = chart.series.push(am5xy.ColumnSeries.new(root, {
+    name: name,
+    stacked: true,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    valueYField: fieldName,
+    categoryXField: "year"
+  }));
+
+  series.columns.template.setAll({
+    tooltipText: "{name}, {categoryX}: {valueY}",
+    tooltipY: am5.percent(10)
+  });
   series.data.setAll(data);
+
+  // Make stuff animate on load
+  // https://www.amcharts.com/docs/v5/concepts/animations/
   series.appear();
 
   series.bullets.push(() => {
-    return am5.Bullet.new(root, { sprite: am5.Label.new(root, { text: "{valueYTotalPercent.formatNumber('#.#')}%", fill: root.interfaceColors.get("alternativeText"), centerY: am5.p50, centerX: am5.p50, populateText: true }) });
-  })
+    return am5.Bullet.new(root, {
+      sprite: am5.Label.new(root, {
+        text: "{valueY}",
+        fill: root.interfaceColors.get("alternativeText"),
+        centerY: am5.p50,
+        centerX: am5.p50,
+        populateText: true
+      })
+    });
+  });
 
   legend.data.push(series);
 }
@@ -116,4 +130,6 @@ makeSeries("Middle East", "meast");
 makeSeries("Africa", "africa");
 
 
-chart.appear();
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+chart.appear(1000, 100);

package/examples/javascript/xy-stacked-column/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-stacked-column",
   "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-stacked-step/index.js

@@ -2,36 +2,36 @@ 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: true,
-    wheelX: "panX",
-    wheelY: "zoomX"
-  })
-);
 
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+const chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: true,
+  panY: true,
+  wheelX: "panX",
+  wheelY: "zoomX"
+}));
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
 const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
 cursor.lineY.set("visible", false);
 
+
+// Generate random data
 let date = new Date();
 date.setHours(0, 0, 0, 0);
 let value1 = 100;
@@ -61,33 +61,48 @@ function generateDatas(count) {
   return data;
 }
 
-/**
- * Create axes
- * https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
- */
-const xAxis = chart.xAxes.push(
-  am5xy.DateAxis.new(root, {
-    baseInterval: { timeUnit: "day", count: 1 },
-    renderer: am5xy.AxisRendererX.new(root, {}),
-    tooltip: am5.Tooltip.new(root, {
-      themeTags: ["axis"],
-      animationDuration: 200
-    })
-  })
-);
 
-const yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    renderer: am5xy.AxisRendererY.new(root, {})
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+  baseInterval: { timeUnit: "day", count: 1 },
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 200
   })
-);
-
+}));
 
-const series1 = chart.series.push(am5xy.StepLineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value1", valueXField: "date" }));
-series1.fills.template.setAll({ fillOpacity: 0.5, visible: true });
+const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
 
-const series2 = chart.series.push(am5xy.StepLineSeries.new(root, { name: "Series", stacked: true, xAxis: xAxis, yAxis: yAxis, valueYField: "value2", valueXField: "date" }));
-series2.fills.template.setAll({ fillOpacity: 0.5, visible: true });
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+const series1 = chart.series.push(am5xy.StepLineSeries.new(root, {
+  name: "Series",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value1",
+  valueXField: "date"
+}));
+series1.fills.template.setAll({
+  fillOpacity: 0.5,
+  visible: true
+});
+
+const series2 = chart.series.push(am5xy.StepLineSeries.new(root, {
+  name: "Series",
+  stacked: true,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value2",
+  valueXField: "date"
+}));
+series2.fills.template.setAll({
+  fillOpacity: 0.5,
+  visible: true
+});
 
 const tooltip1 = series1.set("tooltip", am5.Tooltip.new(root, {}));
 tooltip1.label.set("text", "{valueY}");
@@ -95,10 +110,8 @@ tooltip1.label.set("text", "{valueY}");
 const tooltip2 = series2.set("tooltip", am5.Tooltip.new(root, {}));
 tooltip2.label.set("text", "{valueY}");
 
-/**
- * Add scrollbar
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 chart.set("scrollbarX", am5.Scrollbar.new(root, {
   orientation: "horizontal"
 }));
@@ -106,6 +119,9 @@ chart.set("scrollbarX", am5.Scrollbar.new(root, {
 let data = generateDatas(200);
 series1.data.setAll(data);
 series2.data.setAll(data);
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
 series1.appear(1000);
 series2.appear(1000);
-chart.appear(1000);
+chart.appear(1000, 100);

package/examples/javascript/xy-stacked-step/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-stacked-step",
   "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",