@amcharts/amcharts5 5.2.2 → 5.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (195) hide show
  1. package/.internal/charts/hierarchy/ForceDirected.d.ts +2 -2
  2. package/.internal/charts/hierarchy/ForceDirected.d.ts.map +1 -1
  3. package/.internal/charts/hierarchy/ForceDirected.js +6 -0
  4. package/.internal/charts/hierarchy/ForceDirected.js.map +1 -1
  5. package/.internal/charts/hierarchy/Tree.d.ts +7 -0
  6. package/.internal/charts/hierarchy/Tree.d.ts.map +1 -1
  7. package/.internal/charts/hierarchy/Tree.js +14 -3
  8. package/.internal/charts/hierarchy/Tree.js.map +1 -1
  9. package/.internal/charts/map/MapChart.d.ts +2 -1
  10. package/.internal/charts/map/MapChart.d.ts.map +1 -1
  11. package/.internal/charts/map/MapChart.js +2 -1
  12. package/.internal/charts/map/MapChart.js.map +1 -1
  13. package/.internal/charts/stock/StockChart.js +1 -1
  14. package/.internal/charts/stock/StockChart.js.map +1 -1
  15. package/.internal/charts/stock/drawing/LabelSeries.js +1 -1
  16. package/.internal/charts/stock/drawing/LabelSeries.js.map +1 -1
  17. package/.internal/charts/stock/toolbar/DateRangeSelector.d.ts +14 -0
  18. package/.internal/charts/stock/toolbar/DateRangeSelector.d.ts.map +1 -1
  19. package/.internal/charts/stock/toolbar/DateRangeSelector.js +6 -2
  20. package/.internal/charts/stock/toolbar/DateRangeSelector.js.map +1 -1
  21. package/.internal/charts/stock/toolbar/IconControl.d.ts +3 -1
  22. package/.internal/charts/stock/toolbar/IconControl.d.ts.map +1 -1
  23. package/.internal/charts/stock/toolbar/IconControl.js +3 -1
  24. package/.internal/charts/stock/toolbar/IconControl.js.map +1 -1
  25. package/.internal/charts/stock/toolbar/PeriodSelector.d.ts.map +1 -1
  26. package/.internal/charts/stock/toolbar/PeriodSelector.js +8 -0
  27. package/.internal/charts/stock/toolbar/PeriodSelector.js.map +1 -1
  28. package/.internal/charts/stock/toolbar/StockToolbarCSS.js +23 -24
  29. package/.internal/charts/stock/toolbar/StockToolbarCSS.js.map +1 -1
  30. package/.internal/charts/xy/XYChart.d.ts +12 -0
  31. package/.internal/charts/xy/XYChart.d.ts.map +1 -1
  32. package/.internal/charts/xy/XYChart.js +137 -118
  33. package/.internal/charts/xy/XYChart.js.map +1 -1
  34. package/.internal/charts/xy/axes/DateAxis.d.ts.map +1 -1
  35. package/.internal/charts/xy/axes/DateAxis.js +35 -16
  36. package/.internal/charts/xy/axes/DateAxis.js.map +1 -1
  37. package/.internal/charts/xy/axes/GaplessDateAxis.d.ts.map +1 -1
  38. package/.internal/charts/xy/axes/GaplessDateAxis.js +15 -1
  39. package/.internal/charts/xy/axes/GaplessDateAxis.js.map +1 -1
  40. package/.internal/charts/xy/series/XYSeries.d.ts.map +1 -1
  41. package/.internal/charts/xy/series/XYSeries.js +4 -8
  42. package/.internal/charts/xy/series/XYSeries.js.map +1 -1
  43. package/.internal/core/util/EventDispatcher.d.ts +6 -0
  44. package/.internal/core/util/EventDispatcher.d.ts.map +1 -1
  45. package/.internal/core/util/EventDispatcher.js +20 -0
  46. package/.internal/core/util/EventDispatcher.js.map +1 -1
  47. package/.internal/core/util/Modal.d.ts.map +1 -1
  48. package/.internal/core/util/Modal.js +5 -2
  49. package/.internal/core/util/Modal.js.map +1 -1
  50. package/.internal/core/util/TextFormatter.d.ts.map +1 -1
  51. package/.internal/core/util/TextFormatter.js +1 -9
  52. package/.internal/core/util/TextFormatter.js.map +1 -1
  53. package/.internal/core/util/Time.js +8 -9
  54. package/.internal/core/util/Time.js.map +1 -1
  55. package/.internal/core/util/Timezone.d.ts +1 -0
  56. package/.internal/core/util/Timezone.d.ts.map +1 -1
  57. package/.internal/core/util/Timezone.js +28 -1
  58. package/.internal/core/util/Timezone.js.map +1 -1
  59. package/.internal/themes/DefaultTheme.d.ts.map +1 -1
  60. package/.internal/themes/DefaultTheme.js +1 -0
  61. package/.internal/themes/DefaultTheme.js.map +1 -1
  62. package/CHANGELOG.md +34 -0
  63. package/examples/javascript/flow-chord/package.json +1 -1
  64. package/examples/javascript/flow-chord-directed/package.json +1 -1
  65. package/examples/javascript/flow-chord-non-ribbon/package.json +1 -1
  66. package/examples/javascript/flow-sankey/package.json +1 -1
  67. package/examples/javascript/gauge/package.json +1 -1
  68. package/examples/javascript/gauge-bands/package.json +1 -1
  69. package/examples/javascript/hierarchy-force-directed/package.json +1 -1
  70. package/examples/javascript/hierarchy-pack/package.json +1 -1
  71. package/examples/javascript/hierarchy-partition/package.json +1 -1
  72. package/examples/javascript/hierarchy-sunburst/package.json +1 -1
  73. package/examples/javascript/hierarchy-tree/package.json +1 -1
  74. package/examples/javascript/hierarchy-treemap/package.json +1 -1
  75. package/examples/javascript/json/package.json +1 -1
  76. package/examples/javascript/map-animating-along-lines/package.json +1 -1
  77. package/examples/javascript/map-day-and-night/package.json +1 -1
  78. package/examples/javascript/map-globe-rotate-to-country/package.json +1 -1
  79. package/examples/javascript/map-globe-with-projected-circles/package.json +1 -1
  80. package/examples/javascript/map-with-bubbles/package.json +1 -1
  81. package/examples/javascript/map-zoom-to-country/package.json +1 -1
  82. package/examples/javascript/misc-40-charts/package.json +1 -1
  83. package/examples/javascript/misc-microchart-grid/package.json +1 -1
  84. package/examples/javascript/pie-chart/package.json +1 -1
  85. package/examples/javascript/pie-donut-chart/package.json +1 -1
  86. package/examples/javascript/pie-variable-radius/package.json +1 -1
  87. package/examples/javascript/radar-column-iwatch-style/package.json +1 -1
  88. package/examples/javascript/radar-heat-map/package.json +1 -1
  89. package/examples/javascript/radar-line/package.json +1 -1
  90. package/examples/javascript/radar-time-line/package.json +1 -1
  91. package/examples/javascript/sliced-funnel/package.json +1 -1
  92. package/examples/javascript/sliced-pictorial-stacked/package.json +1 -1
  93. package/examples/javascript/sliced-pyramid/package.json +1 -1
  94. package/examples/javascript/stock-chart/package.json +1 -1
  95. package/examples/javascript/stock-chart-comparing-stocks/package.json +1 -1
  96. package/examples/javascript/stock-chart-data-granularity/package.json +1 -1
  97. package/examples/javascript/stock-chart-data-grouping/package.json +1 -1
  98. package/examples/javascript/stock-chart-intraday/package.json +1 -1
  99. package/examples/javascript/stock-chart-live/index.js +155 -103
  100. package/examples/javascript/stock-chart-live/package.json +1 -1
  101. package/examples/javascript/stock-chart-volume-separate-panel/package.json +1 -1
  102. package/examples/javascript/venn-diagram/package.json +1 -1
  103. package/examples/javascript/wordcloud-with-data/package.json +1 -1
  104. package/examples/javascript/wordcloud-with-text/package.json +1 -1
  105. package/examples/javascript/xy-100-percent-stacked-column/package.json +1 -1
  106. package/examples/javascript/xy-animated-bullet-at-the-end-of-the-series/package.json +1 -1
  107. package/examples/javascript/xy-bubble/package.json +1 -1
  108. package/examples/javascript/xy-candlestick/package.json +1 -1
  109. package/examples/javascript/xy-clustered-column/package.json +1 -1
  110. package/examples/javascript/xy-column/package.json +1 -1
  111. package/examples/javascript/xy-comparing-series-google-analytics-style/package.json +1 -1
  112. package/examples/javascript/xy-data-grouping/package.json +1 -1
  113. package/examples/javascript/xy-draggable-range/package.json +1 -1
  114. package/examples/javascript/xy-drawing-series-with-mouse-or-touch/package.json +1 -1
  115. package/examples/javascript/xy-dumbbell plot/package.json +1 -1
  116. package/examples/javascript/xy-evenly-spaced-date-axis/package.json +1 -1
  117. package/examples/javascript/xy-line/package.json +1 -1
  118. package/examples/javascript/xy-line-highlight-on-legend-hover/package.json +1 -1
  119. package/examples/javascript/xy-live-data/package.json +1 -1
  120. package/examples/javascript/xy-multiple-synced-value-axes/package.json +1 -1
  121. package/examples/javascript/xy-ohlc/package.json +1 -1
  122. package/examples/javascript/xy-real-time-data-sorting/package.json +1 -1
  123. package/examples/javascript/xy-smoothed-line/package.json +1 -1
  124. package/examples/javascript/xy-stacked-and-clustered-column/package.json +1 -1
  125. package/examples/javascript/xy-stacked-column/package.json +1 -1
  126. package/examples/javascript/xy-stacked-step/package.json +1 -1
  127. package/examples/javascript/xy-stock/package.json +1 -1
  128. package/examples/javascript/xy-stock-comparing/package.json +1 -1
  129. package/examples/typescript/flow-chord/package.json +1 -1
  130. package/examples/typescript/flow-chord-directed/package.json +1 -1
  131. package/examples/typescript/flow-chord-non-ribbon/package.json +1 -1
  132. package/examples/typescript/flow-sankey/package.json +1 -1
  133. package/examples/typescript/gauge/package.json +1 -1
  134. package/examples/typescript/gauge-bands/package.json +1 -1
  135. package/examples/typescript/hierarchy-force-directed/package.json +1 -1
  136. package/examples/typescript/hierarchy-pack/package.json +1 -1
  137. package/examples/typescript/hierarchy-partition/package.json +1 -1
  138. package/examples/typescript/hierarchy-sunburst/package.json +1 -1
  139. package/examples/typescript/hierarchy-tree/package.json +1 -1
  140. package/examples/typescript/hierarchy-treemap/package.json +1 -1
  141. package/examples/typescript/json/package.json +1 -1
  142. package/examples/typescript/map-animating-along-lines/package.json +1 -1
  143. package/examples/typescript/map-day-and-night/package.json +1 -1
  144. package/examples/typescript/map-globe-rotate-to-country/package.json +1 -1
  145. package/examples/typescript/map-globe-with-projected-circles/package.json +1 -1
  146. package/examples/typescript/map-with-bubbles/package.json +1 -1
  147. package/examples/typescript/map-zoom-to-country/package.json +1 -1
  148. package/examples/typescript/misc-40-charts/package.json +1 -1
  149. package/examples/typescript/misc-microchart-grid/package.json +1 -1
  150. package/examples/typescript/pie-chart/package.json +1 -1
  151. package/examples/typescript/pie-donut-chart/package.json +1 -1
  152. package/examples/typescript/pie-variable-radius/package.json +1 -1
  153. package/examples/typescript/radar-column-iwatch-style/package.json +1 -1
  154. package/examples/typescript/radar-heat-map/package.json +1 -1
  155. package/examples/typescript/radar-line/package.json +1 -1
  156. package/examples/typescript/radar-time-line/package.json +1 -1
  157. package/examples/typescript/sliced-funnel/package.json +1 -1
  158. package/examples/typescript/sliced-pictorial-stacked/package.json +1 -1
  159. package/examples/typescript/sliced-pyramid/package.json +1 -1
  160. package/examples/typescript/stock-chart/package.json +1 -1
  161. package/examples/typescript/stock-chart-comparing-stocks/package.json +1 -1
  162. package/examples/typescript/stock-chart-data-granularity/package.json +1 -1
  163. package/examples/typescript/stock-chart-data-grouping/package.json +1 -1
  164. package/examples/typescript/stock-chart-intraday/package.json +1 -1
  165. package/examples/typescript/stock-chart-live/index.ts +160 -108
  166. package/examples/typescript/stock-chart-live/package.json +1 -1
  167. package/examples/typescript/stock-chart-volume-separate-panel/package.json +1 -1
  168. package/examples/typescript/venn-diagram/package.json +1 -1
  169. package/examples/typescript/wordcloud-with-data/package.json +1 -1
  170. package/examples/typescript/wordcloud-with-text/package.json +1 -1
  171. package/examples/typescript/xy-100-percent-stacked-column/package.json +1 -1
  172. package/examples/typescript/xy-animated-bullet-at-the-end-of-the-series/package.json +1 -1
  173. package/examples/typescript/xy-bubble/package.json +1 -1
  174. package/examples/typescript/xy-candlestick/package.json +1 -1
  175. package/examples/typescript/xy-clustered-column/package.json +1 -1
  176. package/examples/typescript/xy-column/package.json +1 -1
  177. package/examples/typescript/xy-comparing-series-google-analytics-style/package.json +1 -1
  178. package/examples/typescript/xy-data-grouping/package.json +1 -1
  179. package/examples/typescript/xy-draggable-range/package.json +1 -1
  180. package/examples/typescript/xy-drawing-series-with-mouse-or-touch/package.json +1 -1
  181. package/examples/typescript/xy-dumbbell plot/package.json +1 -1
  182. package/examples/typescript/xy-evenly-spaced-date-axis/package.json +1 -1
  183. package/examples/typescript/xy-line/package.json +1 -1
  184. package/examples/typescript/xy-line-highlight-on-legend-hover/package.json +1 -1
  185. package/examples/typescript/xy-live-data/package.json +1 -1
  186. package/examples/typescript/xy-multiple-synced-value-axes/package.json +1 -1
  187. package/examples/typescript/xy-ohlc/package.json +1 -1
  188. package/examples/typescript/xy-real-time-data-sorting/package.json +1 -1
  189. package/examples/typescript/xy-smoothed-line/package.json +1 -1
  190. package/examples/typescript/xy-stacked-and-clustered-column/package.json +1 -1
  191. package/examples/typescript/xy-stacked-column/package.json +1 -1
  192. package/examples/typescript/xy-stacked-step/package.json +1 -1
  193. package/examples/typescript/xy-stock/package.json +1 -1
  194. package/examples/typescript/xy-stock-comparing/package.json +1 -1
  195. package/package.json +3 -3
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-pie-chart",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-pie-donut-chart",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-pie-variable-radius",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-radar-column-iwatch-style",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-radar-heat-map",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-radar-line",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-radar-time-line",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-sliced-funnel",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-sliced-pictorial-stacked",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-sliced-pyramid",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-comparing-stocks",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-data-granularity",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-data-grouping",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-intraday",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,148 +3,170 @@ import * as am5xy from "@amcharts/amcharts5/xy";
3
3
  import * as am5stock from "@amcharts/amcharts5/stock";
4
4
  import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
5
5
 
6
-
7
-
8
-
9
-
10
-
11
6
  // Create root element
12
7
  // -------------------------------------------------------------------------------
13
8
  // https://www.amcharts.com/docs/v5/getting-started/#Root_element
14
9
  let root = am5.Root.new("chartdiv");
15
10
 
16
-
17
11
  // Set themes
18
12
  // -------------------------------------------------------------------------------
19
13
  // https://www.amcharts.com/docs/v5/concepts/themes/
20
- root.setThemes([
21
- am5themes_Animated.new(root)
22
- ]);
23
-
14
+ root.setThemes([am5themes_Animated.new(root)]);
24
15
 
25
16
  // Create a stock chart
26
17
  // -------------------------------------------------------------------------------
27
18
  // https://www.amcharts.com/docs/v5/charts/stock-chart/#Instantiating_the_chart
28
- let stockChart = root.container.children.push(am5stock.StockChart.new(root, {
29
- }));
30
-
19
+ let stockChart = root.container.children.push(
20
+ am5stock.StockChart.new(root, {})
21
+ );
31
22
 
32
23
  // Set global number format
33
24
  // -------------------------------------------------------------------------------
34
25
  // https://www.amcharts.com/docs/v5/concepts/formatters/formatting-numbers/
35
26
  root.numberFormatter.set("numberFormat", "#,###.00");
36
27
 
37
-
38
28
  // Create a main stock panel (chart)
39
29
  // -------------------------------------------------------------------------------
40
30
  // https://www.amcharts.com/docs/v5/charts/stock-chart/#Adding_panels
41
- let mainPanel = stockChart.panels.push(am5stock.StockPanel.new(root, {
42
- wheelY: "zoomX",
43
- panX: true,
44
- panY: true
45
- }));
46
-
31
+ let mainPanel = stockChart.panels.push(
32
+ am5stock.StockPanel.new(root, {
33
+ wheelY: "zoomX",
34
+ panX: true,
35
+ panY: true
36
+ })
37
+ );
47
38
 
48
39
  // Create value axis
49
40
  // -------------------------------------------------------------------------------
50
41
  // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
51
- let valueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
52
- renderer: am5xy.AxisRendererY.new(root, {
53
- pan: "zoom"
54
- }),
55
- extraMin: 0.1, // adds some space for for main series
56
- tooltip: am5.Tooltip.new(root, {}),
57
- numberFormat: "#,###.00",
58
- extraTooltipPrecision: 2
59
- }));
60
-
61
- let dateAxis = mainPanel.xAxes.push(am5xy.GaplessDateAxis.new(root, {
62
- baseInterval: {
63
- timeUnit: "minute",
64
- count: 1
65
- },
66
- renderer: am5xy.AxisRendererX.new(root, {}),
67
- tooltip: am5.Tooltip.new(root, {})
68
- }));
42
+ let valueAxis = mainPanel.yAxes.push(
43
+ am5xy.ValueAxis.new(root, {
44
+ renderer: am5xy.AxisRendererY.new(root, {
45
+ pan: "zoom"
46
+ }),
47
+ extraMin: 0.1, // adds some space for for main series
48
+ tooltip: am5.Tooltip.new(root, {}),
49
+ numberFormat: "#,###.00",
50
+ extraTooltipPrecision: 2
51
+ })
52
+ );
53
+
54
+ let dateAxis = mainPanel.xAxes.push(
55
+ am5xy.GaplessDateAxis.new(root, {
56
+ baseInterval: {
57
+ timeUnit: "minute",
58
+ count: 1
59
+ },
60
+ renderer: am5xy.AxisRendererX.new(root, {}),
61
+ tooltip: am5.Tooltip.new(root, {})
62
+ })
63
+ );
64
+
65
+ // add range which will show current value
66
+ let currentValueDataItem = valueAxis.createAxisRange(valueAxis.makeDataItem({ value: 0 }));
67
+ let currentLabel = currentValueDataItem.get("label");
68
+ if (currentLabel) {
69
+ currentLabel.setAll({
70
+ fill: am5.color(0xffffff),
71
+ background: am5.Rectangle.new(root, { fill: am5.color(0x000000) })
72
+ })
73
+ }
74
+
75
+ let currentGrid = currentValueDataItem.get("grid");
76
+ if (currentGrid) {
77
+ currentGrid.setAll({ strokeOpacity: 0.5, strokeDasharray: [2, 5] });
78
+ }
69
79
 
70
80
 
71
81
  // Add series
72
82
  // -------------------------------------------------------------------------------
73
83
  // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
74
- let valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
75
- name: "AMCH",
76
- clustered: false,
77
- valueXField: "Date",
78
- valueYField: "Close",
79
- highValueYField: "High",
80
- lowValueYField: "Low",
81
- openValueYField: "Open",
82
- calculateAggregates: true,
83
- xAxis: dateAxis,
84
- yAxis: valueAxis,
85
- legendValueText: "open: [bold]{openValueY}[/] high: [bold]{highValueY}[/] low: [bold]{lowValueY}[/] close: [bold]{valueY}[/]",
86
- legendRangeValueText: ""
87
- }));
88
-
84
+ let valueSeries = mainPanel.series.push(
85
+ am5xy.CandlestickSeries.new(root, {
86
+ name: "AMCH",
87
+ clustered: false,
88
+ valueXField: "Date",
89
+ valueYField: "Close",
90
+ highValueYField: "High",
91
+ lowValueYField: "Low",
92
+ openValueYField: "Open",
93
+ calculateAggregates: true,
94
+ xAxis: dateAxis,
95
+ yAxis: valueAxis,
96
+ legendValueText:
97
+ "open: [bold]{openValueY}[/] high: [bold]{highValueY}[/] low: [bold]{lowValueY}[/] close: [bold]{valueY}[/]",
98
+ legendRangeValueText: ""
99
+ })
100
+ );
89
101
 
90
102
  // Set main value series
91
103
  // -------------------------------------------------------------------------------
92
104
  // https://www.amcharts.com/docs/v5/charts/stock-chart/#Setting_main_series
93
105
  stockChart.set("stockSeries", valueSeries);
94
106
 
95
-
96
107
  // Add a stock legend
97
108
  // -------------------------------------------------------------------------------
98
109
  // https://www.amcharts.com/docs/v5/charts/stock-chart/stock-legend/
99
- let valueLegend = mainPanel.plotContainer.children.push(am5stock.StockLegend.new(root, {
100
- stockChart: stockChart
101
- }));
102
-
110
+ let valueLegend = mainPanel.plotContainer.children.push(
111
+ am5stock.StockLegend.new(root, {
112
+ stockChart: stockChart
113
+ })
114
+ );
103
115
 
104
116
  // Set main series
105
117
  // -------------------------------------------------------------------------------
106
118
  // https://www.amcharts.com/docs/v5/charts/stock-chart/#Setting_main_series
107
119
  valueLegend.data.setAll([valueSeries]);
108
120
 
109
-
110
121
  // Add cursor(s)
111
122
  // -------------------------------------------------------------------------------
112
123
  // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
113
- mainPanel.set("cursor", am5xy.XYCursor.new(root, {
114
- yAxis: valueAxis,
115
- xAxis: dateAxis,
116
- snapToSeries: [valueSeries],
117
- snapToSeriesBy: "y!"
118
- }));
119
-
124
+ mainPanel.set(
125
+ "cursor",
126
+ am5xy.XYCursor.new(root, {
127
+ yAxis: valueAxis,
128
+ xAxis: dateAxis,
129
+ snapToSeries: [valueSeries],
130
+ snapToSeriesBy: "y!"
131
+ })
132
+ );
120
133
 
121
134
  // Add scrollbar
122
135
  // -------------------------------------------------------------------------------
123
136
  // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
124
- let scrollbar = mainPanel.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
125
- orientation: "horizontal",
126
- height: 50
127
- }));
137
+ let scrollbar = mainPanel.set(
138
+ "scrollbarX",
139
+ am5xy.XYChartScrollbar.new(root, {
140
+ orientation: "horizontal",
141
+ height: 50
142
+ })
143
+ );
128
144
  stockChart.toolsContainer.children.push(scrollbar);
129
145
 
130
- let sbDateAxis = scrollbar.chart.xAxes.push(am5xy.GaplessDateAxis.new(root, {
131
- baseInterval: {
132
- timeUnit: "minute",
133
- count: 1
134
- },
135
- renderer: am5xy.AxisRendererX.new(root, {})
136
- }));
137
-
138
- let sbValueAxis = scrollbar.chart.yAxes.push(am5xy.ValueAxis.new(root, {
139
- renderer: am5xy.AxisRendererY.new(root, {})
140
- }));
141
-
142
- let sbSeries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
143
- valueYField: "Close",
144
- valueXField: "Date",
145
- xAxis: sbDateAxis,
146
- yAxis: sbValueAxis
147
- }));
146
+ let sbDateAxis = scrollbar.chart.xAxes.push(
147
+ am5xy.GaplessDateAxis.new(root, {
148
+ baseInterval: {
149
+ timeUnit: "minute",
150
+ count: 1
151
+ },
152
+ renderer: am5xy.AxisRendererX.new(root, {})
153
+ })
154
+ );
155
+
156
+ let sbValueAxis = scrollbar.chart.yAxes.push(
157
+ am5xy.ValueAxis.new(root, {
158
+ renderer: am5xy.AxisRendererY.new(root, {})
159
+ })
160
+ );
161
+
162
+ let sbSeries = scrollbar.chart.series.push(
163
+ am5xy.LineSeries.new(root, {
164
+ valueYField: "Close",
165
+ valueXField: "Date",
166
+ xAxis: sbDateAxis,
167
+ yAxis: sbValueAxis
168
+ })
169
+ );
148
170
 
149
171
  sbSeries.fills.template.setAll({
150
172
  visible: true,
@@ -164,9 +186,25 @@ seriesSwitcher.events.on("selected", function(ev) {
164
186
 
165
187
  function getNewSettings(series) {
166
188
  let newSettings = [];
167
- am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "stroke", "fill"], function(setting) {
168
- newSettings[setting] = series.get(setting);
169
- });
189
+ am5.array.each(
190
+ [
191
+ "name",
192
+ "valueYField",
193
+ "highValueYField",
194
+ "lowValueYField",
195
+ "openValueYField",
196
+ "calculateAggregates",
197
+ "valueXField",
198
+ "xAxis",
199
+ "yAxis",
200
+ "legendValueText",
201
+ "stroke",
202
+ "fill"
203
+ ],
204
+ function(setting) {
205
+ newSettings[setting] = series.get(setting);
206
+ }
207
+ );
170
208
  return newSettings;
171
209
  }
172
210
 
@@ -188,7 +226,9 @@ function setSeriesType(seriesType) {
188
226
  case "candlestick":
189
227
  case "procandlestick":
190
228
  newSettings.clustered = false;
191
- series = mainPanel.series.push(am5xy.CandlestickSeries.new(root, newSettings));
229
+ series = mainPanel.series.push(
230
+ am5xy.CandlestickSeries.new(root, newSettings)
231
+ );
192
232
  if (seriesType == "procandlestick") {
193
233
  series.columns.template.get("themeTags").push("pro");
194
234
  }
@@ -260,19 +300,18 @@ setInterval(function() {
260
300
  let previousDate = lastDataObject.Date;
261
301
  let previousValue = lastDataObject.Close;
262
302
 
263
- value = previousValue + (Math.random() < 0.50 ? 1 : -1) * Math.random() * 2;
303
+ value = am5.math.round(previousValue + (Math.random() < 0.5 ? 1 : -1) * Math.random() * 2, 2);
264
304
 
265
305
  let high = lastDataObject.High;
266
306
  let low = lastDataObject.Low;
267
307
  let open = lastDataObject.Open;
268
308
 
269
309
  if (am5.time.checkChange(date, previousDate, "minute")) {
270
-
271
310
  open = value;
272
311
  high = value;
273
312
  low = value;
274
313
 
275
- let dataObject = {
314
+ let dObj1 = {
276
315
  Date: date,
277
316
  Close: value,
278
317
  Open: value,
@@ -280,11 +319,10 @@ setInterval(function() {
280
319
  High: value
281
320
  };
282
321
 
283
- valueSeries.data.push(dataObject);
284
- sbSeries.data.push(dataObject);
322
+ valueSeries.data.push(dObj1);
323
+ sbSeries.data.push(dObj1);
285
324
  previousDate = date;
286
- }
287
- else {
325
+ } else {
288
326
  if (value > high) {
289
327
  high = value;
290
328
  }
@@ -293,7 +331,7 @@ setInterval(function() {
293
331
  low = value;
294
332
  }
295
333
 
296
- let dataObject = {
334
+ let dObj2 = {
297
335
  Date: date,
298
336
  Close: value,
299
337
  Open: open,
@@ -301,8 +339,22 @@ setInterval(function() {
301
339
  High: high
302
340
  };
303
341
 
304
- valueSeries.data.setIndex(valueSeries.data.length - 1, dataObject);
305
- sbSeries.data.setIndex(sbSeries.data.length - 1, dataObject);
342
+ valueSeries.data.setIndex(valueSeries.data.length - 1, dObj2);
343
+ sbSeries.data.setIndex(sbSeries.data.length - 1, dObj2);
344
+ }
345
+ // update current value
346
+ if (currentLabel) {
347
+ currentValueDataItem.animate({ key: "value", to: value, duration: 500, easing: am5.ease.out(am5.ease.cubic) });
348
+ currentLabel.set("text", stockChart.getNumberFormatter().format(value));
349
+ let bg = currentLabel.get("background");
350
+ if (bg) {
351
+ if(value < open){
352
+ bg.set("fill", root.interfaceColors.get("negative"));
353
+ }
354
+ else{
355
+ bg.set("fill", root.interfaceColors.get("positive"));
356
+ }
357
+ }
306
358
  }
307
359
  }
308
- }, 1000)
360
+ }, 1000);
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-live",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-volume-separate-panel",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-venn-diagram",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-wordcloud-with-data",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-wordcloud-with-text",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-xy-100-percent-stacked-column",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-xy-animated-bullet-at-the-end-of-the-series",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-xy-bubble",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-xy-candlestick",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-xy-clustered-column",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-xy-column",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-xy-comparing-series-google-analytics-style",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-xy-data-grouping",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.2.2",
6
+ "@amcharts/amcharts5": "^5.2.5",
7
7
  "source-map-loader": "^3.0.0",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^4.1.0",