@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

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 (388) hide show
  1. package/README.md +75 -39
  2. package/dist/doc-metadata.json +1872 -0
  3. package/dist/docs/components/accentBar.md +582 -0
  4. package/dist/docs/components/activity.md +330 -0
  5. package/dist/docs/components/animatedNumber.md +88 -0
  6. package/dist/docs/components/animatedTextReveal.md +381 -0
  7. package/dist/docs/components/animations.md +459 -0
  8. package/dist/docs/components/appHeader.md +737 -0
  9. package/dist/docs/components/appLayout.md +2033 -0
  10. package/dist/docs/components/appNavigationBar.md +274 -0
  11. package/dist/docs/components/areaCharts.md +828 -0
  12. package/dist/docs/components/aspectRatioPlaceholder.md +106 -0
  13. package/dist/docs/components/assetTree.md +3132 -0
  14. package/dist/docs/components/autosuggests.md +1177 -0
  15. package/dist/docs/components/avatar.md +206 -0
  16. package/dist/docs/components/banner.md +668 -0
  17. package/dist/docs/components/barCharts.md +2765 -0
  18. package/dist/docs/components/barList.md +517 -0
  19. package/dist/docs/components/basicMap.md +167 -0
  20. package/dist/docs/components/bottomSheet.md +721 -0
  21. package/dist/docs/components/button.md +775 -0
  22. package/dist/docs/components/buttonToolbar.md +134 -0
  23. package/dist/docs/components/calendarStripe.md +533 -0
  24. package/dist/docs/components/card.md +86 -0
  25. package/dist/docs/components/carousel.md +128 -0
  26. package/dist/docs/components/chartColors.md +716 -0
  27. package/dist/docs/components/chartsGettingStarted.md +28 -0
  28. package/dist/docs/components/chat.md +935 -0
  29. package/dist/docs/components/checkbox.md +996 -0
  30. package/dist/docs/components/clearableInput.md +806 -0
  31. package/dist/docs/components/collapse.md +189 -0
  32. package/dist/docs/components/composedCharts.md +424 -0
  33. package/dist/docs/components/contentLoader.md +674 -0
  34. package/dist/docs/components/dataTabs.md +1251 -0
  35. package/dist/docs/components/datepickers.md +2543 -0
  36. package/dist/docs/components/dialogs.md +2244 -0
  37. package/dist/docs/components/divider.md +219 -0
  38. package/dist/docs/components/dropdowns.md +17538 -0
  39. package/dist/docs/components/editableContent.md +1127 -0
  40. package/dist/docs/components/expander.md +970 -0
  41. package/dist/docs/components/fade.md +836 -0
  42. package/dist/docs/components/fadeExpander.md +180 -0
  43. package/dist/docs/components/fadeUp.md +396 -0
  44. package/dist/docs/components/feedback.md +758 -0
  45. package/dist/docs/components/filePickers.md +370 -0
  46. package/dist/docs/components/formLabel.md +251 -0
  47. package/dist/docs/components/fullscreenMap.md +10 -0
  48. package/dist/docs/components/groupedItemList.md +1001 -0
  49. package/dist/docs/components/iconList.md +306 -0
  50. package/dist/docs/components/imagePreloader.md +167 -0
  51. package/dist/docs/components/labeledElement.md +115 -0
  52. package/dist/docs/components/licensePlate.md +412 -0
  53. package/dist/docs/components/lineCharts.md +2014 -0
  54. package/dist/docs/components/listMenu.md +392 -0
  55. package/dist/docs/components/loadMore.md +219 -0
  56. package/dist/docs/components/mainNavigation.md +129 -0
  57. package/dist/docs/components/mapCircle.md +93 -0
  58. package/dist/docs/components/mapCluster.md +337 -0
  59. package/dist/docs/components/mapContext.md +284 -0
  60. package/dist/docs/components/mapDraggableMarker.md +150 -0
  61. package/dist/docs/components/mapGettingStarted.md +39 -0
  62. package/dist/docs/components/mapInfoBubble.md +135 -0
  63. package/dist/docs/components/mapLayerGroup.md +94 -0
  64. package/dist/docs/components/mapMarker.md +1814 -0
  65. package/dist/docs/components/mapPolygon.md +959 -0
  66. package/dist/docs/components/mapRoute.md +3816 -0
  67. package/dist/docs/components/mapRouteGenerator.md +6 -0
  68. package/dist/docs/components/mapSettings.md +1040 -0
  69. package/dist/docs/components/mapUtils.md +132 -0
  70. package/dist/docs/components/multiselects.md +1921 -0
  71. package/dist/docs/components/noData.md +210 -0
  72. package/dist/docs/components/notifications.md +314 -0
  73. package/dist/docs/components/numbercontrol.md +706 -0
  74. package/dist/docs/components/onboarding.md +297 -0
  75. package/dist/docs/components/page.md +241 -0
  76. package/dist/docs/components/pager.md +133 -0
  77. package/dist/docs/components/pieCharts.md +1284 -0
  78. package/dist/docs/components/popover.md +222 -0
  79. package/dist/docs/components/position.md +50 -0
  80. package/dist/docs/components/radialBarCharts.md +3663 -0
  81. package/dist/docs/components/radiobutton.md +1271 -0
  82. package/dist/docs/components/releaseNotes.md +135 -0
  83. package/dist/docs/components/resizer.md +162 -0
  84. package/dist/docs/components/responsiveColumnStripe.md +435 -0
  85. package/dist/docs/components/responsiveVideo.md +71 -0
  86. package/dist/docs/components/rioglyph.md +331 -0
  87. package/dist/docs/components/rules.md +965 -0
  88. package/dist/docs/components/saveableInput.md +1721 -0
  89. package/dist/docs/components/selects.md +1993 -0
  90. package/dist/docs/components/sidebar.md +332 -0
  91. package/dist/docs/components/sliders.md +376 -0
  92. package/dist/docs/components/smoothScrollbars.md +1180 -0
  93. package/dist/docs/components/spinners.md +506 -0
  94. package/dist/docs/components/states.md +1176 -0
  95. package/dist/docs/components/statsWidgets.md +636 -0
  96. package/dist/docs/components/statusBar.md +644 -0
  97. package/dist/docs/components/stepButton.md +61 -0
  98. package/dist/docs/components/steppedProgressBars.md +1064 -0
  99. package/dist/docs/components/subNavigation.md +470 -0
  100. package/dist/docs/components/supportMarker.md +115 -0
  101. package/dist/docs/components/svgImage.md +248 -0
  102. package/dist/docs/components/switch.md +554 -0
  103. package/dist/docs/components/tables.md +8 -0
  104. package/dist/docs/components/tagManager.md +476 -0
  105. package/dist/docs/components/tags.md +785 -0
  106. package/dist/docs/components/teaser.md +925 -0
  107. package/dist/docs/components/timeline.md +514 -0
  108. package/dist/docs/components/timepicker.md +262 -0
  109. package/dist/docs/components/toggleButton.md +178 -0
  110. package/dist/docs/components/tooltip.md +454 -0
  111. package/dist/docs/components/virtualList.md +486 -0
  112. package/dist/docs/foundations.md +20901 -0
  113. package/dist/docs/start/changelog.md +714 -0
  114. package/dist/docs/start/goodtoknow.md +14 -0
  115. package/dist/docs/start/guidelines/color-combinations.md +678 -0
  116. package/dist/docs/start/guidelines/custom-css.md +42 -0
  117. package/dist/docs/start/guidelines/custom-rioglyph.md +35 -0
  118. package/dist/docs/start/guidelines/formatting.md +587 -0
  119. package/dist/docs/start/guidelines/iframe.md +323 -0
  120. package/dist/docs/start/guidelines/obfuscate-data.md +30 -0
  121. package/dist/docs/start/guidelines/print-css.md +36 -0
  122. package/dist/docs/start/guidelines/spinner.md +710 -0
  123. package/dist/docs/start/guidelines/supported-browsers.md +10 -0
  124. package/dist/docs/start/guidelines/writing.md +635 -0
  125. package/dist/docs/start/howto.md +187 -0
  126. package/dist/docs/start/intro.md +43 -0
  127. package/dist/docs/start/responsiveness.md +98 -0
  128. package/dist/docs/templates/common-table.md +1111 -0
  129. package/dist/docs/templates/detail-views.md +942 -0
  130. package/dist/docs/templates/expandable-details.md +228 -0
  131. package/dist/docs/templates/feature-cards.md +549 -0
  132. package/dist/docs/templates/form-summary.md +199 -0
  133. package/dist/docs/templates/form-toggle.md +367 -0
  134. package/dist/docs/templates/list-blocks.md +1021 -0
  135. package/dist/docs/templates/loading-progress.md +109 -0
  136. package/dist/docs/templates/options-panel.md +152 -0
  137. package/dist/docs/templates/panel-variants.md +164 -0
  138. package/dist/docs/templates/progress-cards.md +607 -0
  139. package/dist/docs/templates/progress-success.md +142 -0
  140. package/dist/docs/templates/settings-form.md +434 -0
  141. package/dist/docs/templates/stats-blocks.md +1381 -0
  142. package/dist/docs/templates/table-panel.md +184 -0
  143. package/dist/docs/templates/table-row-animation.md +317 -0
  144. package/dist/docs/templates/usage-cards.md +227 -0
  145. package/dist/docs/utilities/deviceUtils.md +123 -0
  146. package/dist/docs/utilities/featureToggles.md +90 -0
  147. package/dist/docs/utilities/fuelTypeUtils.md +186 -0
  148. package/dist/docs/utilities/routeUtils.md +138 -0
  149. package/dist/docs/utilities/useAfterMount.md +66 -0
  150. package/dist/docs/utilities/useAutoAnimate.md +193 -0
  151. package/dist/docs/utilities/useAverage.md +95 -0
  152. package/dist/docs/utilities/useClickOutside.md +61 -0
  153. package/dist/docs/utilities/useClipboard.md +93 -0
  154. package/dist/docs/utilities/useCount.md +178 -0
  155. package/dist/docs/utilities/useDarkMode.md +49 -0
  156. package/dist/docs/utilities/useDebugInfo.md +126 -0
  157. package/dist/docs/utilities/useEffectOnce.md +58 -0
  158. package/dist/docs/utilities/useElapsedTime.md +58 -0
  159. package/dist/docs/utilities/useElementSize.md +71 -0
  160. package/dist/docs/utilities/useEsc.md +58 -0
  161. package/dist/docs/utilities/useEvent.md +64 -0
  162. package/dist/docs/utilities/useFocusTrap.md +85 -0
  163. package/dist/docs/utilities/useFullscreen.md +198 -0
  164. package/dist/docs/utilities/useHover.md +55 -0
  165. package/dist/docs/utilities/useIncomingPostMessages.md +237 -0
  166. package/dist/docs/utilities/useInterval.md +85 -0
  167. package/dist/docs/utilities/useIsFocusWithin.md +114 -0
  168. package/dist/docs/utilities/useKey.md +151 -0
  169. package/dist/docs/utilities/useLocalStorage.md +91 -0
  170. package/dist/docs/utilities/useLocationSuggestions.md +114 -0
  171. package/dist/docs/utilities/useMax.md +62 -0
  172. package/dist/docs/utilities/useMin.md +78 -0
  173. package/dist/docs/utilities/useMutationObserver.md +113 -0
  174. package/dist/docs/utilities/useOnScreen.md +138 -0
  175. package/dist/docs/utilities/useOnlineStatus.md +49 -0
  176. package/dist/docs/utilities/usePostMessage.md +117 -0
  177. package/dist/docs/utilities/usePostMessageSender.md +257 -0
  178. package/dist/docs/utilities/usePrevious.md +101 -0
  179. package/dist/docs/utilities/useResizeObserver.md +151 -0
  180. package/dist/docs/utilities/useScrollPosition.md +252 -0
  181. package/dist/docs/utilities/useSearch.md +228 -0
  182. package/dist/docs/utilities/useSorting.md +389 -0
  183. package/dist/docs/utilities/useStateWithValidation.md +83 -0
  184. package/dist/docs/utilities/useSum.md +155 -0
  185. package/dist/docs/utilities/useTableExport.md +404 -0
  186. package/dist/docs/utilities/useTableSelection.md +1120 -0
  187. package/dist/docs/utilities/useTimeout.md +55 -0
  188. package/dist/docs/utilities/useToggle.md +115 -0
  189. package/dist/docs/utilities/useWindowResize.md +70 -0
  190. package/dist/index.mjs +271 -0
  191. package/dist/search-synonyms.json +134 -0
  192. package/dist/version.json +4 -0
  193. package/package.json +23 -19
  194. package/bin/uikit-mcp.mjs +0 -23
  195. package/data/pages/Components/components/accentbar.json +0 -207
  196. package/data/pages/Components/components/activity.json +0 -87
  197. package/data/pages/Components/components/animatednumber.json +0 -99
  198. package/data/pages/Components/components/animations.json +0 -87
  199. package/data/pages/Components/components/appheader.json +0 -291
  200. package/data/pages/Components/components/applayout.json +0 -1198
  201. package/data/pages/Components/components/appnavigationbar.json +0 -327
  202. package/data/pages/Components/components/areacharts.json +0 -563
  203. package/data/pages/Components/components/aspectratioplaceholder.json +0 -75
  204. package/data/pages/Components/components/assettree.json +0 -3080
  205. package/data/pages/Components/components/autosuggests.json +0 -710
  206. package/data/pages/Components/components/avatar.json +0 -157
  207. package/data/pages/Components/components/banner.json +0 -599
  208. package/data/pages/Components/components/barcharts.json +0 -1507
  209. package/data/pages/Components/components/barlist.json +0 -223
  210. package/data/pages/Components/components/basicmap.json +0 -68
  211. package/data/pages/Components/components/bottomsheet.json +0 -601
  212. package/data/pages/Components/components/button.json +0 -583
  213. package/data/pages/Components/components/buttontoolbar.json +0 -63
  214. package/data/pages/Components/components/calendarstripe.json +0 -235
  215. package/data/pages/Components/components/card.json +0 -69
  216. package/data/pages/Components/components/carousel.json +0 -39
  217. package/data/pages/Components/components/chartcolors.json +0 -34
  218. package/data/pages/Components/components/chartsgettingstarted.json +0 -32
  219. package/data/pages/Components/components/chat.json +0 -39
  220. package/data/pages/Components/components/checkbox.json +0 -847
  221. package/data/pages/Components/components/clearableinput.json +0 -789
  222. package/data/pages/Components/components/collapse.json +0 -175
  223. package/data/pages/Components/components/composedcharts.json +0 -159
  224. package/data/pages/Components/components/contentloader.json +0 -233
  225. package/data/pages/Components/components/datatabs.json +0 -680
  226. package/data/pages/Components/components/datepickers.json +0 -287
  227. package/data/pages/Components/components/dialogs.json +0 -1492
  228. package/data/pages/Components/components/divider.json +0 -93
  229. package/data/pages/Components/components/dropdowns.json +0 -936
  230. package/data/pages/Components/components/editablecontent.json +0 -1117
  231. package/data/pages/Components/components/expander.json +0 -377
  232. package/data/pages/Components/components/fade.json +0 -403
  233. package/data/pages/Components/components/fadeexpander.json +0 -75
  234. package/data/pages/Components/components/fadeup.json +0 -127
  235. package/data/pages/Components/components/feedback.json +0 -269
  236. package/data/pages/Components/components/filepickers.json +0 -269
  237. package/data/pages/Components/components/formlabel.json +0 -115
  238. package/data/pages/Components/components/fullscreenmap.json +0 -22
  239. package/data/pages/Components/components/groupeditemlist.json +0 -323
  240. package/data/pages/Components/components/iconlist.json +0 -45
  241. package/data/pages/Components/components/imagepreloader.json +0 -81
  242. package/data/pages/Components/components/labeledelement.json +0 -75
  243. package/data/pages/Components/components/licenseplate.json +0 -69
  244. package/data/pages/Components/components/linecharts.json +0 -987
  245. package/data/pages/Components/components/listmenu.json +0 -313
  246. package/data/pages/Components/components/loadmore.json +0 -175
  247. package/data/pages/Components/components/mainnavigation.json +0 -39
  248. package/data/pages/Components/components/mapcircle.json +0 -34
  249. package/data/pages/Components/components/mapcluster.json +0 -51
  250. package/data/pages/Components/components/mapcontext.json +0 -105
  251. package/data/pages/Components/components/mapdraggablemarker.json +0 -34
  252. package/data/pages/Components/components/mapgettingstarted.json +0 -27
  253. package/data/pages/Components/components/mapgroup.json +0 -1198
  254. package/data/pages/Components/components/mapinfobubble.json +0 -34
  255. package/data/pages/Components/components/maplayergroup.json +0 -34
  256. package/data/pages/Components/components/mapmarker.json +0 -700
  257. package/data/pages/Components/components/mappolygon.json +0 -45
  258. package/data/pages/Components/components/maproute.json +0 -623
  259. package/data/pages/Components/components/maproutegenerator.json +0 -16
  260. package/data/pages/Components/components/mapsettings.json +0 -51
  261. package/data/pages/Components/components/maputils.json +0 -34
  262. package/data/pages/Components/components/multiselects.json +0 -1451
  263. package/data/pages/Components/components/nodata.json +0 -139
  264. package/data/pages/Components/components/notifications.json +0 -65
  265. package/data/pages/Components/components/numbercontrol.json +0 -301
  266. package/data/pages/Components/components/onboarding.json +0 -302
  267. package/data/pages/Components/components/page.json +0 -197
  268. package/data/pages/Components/components/pager.json +0 -93
  269. package/data/pages/Components/components/piecharts.json +0 -731
  270. package/data/pages/Components/components/popover.json +0 -251
  271. package/data/pages/Components/components/position.json +0 -69
  272. package/data/pages/Components/components/radialbarcharts.json +0 -1304
  273. package/data/pages/Components/components/radiobutton.json +0 -1105
  274. package/data/pages/Components/components/releasenotes.json +0 -44
  275. package/data/pages/Components/components/resizer.json +0 -93
  276. package/data/pages/Components/components/responsivecolumnstripe.json +0 -123
  277. package/data/pages/Components/components/responsivevideo.json +0 -75
  278. package/data/pages/Components/components/rioglyph.json +0 -93
  279. package/data/pages/Components/components/rules.json +0 -410
  280. package/data/pages/Components/components/saveableinput.json +0 -703
  281. package/data/pages/Components/components/selects.json +0 -701
  282. package/data/pages/Components/components/sidebar.json +0 -243
  283. package/data/pages/Components/components/sliders.json +0 -235
  284. package/data/pages/Components/components/smoothscrollbars.json +0 -335
  285. package/data/pages/Components/components/spinners.json +0 -343
  286. package/data/pages/Components/components/states.json +0 -1705
  287. package/data/pages/Components/components/statswidgets.json +0 -314
  288. package/data/pages/Components/components/statusbar.json +0 -177
  289. package/data/pages/Components/components/stepbutton.json +0 -57
  290. package/data/pages/Components/components/steppedprogressbars.json +0 -417
  291. package/data/pages/Components/components/subnavigation.json +0 -107
  292. package/data/pages/Components/components/supportmarker.json +0 -45
  293. package/data/pages/Components/components/svgimage.json +0 -81
  294. package/data/pages/Components/components/switch.json +0 -111
  295. package/data/pages/Components/components/tables.json +0 -144
  296. package/data/pages/Components/components/tagmanager.json +0 -86
  297. package/data/pages/Components/components/tags.json +0 -146
  298. package/data/pages/Components/components/teaser.json +0 -188
  299. package/data/pages/Components/components/timeline.json +0 -45
  300. package/data/pages/Components/components/timepicker.json +0 -163
  301. package/data/pages/Components/components/togglebutton.json +0 -247
  302. package/data/pages/Components/components/tooltip.json +0 -270
  303. package/data/pages/Components/components/virtuallist.json +0 -175
  304. package/data/pages/Foundations/foundations.json +0 -2475
  305. package/data/pages/Getting-started/start/changelog.json +0 -22
  306. package/data/pages/Getting-started/start/goodtoknow.json +0 -32
  307. package/data/pages/Getting-started/start/guidelines/color-combinations.json +0 -58
  308. package/data/pages/Getting-started/start/guidelines/custom-css.json +0 -27
  309. package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +0 -22
  310. package/data/pages/Getting-started/start/guidelines/formatting.json +0 -97
  311. package/data/pages/Getting-started/start/guidelines/iframe.json +0 -93
  312. package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +0 -22
  313. package/data/pages/Getting-started/start/guidelines/print-css.json +0 -37
  314. package/data/pages/Getting-started/start/guidelines/spinner.json +0 -144
  315. package/data/pages/Getting-started/start/guidelines/supported-browsers.json +0 -22
  316. package/data/pages/Getting-started/start/guidelines/writing.json +0 -242
  317. package/data/pages/Getting-started/start/howto.json +0 -72
  318. package/data/pages/Getting-started/start/intro.json +0 -37
  319. package/data/pages/Getting-started/start/responsiveness.json +0 -52
  320. package/data/pages/Templates/templates/common-table.json +0 -39
  321. package/data/pages/Templates/templates/detail-views.json +0 -71
  322. package/data/pages/Templates/templates/expandable-details.json +0 -39
  323. package/data/pages/Templates/templates/feature-cards.json +0 -103
  324. package/data/pages/Templates/templates/form-summary.json +0 -39
  325. package/data/pages/Templates/templates/form-toggle.json +0 -39
  326. package/data/pages/Templates/templates/list-blocks.json +0 -119
  327. package/data/pages/Templates/templates/loading-progress.json +0 -39
  328. package/data/pages/Templates/templates/options-panel.json +0 -39
  329. package/data/pages/Templates/templates/panel-variants.json +0 -39
  330. package/data/pages/Templates/templates/progress-cards.json +0 -71
  331. package/data/pages/Templates/templates/progress-success.json +0 -39
  332. package/data/pages/Templates/templates/settings-form.json +0 -39
  333. package/data/pages/Templates/templates/stats-blocks.json +0 -135
  334. package/data/pages/Templates/templates/table-panel.json +0 -39
  335. package/data/pages/Templates/templates/table-row-animation.json +0 -39
  336. package/data/pages/Templates/templates/usage-cards.json +0 -39
  337. package/data/pages/Utilities/utilities/deviceutils.json +0 -39
  338. package/data/pages/Utilities/utilities/featuretoggles.json +0 -42
  339. package/data/pages/Utilities/utilities/fueltypeutils.json +0 -118
  340. package/data/pages/Utilities/utilities/routeutils.json +0 -34
  341. package/data/pages/Utilities/utilities/useaftermount.json +0 -63
  342. package/data/pages/Utilities/utilities/useaverage.json +0 -86
  343. package/data/pages/Utilities/utilities/useclickoutside.json +0 -69
  344. package/data/pages/Utilities/utilities/useclipboard.json +0 -57
  345. package/data/pages/Utilities/utilities/usecount.json +0 -92
  346. package/data/pages/Utilities/utilities/usedarkmode.json +0 -50
  347. package/data/pages/Utilities/utilities/usedebuginfo.json +0 -63
  348. package/data/pages/Utilities/utilities/useeffectonce.json +0 -57
  349. package/data/pages/Utilities/utilities/useelapsedtime.json +0 -57
  350. package/data/pages/Utilities/utilities/useelementsize.json +0 -63
  351. package/data/pages/Utilities/utilities/useesc.json +0 -57
  352. package/data/pages/Utilities/utilities/useevent.json +0 -75
  353. package/data/pages/Utilities/utilities/usefocustrap.json +0 -57
  354. package/data/pages/Utilities/utilities/usefullscreen.json +0 -197
  355. package/data/pages/Utilities/utilities/usehover.json +0 -57
  356. package/data/pages/Utilities/utilities/useinterval.json +0 -63
  357. package/data/pages/Utilities/utilities/useisfocuswithin.json +0 -75
  358. package/data/pages/Utilities/utilities/usekey.json +0 -75
  359. package/data/pages/Utilities/utilities/uselocalstorage.json +0 -69
  360. package/data/pages/Utilities/utilities/uselocationsuggestions.json +0 -110
  361. package/data/pages/Utilities/utilities/usemax.json +0 -86
  362. package/data/pages/Utilities/utilities/usemin.json +0 -86
  363. package/data/pages/Utilities/utilities/usemutationobserver.json +0 -69
  364. package/data/pages/Utilities/utilities/useonlinestatus.json +0 -39
  365. package/data/pages/Utilities/utilities/useonscreen.json +0 -63
  366. package/data/pages/Utilities/utilities/usepostmessage.json +0 -80
  367. package/data/pages/Utilities/utilities/useprevious.json +0 -63
  368. package/data/pages/Utilities/utilities/useresizeobserver.json +0 -65
  369. package/data/pages/Utilities/utilities/usescrollposition.json +0 -103
  370. package/data/pages/Utilities/utilities/usesearch.json +0 -197
  371. package/data/pages/Utilities/utilities/usesorting.json +0 -139
  372. package/data/pages/Utilities/utilities/usestatewithvalidation.json +0 -69
  373. package/data/pages/Utilities/utilities/usesum.json +0 -86
  374. package/data/pages/Utilities/utilities/usetableexport.json +0 -87
  375. package/data/pages/Utilities/utilities/usetableselection.json +0 -311
  376. package/data/pages/Utilities/utilities/usetimeout.json +0 -63
  377. package/data/pages/Utilities/utilities/usetoggle.json +0 -75
  378. package/data/pages/Utilities/utilities/usewindowresize.json +0 -63
  379. package/data/version.json +0 -4
  380. package/docs/content-schema.md +0 -147
  381. package/docs/navigation-inventory.json +0 -1310
  382. package/docs/search-synonyms.json +0 -43
  383. package/server/index.mjs +0 -268
  384. package/server/lib/load-docs.mjs +0 -48
  385. package/server/lib/normalise-doc.mjs +0 -220
  386. package/server/lib/render-markdown.mjs +0 -82
  387. package/server/lib/search-index.mjs +0 -49
  388. package/server/lib/types.js +0 -99
package/data/pages/Components/components/linecharts.json DELETED
@@ -1,987 +0,0 @@
1
- {
2
- "metadata": {
3
- "captured_at": "2025-11-21T12:08:20.724Z",
4
- "source": "https://uikit.developers.rio.cloud/#components/lineCharts",
5
- "category": "Components",
6
- "section": "Charts",
7
- "slug": "components/linecharts",
8
- "version": "v1.13.2",
9
- "hash_algorithm": "sha256",
10
- "hash": "828d91f364347f2397447bf393281f2a490873ee0e535f7e9f812be90a75fa5e"
11
- },
12
- "title": "LineChart",
13
- "lead": null,
14
- "content": [
15
- {
16
- "heading": "LineChart",
17
- "body": "> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.",
18
- "examples": [
19
- {
20
- "caption": "Example 1",
21
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Simple LineChart</label><div class=\"panel panel-default panel-body margin-bottom-0 height-200 max-width-500\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 168px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"168\" viewBox=\"0 0 468 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts1-clip\"><rect x=\"15\" y=\"15\" height=\"108\" width=\"438\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"123\" x2=\"453\" y2=\"123\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"96\" x2=\"453\" y2=\"96\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"69\" x2=\"453\" y2=\"69\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"42\" x2=\"453\" y2=\"42\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"15\" x2=\"453\" y2=\"15\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"123\" x2=\"453\" y2=\"123\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"129\" x2=\"45\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"45\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"45\" dy=\"0.71em\">Page A</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"108\" y1=\"129\" x2=\"108\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"108\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"108\" dy=\"0.71em\">Page B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"171\" y1=\"129\" x2=\"171\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"171\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"171\" dy=\"0.71em\">Page C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"234\" y1=\"129\" x2=\"234\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"234\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"234\" dy=\"0.71em\">Page D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"297\" y1=\"129\" x2=\"297\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"297\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"297\" dy=\"0.71em\">Page E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"360\" y1=\"129\" x2=\"360\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"360\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"360\" dy=\"0.71em\">Page F</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"423\" y1=\"129\" x2=\"423\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"423\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"423\" dy=\"0.71em\">Page G</tspan></text></g></g></g><g class=\"recharts-layer recharts-line\"><path stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"none\" width=\"438\" height=\"108\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 407.5185546875px\" d=\"M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3\"></path></g></svg><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(15px, 15px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div>",
22
- "tabs": [
23
- {
24
- "label": "React",
25
- "language": "tsx",
26
- "code": "import LineChart from '@rio-cloud/rio-uikit/LineChart';\nimport Line from '@rio-cloud/rio-uikit/Line';\n\ntype CustomData = {\n name: string;\n value: number;\n};\n\nexport default () => {\n return (\n <>\n <label>Simple LineChart</label>\n <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>\n <LineChart\n data={data}\n dataKey={(entry: CustomData) => entry.name}\n xAxisOptions={{ padding: { left: 30, right: 30 } }}\n showGrid\n gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}\n lines={[<Line key='line' dataKey={entry => entry.value} />]}\n />\n </div>\n </>\n );\n};\n\nconst data: CustomData[] = [\n {\n name: 'Page A',\n value: 3200,\n },\n {\n name: 'Page B',\n value: 3000,\n },\n {\n name: 'Page C',\n value: 2000,\n },\n {\n name: 'Page D',\n value: 2780,\n },\n {\n name: 'Page E',\n value: 1890,\n },\n {\n name: 'Page F',\n value: 2390,\n },\n {\n name: 'Page G',\n value: 3490,\n },\n];"
27
- },
28
- {
29
- "label": "HTML",
30
- "language": "html",
31
- "code": "<label>Simple LineChart</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-200 max-width-500\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 168px; max-width: 468px;\">\n <svg class=\"recharts-surface\" width=\"468\" height=\"168\" viewBox=\"0 0 468 168\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts1-clip\">\n <rect x=\"15\" y=\"15\" height=\"108\" width=\"438\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-cartesian-grid\">\n <g class=\"recharts-cartesian-grid-horizontal\">\n <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"123\" x2=\"453\" y2=\"123\">\n </line>\n <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"96\" x2=\"453\" y2=\"96\">\n </line>\n <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"69\" x2=\"453\" y2=\"69\">\n </line>\n <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"42\" x2=\"453\" y2=\"42\">\n </line>\n <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"438\" height=\"108\" x1=\"15\" y1=\"15\" x2=\"453\" y2=\"15\">\n </line>\n </g>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"123\" x2=\"453\" y2=\"123\">\n </line>\n <g class=\"recharts-cartesian-axis-ticks\">\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"129\" x2=\"45\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"45\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"45\" dy=\"0.71em\">Page A</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"108\" y1=\"129\" x2=\"108\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"108\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"108\" dy=\"0.71em\">Page B</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"171\" y1=\"129\" x2=\"171\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"171\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"171\" dy=\"0.71em\">Page C</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"234\" y1=\"129\" x2=\"234\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"234\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"234\" dy=\"0.71em\">Page D</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"297\" y1=\"129\" x2=\"297\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"297\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"297\" dy=\"0.71em\">Page E</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"360\" y1=\"129\" x2=\"360\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"360\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"360\" dy=\"0.71em\">Page F</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"423\" y1=\"129\" x2=\"423\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"423\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"423\" dy=\"0.71em\">Page G</tspan>\n </text>\n </g>\n </g>\n </g>\n <g class=\"recharts-layer recharts-line\">\n <path stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"none\" width=\"438\" height=\"108\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"70.99798859923143px 336.52056608826854px\" d=\"M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3\">\n </path>\n </g>\n </svg>\n <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(15px, 15px);\">\n <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>"
32
- },
33
- {
34
- "label": "Props",
35
- "language": "json",
36
- "code": null,
37
- "props": [
38
- {
39
- "heading": "LineChart",
40
- "rows": [
41
- {
42
- "name": "width",
43
- "type": "Number",
44
- "default": "",
45
- "description": "The width of chart container."
46
- },
47
- {
48
- "name": "height",
49
- "type": "Number",
50
- "default": "",
51
- "description": "The height of chart container."
52
- },
53
- {
54
- "name": "data",
55
- "type": "Array",
56
- "default": "",
57
- "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
58
- },
59
- {
60
- "name": "dataKey",
61
- "type": "String | Number | Function",
62
- "default": "value",
63
- "description": "The key of data displayed in the axis. Also, used as label for the x-axis."
64
- },
65
- {
66
- "name": "dataUnit",
67
- "type": "string",
68
- "default": "",
69
- "description": "The unit of data displayed in the chart."
70
- },
71
- {
72
- "name": "showGrid",
73
- "type": "Boolean",
74
- "default": "false",
75
- "description": "Defines whether or not the grid shall be rendered."
76
- },
77
- {
78
- "name": "showXAxis",
79
- "type": "Boolean",
80
- "default": "true",
81
- "description": "Defines whether or not the x-axis shall be rendered."
82
- },
83
- {
84
- "name": "showYAxis",
85
- "type": "Boolean",
86
- "default": "false",
87
- "description": "Defines whether or not the y-axis shall be rendered."
88
- },
89
- {
90
- "name": "xAxisOptions",
91
- "type": "Object",
92
- "default": "",
93
- "description": "Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis"
94
- },
95
- {
96
- "name": "yAxisOptions",
97
- "type": "Object",
98
- "default": "",
99
- "description": "Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis"
100
- },
101
- {
102
- "name": "additionalAxes",
103
- "type": "React.ReactElement<XAxisProps | YAxisProps>[]",
104
- "default": "",
105
- "description": "Render a list of additional axes. This includes YAxis and XAxis."
106
- },
107
- {
108
- "name": "gridOptions",
109
- "type": "Object",
110
- "default": "",
111
- "description": "Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid"
112
- },
113
- {
114
- "name": "containerOptions",
115
- "type": "Object",
116
- "default": "",
117
- "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
118
- },
119
- {
120
- "name": "brush",
121
- "type": "Boolean",
122
- "default": "false",
123
- "description": "Defines whether or not the brush component shall be used."
124
- },
125
- {
126
- "name": "tooltip",
127
- "type": "ChartTooltip | Boolean",
128
- "default": "",
129
- "description": "Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor"
130
- },
131
- {
132
- "name": "legend",
133
- "type": "Legend | Boolean",
134
- "default": "false",
135
- "description": "Shows the provided Legend component otherwise shows nothing."
136
- },
137
- {
138
- "name": "lines",
139
- "type": "Array of Line",
140
- "default": "[]",
141
- "description": "Renders the provided Line components."
142
- },
143
- {
144
- "name": "...",
145
- "type": "",
146
- "default": "",
147
- "description": "Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart"
148
- }
149
- ]
150
- },
151
- {
152
- "heading": "Line",
153
- "rows": [
154
- {
155
- "name": "strokeColor",
156
- "type": "String",
157
- "default": "color-coldplay-fountain",
158
- "description": "Defines the color for the line. Take the color name from the charts colors page."
159
- },
160
- {
161
- "name": "dataKey",
162
- "type": "string | number | ((obj: T) => any)",
163
- "default": "value",
164
- "description": "The key of data used for the line."
165
- },
166
- {
167
- "name": "dataUnit",
168
- "type": "String | Number",
169
- "default": "",
170
- "description": "The unit of data displayed for the line."
171
- },
172
- {
173
- "name": "legendType",
174
- "type": "String",
175
- "default": "square",
176
- "description": "The type of icon in legend. If set to \"none\", no legend item will be rendered."
177
- },
178
- {
179
- "name": "type",
180
- "type": "String",
181
- "default": "monotone",
182
- "description": "The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area."
183
- },
184
- {
185
- "name": "isAnimationActive",
186
- "type": "Boolean",
187
- "default": "true",
188
- "description": "If set false, animation of line will be disabled."
189
- },
190
- {
191
- "name": "...",
192
- "type": "",
193
- "default": "",
194
- "description": "Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line"
195
- }
196
- ]
197
- },
198
- {
199
- "heading": "ReferenceLine",
200
- "rows": [
201
- {
202
- "name": "stroke",
203
- "type": "String",
204
- "default": "color-coldplay-fountain",
205
- "description": "Defines the color for the line. Take the color name from the charts colors page."
206
- },
207
- {
208
- "name": "...",
209
- "type": "",
210
- "default": "",
211
- "description": "Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine"
212
- }
213
- ]
214
- },
215
- {
216
- "heading": "Legend",
217
- "rows": [
218
- {
219
- "name": "iconType",
220
- "type": "String",
221
- "default": "square",
222
- "description": "Defines the type of the leading icon."
223
- },
224
- {
225
- "name": "iconSize",
226
- "type": "String",
227
- "default": "12",
228
- "description": "Defines the size of the leading icon."
229
- },
230
- {
231
- "name": "layout",
232
- "type": "String",
233
- "default": "vertical",
234
- "description": "Defines the layout of the legend."
235
- },
236
- {
237
- "name": "align",
238
- "type": "String",
239
- "default": "right",
240
- "description": "Defines the alignment of the legend relative to the chart."
241
- },
242
- {
243
- "name": "verticalAlign",
244
- "type": "String",
245
- "default": "top",
246
- "description": "Defines the vertical alignment of the legend relative to the chart."
247
- },
248
- {
249
- "name": "...",
250
- "type": "",
251
- "default": "",
252
- "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
253
- }
254
- ]
255
- }
256
- ]
257
- }
258
- ]
259
- },
260
- {
261
- "caption": "Example 2",
262
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>LineChart with ReferenceLine</label><div class=\"panel panel-default panel-body margin-bottom-0 height-200 max-width-500\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 168px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"168\" viewBox=\"0 0 468 168\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts4-clip\"><rect x=\"15\" y=\"15\" height=\"108\" width=\"438\"></rect></clipPath></defs><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"123\" x2=\"453\" y2=\"123\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"129\" x2=\"45\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"45\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"45\" dy=\"0.71em\">Page A</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"108\" y1=\"129\" x2=\"108\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"108\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"108\" dy=\"0.71em\">Page B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"171\" y1=\"129\" x2=\"171\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"171\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"171\" dy=\"0.71em\">Page C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"234\" y1=\"129\" x2=\"234\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"234\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"234\" dy=\"0.71em\">Page D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"297\" y1=\"129\" x2=\"297\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"297\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"297\" dy=\"0.71em\">Page E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"360\" y1=\"129\" x2=\"360\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"360\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"360\" dy=\"0.71em\">Page F</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"423\" y1=\"129\" x2=\"423\" y2=\"123\"></line><text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"423\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"423\" dy=\"0.71em\">Page G</tspan></text></g></g></g><g class=\"recharts-layer recharts-line\"><path stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"none\" width=\"438\" height=\"108\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 407.5185546875px\" d=\"M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3\"></path></g><g class=\"recharts-layer recharts-reference-line\"><line x=\"Page E\" stroke=\"#4eccc1 \" fill=\"none\" fill-opacity=\"1\" stroke-width=\"1\" x1=\"297\" y1=\"123\" x2=\"297\" y2=\"15\" class=\"recharts-reference-line-line\"></line><text x=\"302\" y=\"105\" fill=\"gray\" text-anchor=\"right\">Custom label</text></g><g class=\"recharts-layer recharts-reference-line\"><line y=\"3500\" stroke-dasharray=\"3 3\" stroke=\"#f19588 \" fill=\"none\" fill-opacity=\"1\" stroke-width=\"1\" x1=\"15\" y1=\"18.000000000000004\" x2=\"453\" y2=\"18.000000000000004\" class=\"recharts-reference-line-line\"></line><text offset=\"5\" x=\"234\" y=\"18.000000000000004\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\"><tspan x=\"234\" dy=\"0.355em\">Max</tspan></text></g><g class=\"recharts-layer recharts-reference-line\"><line stroke-dasharray=\"3 6\" stroke=\"#f19588 \" fill=\"none\" fill-opacity=\"1\" stroke-width=\"1\" x1=\"45\" y1=\"123\" x2=\"297\" y2=\"18.000000000000004\" class=\"recharts-reference-line-line\"></line><text offset=\"5\" x=\"171\" y=\"70.5\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\"><tspan x=\"171\" dy=\"0.355em\">Segment</tspan></text></g></svg><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;\"></div></div></div></div></div>",
263
- "tabs": [
264
- {
265
- "label": "React",
266
- "language": "tsx",
267
- "code": "import LineChart from '@rio-cloud/rio-uikit/LineChart';\nimport Line from '@rio-cloud/rio-uikit/Line';\nimport ReferenceLine from '@rio-cloud/rio-uikit/ReferenceLine';\nimport ChartTooltip from '@rio-cloud/rio-uikit/ChartTooltip';\n\ntype CustomData = {\n name: string;\n value: number;\n};\n\nexport default () => {\n return (\n <>\n <label>LineChart with ReferenceLine</label>\n <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>\n <LineChart\n data={data}\n dataKey={(entry: CustomData) => entry.name}\n xAxisOptions={{ padding: { left: 30, right: 30 } }}\n lines={[<Line key='line' type='monotone' dataKey={entry => entry.value} />]}\n tooltip={<ChartTooltip content={<CustomTooltip />} cursor={{ fill: '#ebf9fa80' }} />}\n referenceLines={[\n <ReferenceLine key='x' x='Page E' stroke='color-coldplay-turquoise' label={<CustomLabel />} />,\n <ReferenceLine\n key='y'\n y={3500}\n stroke='color-warmup-salmon'\n strokeDasharray='3 3'\n label='Max'\n />,\n <ReferenceLine\n key='segment'\n stroke='color-warmup-salmon'\n strokeDasharray='3 6'\n segment={[\n { x: 'Page A', y: 0 },\n { x: 'Page E', y: 3500 },\n ]}\n label='Segment'\n />,\n ]}\n />\n </div>\n </>\n );\n};\n\nconst CustomLabel = (props: any) => {\n const { viewBox } = props;\n return (\n <text x={viewBox.x + 5} y={viewBox.y + 90} fill='gray' textAnchor='right'>\n Custom label\n </text>\n );\n};\n\nconst CustomTooltip = ({ active, payload }: { active?: boolean; payload?: any }) => {\n if (!active) {\n return null;\n }\n\n const firstValue = payload[0].value;\n\n return (\n <div className='custom-tooltip bg-white border padding-10 min-width-100 rounded shadow-smooth'>\n <div className='display-flex justify-content-between gap-20'>\n <span className='text-color-dark'>20.06.2022</span>\n <span className='display-flex align-items-center text-color-darker line-height-12'>\n <span className='rioglyph rioglyph-truck' />\n <span className='margin-left-2'>{payload.length}</span>\n </span>\n </div>\n <hr className='margin-y-5' />\n <div>\n <div className='display-flex'>\n <span className='width-10' />\n <span className='text-color-highlight-dark'>{`${firstValue}`}</span>\n </div>\n </div>\n </div>\n );\n};\n\nconst data: CustomData[] = [\n {\n name: 'Page A',\n value: 3200,\n },\n {\n name: 'Page B',\n value: 3000,\n },\n {\n name: 'Page C',\n value: 2000,\n },\n {\n name: 'Page D',\n value: 2780,\n },\n {\n name: 'Page E',\n value: 1890,\n },\n {\n name: 'Page F',\n value: 2390,\n },\n {\n name: 'Page G',\n value: 3490,\n },\n];"
268
- },
269
- {
270
- "label": "HTML",
271
- "language": "html",
272
- "code": "<label>LineChart with ReferenceLine</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-200 max-width-500\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 168px; max-width: 468px;\">\n <svg class=\"recharts-surface\" width=\"468\" height=\"168\" viewBox=\"0 0 468 168\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts4-clip\">\n <rect x=\"15\" y=\"15\" height=\"108\" width=\"438\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"123\" x2=\"453\" y2=\"123\">\n </line>\n <g class=\"recharts-cartesian-axis-ticks\">\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"129\" x2=\"45\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"45\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"45\" dy=\"0.71em\">Page A</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"108\" y1=\"129\" x2=\"108\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"108\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"108\" dy=\"0.71em\">Page B</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"171\" y1=\"129\" x2=\"171\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"171\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"171\" dy=\"0.71em\">Page C</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"234\" y1=\"129\" x2=\"234\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"234\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"234\" dy=\"0.71em\">Page D</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"297\" y1=\"129\" x2=\"297\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"297\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"297\" dy=\"0.71em\">Page E</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"360\" y1=\"129\" x2=\"360\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"360\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"360\" dy=\"0.71em\">Page F</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"438\" height=\"30\" x=\"15\" y=\"123\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"423\" y1=\"129\" x2=\"423\" y2=\"123\">\n </line>\n <text orientation=\"bottom\" width=\"438\" height=\"30\" stroke=\"none\" x=\"423\" y=\"131\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"423\" dy=\"0.71em\">Page G</tspan>\n </text>\n </g>\n </g>\n </g>\n <g class=\"recharts-layer recharts-line\">\n <path stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"none\" width=\"438\" height=\"108\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"376.86896583171995px 30.649588855780053px\" d=\"M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-reference-line\">\n <line x=\"Page E\" stroke=\"#4eccc1 \" fill=\"none\" fill-opacity=\"1\" stroke-width=\"1\" x1=\"297\" y1=\"123\" x2=\"297\" y2=\"15\" class=\"recharts-reference-line-line\">\n </line>\n <text x=\"302\" y=\"105\" fill=\"gray\" text-anchor=\"right\">Custom label</text>\n </g>\n <g class=\"recharts-layer recharts-reference-line\">\n <line y=\"3500\" stroke-dasharray=\"3 3\" stroke=\"#f19588 \" fill=\"none\" fill-opacity=\"1\" stroke-width=\"1\" x1=\"15\" y1=\"18.000000000000004\" x2=\"453\" y2=\"18.000000000000004\" class=\"recharts-reference-line-line\">\n </line>\n <text offset=\"5\" x=\"234\" y=\"18.000000000000004\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n <tspan x=\"234\" dy=\"0.355em\">Max</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-reference-line\">\n <line stroke-dasharray=\"3 6\" stroke=\"#f19588 \" fill=\"none\" fill-opacity=\"1\" stroke-width=\"1\" x1=\"45\" y1=\"123\" x2=\"297\" y2=\"18.000000000000004\" class=\"recharts-reference-line-line\">\n </line>\n <text offset=\"5\" x=\"171\" y=\"70.5\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n <tspan x=\"171\" dy=\"0.355em\">Segment</tspan>\n </text>\n </g>\n </svg>\n <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;\">\n </div>\n </div>\n </div>\n</div>"
273
- },
274
- {
275
- "label": "Props",
276
- "language": "json",
277
- "code": null,
278
- "props": [
279
- {
280
- "heading": "LineChart",
281
- "rows": [
282
- {
283
- "name": "width",
284
- "type": "Number",
285
- "default": "",
286
- "description": "The width of chart container."
287
- },
288
- {
289
- "name": "height",
290
- "type": "Number",
291
- "default": "",
292
- "description": "The height of chart container."
293
- },
294
- {
295
- "name": "data",
296
- "type": "Array",
297
- "default": "",
298
- "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
299
- },
300
- {
301
- "name": "dataKey",
302
- "type": "String | Number | Function",
303
- "default": "value",
304
- "description": "The key of data displayed in the axis. Also, used as label for the x-axis."
305
- },
306
- {
307
- "name": "dataUnit",
308
- "type": "string",
309
- "default": "",
310
- "description": "The unit of data displayed in the chart."
311
- },
312
- {
313
- "name": "showGrid",
314
- "type": "Boolean",
315
- "default": "false",
316
- "description": "Defines whether or not the grid shall be rendered."
317
- },
318
- {
319
- "name": "showXAxis",
320
- "type": "Boolean",
321
- "default": "true",
322
- "description": "Defines whether or not the x-axis shall be rendered."
323
- },
324
- {
325
- "name": "showYAxis",
326
- "type": "Boolean",
327
- "default": "false",
328
- "description": "Defines whether or not the y-axis shall be rendered."
329
- },
330
- {
331
- "name": "xAxisOptions",
332
- "type": "Object",
333
- "default": "",
334
- "description": "Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis"
335
- },
336
- {
337
- "name": "yAxisOptions",
338
- "type": "Object",
339
- "default": "",
340
- "description": "Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis"
341
- },
342
- {
343
- "name": "additionalAxes",
344
- "type": "React.ReactElement<XAxisProps | YAxisProps>[]",
345
- "default": "",
346
- "description": "Render a list of additional axes. This includes YAxis and XAxis."
347
- },
348
- {
349
- "name": "gridOptions",
350
- "type": "Object",
351
- "default": "",
352
- "description": "Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid"
353
- },
354
- {
355
- "name": "containerOptions",
356
- "type": "Object",
357
- "default": "",
358
- "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
359
- },
360
- {
361
- "name": "brush",
362
- "type": "Boolean",
363
- "default": "false",
364
- "description": "Defines whether or not the brush component shall be used."
365
- },
366
- {
367
- "name": "tooltip",
368
- "type": "ChartTooltip | Boolean",
369
- "default": "",
370
- "description": "Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor"
371
- },
372
- {
373
- "name": "legend",
374
- "type": "Legend | Boolean",
375
- "default": "false",
376
- "description": "Shows the provided Legend component otherwise shows nothing."
377
- },
378
- {
379
- "name": "lines",
380
- "type": "Array of Line",
381
- "default": "[]",
382
- "description": "Renders the provided Line components."
383
- },
384
- {
385
- "name": "...",
386
- "type": "",
387
- "default": "",
388
- "description": "Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart"
389
- }
390
- ]
391
- },
392
- {
393
- "heading": "Line",
394
- "rows": [
395
- {
396
- "name": "strokeColor",
397
- "type": "String",
398
- "default": "color-coldplay-fountain",
399
- "description": "Defines the color for the line. Take the color name from the charts colors page."
400
- },
401
- {
402
- "name": "dataKey",
403
- "type": "string | number | ((obj: T) => any)",
404
- "default": "value",
405
- "description": "The key of data used for the line."
406
- },
407
- {
408
- "name": "dataUnit",
409
- "type": "String | Number",
410
- "default": "",
411
- "description": "The unit of data displayed for the line."
412
- },
413
- {
414
- "name": "legendType",
415
- "type": "String",
416
- "default": "square",
417
- "description": "The type of icon in legend. If set to \"none\", no legend item will be rendered."
418
- },
419
- {
420
- "name": "type",
421
- "type": "String",
422
- "default": "monotone",
423
- "description": "The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area."
424
- },
425
- {
426
- "name": "isAnimationActive",
427
- "type": "Boolean",
428
- "default": "true",
429
- "description": "If set false, animation of line will be disabled."
430
- },
431
- {
432
- "name": "...",
433
- "type": "",
434
- "default": "",
435
- "description": "Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line"
436
- }
437
- ]
438
- },
439
- {
440
- "heading": "ReferenceLine",
441
- "rows": [
442
- {
443
- "name": "stroke",
444
- "type": "String",
445
- "default": "color-coldplay-fountain",
446
- "description": "Defines the color for the line. Take the color name from the charts colors page."
447
- },
448
- {
449
- "name": "...",
450
- "type": "",
451
- "default": "",
452
- "description": "Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine"
453
- }
454
- ]
455
- },
456
- {
457
- "heading": "Legend",
458
- "rows": [
459
- {
460
- "name": "iconType",
461
- "type": "String",
462
- "default": "square",
463
- "description": "Defines the type of the leading icon."
464
- },
465
- {
466
- "name": "iconSize",
467
- "type": "String",
468
- "default": "12",
469
- "description": "Defines the size of the leading icon."
470
- },
471
- {
472
- "name": "layout",
473
- "type": "String",
474
- "default": "vertical",
475
- "description": "Defines the layout of the legend."
476
- },
477
- {
478
- "name": "align",
479
- "type": "String",
480
- "default": "right",
481
- "description": "Defines the alignment of the legend relative to the chart."
482
- },
483
- {
484
- "name": "verticalAlign",
485
- "type": "String",
486
- "default": "top",
487
- "description": "Defines the vertical alignment of the legend relative to the chart."
488
- },
489
- {
490
- "name": "...",
491
- "type": "",
492
- "default": "",
493
- "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
494
- }
495
- ]
496
- }
497
- ]
498
- }
499
- ]
500
- },
501
- {
502
- "caption": "Example 3",
503
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Multiple lines in a LineChart with a brush for range selection</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 876px;\"><svg class=\"recharts-surface\" width=\"876\" height=\"268\" viewBox=\"0 0 876 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts7-clip\"><rect x=\"75\" y=\"15\" height=\"148\" width=\"786\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"163\" x2=\"861\" y2=\"163\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"126\" x2=\"861\" y2=\"126\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"89\" x2=\"861\" y2=\"89\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"52\" x2=\"861\" y2=\"52\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"15\" x2=\"861\" y2=\"15\"></line></g><g class=\"recharts-cartesian-grid-vertical\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"163\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"206\" y1=\"15\" x2=\"206\" y2=\"163\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"337\" y1=\"15\" x2=\"337\" y2=\"163\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"468\" y1=\"15\" x2=\"468\" y2=\"163\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"599\" y1=\"15\" x2=\"599\" y2=\"163\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"730\" y1=\"15\" x2=\"730\" y2=\"163\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"861\" y1=\"15\" x2=\"861\" y2=\"163\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"163\" x2=\"861\" y2=\"163\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"169\" x2=\"75\" y2=\"163\"></line><text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"75\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"75\" dy=\"0.71em\">Page A</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"206\" y1=\"169\" x2=\"206\" y2=\"163\"></line><text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"206\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"206\" dy=\"0.71em\">Page B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"337\" y1=\"169\" x2=\"337\" y2=\"163\"></line><text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"337\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"337\" dy=\"0.71em\">Page C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"468\" y1=\"169\" x2=\"468\" y2=\"163\"></line><text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"468\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"468\" dy=\"0.71em\">Page D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"599\" y1=\"169\" x2=\"599\" y2=\"163\"></line><text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"599\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"599\" dy=\"0.71em\">Page E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"730\" y1=\"169\" x2=\"730\" y2=\"163\"></line><text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"730\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"730\" dy=\"0.71em\">Page F</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"861\" y1=\"169\" x2=\"861\" y2=\"163\"></line><text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"856.1875\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"856.1875\" dy=\"0.71em\">Page G</tspan></text></g></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\"><line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"163\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"163\" x2=\"75\" y2=\"163\"></line><text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">0</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"126\" x2=\"75\" y2=\"126\"></line><text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"126\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">2500</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"89\" x2=\"75\" y2=\"89\"></line><text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"89\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">5000</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"52\" x2=\"75\" y2=\"52\"></line><text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"52\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">7500</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"15\" x2=\"75\" y2=\"15\"></line><text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"15\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">10000</tspan></text></g></g></g><g class=\"recharts-layer recharts-line\"><path name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"none\" width=\"786\" height=\"148\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 789.6669311523438px\" d=\"M75,115.64C118.667,116.133,162.333,116.627,206,118.6C249.667,120.573,293.333,133.4,337,133.4C380.667,133.4,424.333,121.856,468,121.856C511.667,121.856,555.333,135.028,599,135.028C642.667,135.028,686.333,131.575,730,127.628C773.667,123.681,817.333,117.515,861,111.348\"></path></g><g class=\"recharts-layer recharts-line\"><path name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"none\" width=\"786\" height=\"148\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 874.0921630859375px\" d=\"M75,127.48C118.667,134.895,162.333,142.31,206,142.31C249.667,142.31,293.333,17.96,337,17.96C380.667,17.96,424.333,105.162,468,105.162C511.667,105.162,555.333,91.96,599,91.96C642.667,91.96,686.333,106.76,730,106.76C773.667,106.76,817.333,103.06,861,99.36\"></path></g><g class=\"recharts-layer recharts-line\"><path name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"none\" width=\"786\" height=\"148\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 786.4154052734375px\" d=\"M75,127.48C118.667,128.886,162.333,130.292,206,130.292C249.667,130.292,293.333,129.108,337,129.108C380.667,129.108,424.333,133.4,468,133.4C511.667,133.4,555.333,131.955,599,130.721C642.667,129.488,686.333,126,730,126C773.667,126,817.333,128.96,861,131.92\"></path></g><g class=\"recharts-layer recharts-brush\" style=\"user-select: none;\"><rect stroke=\"#a7afbb \" fill=\"#fff\" x=\"75\" y=\"193\" width=\"786\" height=\"40\"></rect><rect class=\"recharts-brush-slide\" stroke=\"none\" fill=\"#a7afbb \" fill-opacity=\"0.2\" x=\"80\" y=\"193\" width=\"776\" height=\"40\" style=\"cursor: move;\"></rect><g class=\"recharts-layer recharts-brush-traveller\" tabindex=\"0\" role=\"slider\" aria-label=\"Min value: Page A, Max value: Page G\" aria-valuenow=\"75\" style=\"cursor: col-resize;\"><rect x=\"75\" y=\"193\" width=\"5\" height=\"40\" fill=\"#a7afbb \" stroke=\"none\"></rect><line x1=\"76\" y1=\"212\" x2=\"79\" y2=\"212\" fill=\"none\" stroke=\"#fff\"></line><line x1=\"76\" y1=\"214\" x2=\"79\" y2=\"214\" fill=\"none\" stroke=\"#fff\"></line></g><g class=\"recharts-layer recharts-brush-traveller\" tabindex=\"0\" role=\"slider\" aria-label=\"Min value: Page A, Max value: Page G\" aria-valuenow=\"856\" style=\"cursor: col-resize;\"><rect x=\"856\" y=\"193\" width=\"5\" height=\"40\" fill=\"#a7afbb \" stroke=\"none\"></rect><line x1=\"857\" y1=\"212\" x2=\"860\" y2=\"212\" fill=\"none\" stroke=\"#fff\"></line><line x1=\"857\" y1=\"214\" x2=\"860\" y2=\"214\" fill=\"none\" stroke=\"#fff\"></line></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 846px; height: auto; right: 15px; bottom: 15px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: right;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"12\" height=\"12\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path stroke-width=\"4\" fill=\"none\" stroke=\"#67abc5 \" d=\"M0,16h10.666666666666666\n A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16\n H32M21.333333333333332,16\n A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16\" class=\"recharts-legend-icon\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\"><span style=\"color: rgb(103, 171, 197);\">uv</span></span></li><li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"12\" height=\"12\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path stroke-width=\"4\" fill=\"none\" stroke=\"#a1daa3 \" d=\"M0,16h10.666666666666666\n A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16\n H32M21.333333333333332,16\n A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16\" class=\"recharts-legend-icon\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\"><span style=\"color: rgb(161, 218, 163);\">pv</span></span></li><li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"12\" height=\"12\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path stroke-width=\"4\" fill=\"none\" stroke=\"#b23672 \" d=\"M0,16h10.666666666666666\n A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16\n H32M21.333333333333332,16\n A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16\" class=\"recharts-legend-icon\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(178, 54, 114);\"><span style=\"color: rgb(178, 54, 114);\">amt</span></span></li></ul></div><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(75px, 15px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div>",
504
- "tabs": [
505
- {
506
- "label": "React",
507
- "language": "tsx",
508
- "code": "import LineChart from '@rio-cloud/rio-uikit/LineChart';\nimport Line from '@rio-cloud/rio-uikit/Line';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\n\ntype CustomData = {\n name: string;\n uv: number;\n pv: number;\n amt: number;\n};\n\nexport default () => {\n return (\n <>\n <label>Multiple lines in a LineChart with a brush for range selection</label>\n <div className='panel panel-default panel-body margin-bottom-0 height-300'>\n <LineChart\n data={data}\n dataKey={(entry: CustomData) => entry.name}\n brush\n showYAxis\n showGrid\n legend={\n <Legend\n layout='horizontal'\n verticalAlign='bottom'\n iconType='line'\n formatter={(value: string, entry: any, index: number) => {\n const { color } = entry;\n return <span style={{ color }}>{Object.keys(data[0])[index + 1]}</span>;\n }}\n />\n }\n lines={[\n <Line key='line1' name='uv' dataKey='uv' strokeColor='color-coldplay-fountain' />,\n <Line key='line2' name='pv' dataKey='pv' strokeColor='color-coldplay-moos' />,\n <Line key='line3' name='amt' dataKey='amt' strokeColor='color-warmup-raspberry' />,\n ]}\n />\n </div>\n </>\n );\n};\n\nconst data: CustomData[] = [\n {\n name: 'Page A',\n uv: 3200,\n pv: 2400,\n amt: 2400,\n },\n {\n name: 'Page B',\n uv: 3000,\n pv: 1398,\n amt: 2210,\n },\n {\n name: 'Page C',\n uv: 2000,\n pv: 9800,\n amt: 2290,\n },\n {\n name: 'Page D',\n uv: 2780,\n pv: 3908,\n amt: 2000,\n },\n {\n name: 'Page E',\n uv: 1890,\n pv: 4800,\n amt: 2181,\n },\n {\n name: 'Page F',\n uv: 2390,\n pv: 3800,\n amt: 2500,\n },\n {\n name: 'Page G',\n uv: 3490,\n pv: 4300,\n amt: 2100,\n },\n];"
509
- },
510
- {
511
- "label": "HTML",
512
- "language": "html",
513
- "code": "<label>Multiple lines in a LineChart with a brush for range selection</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 876px;\">\n <svg class=\"recharts-surface\" width=\"876\" height=\"268\" viewBox=\"0 0 876 268\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts7-clip\">\n <rect x=\"75\" y=\"15\" height=\"148\" width=\"786\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-cartesian-grid\">\n <g class=\"recharts-cartesian-grid-horizontal\">\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"163\" x2=\"861\" y2=\"163\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"126\" x2=\"861\" y2=\"126\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"89\" x2=\"861\" y2=\"89\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"52\" x2=\"861\" y2=\"52\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"15\" x2=\"861\" y2=\"15\">\n </line>\n </g>\n <g class=\"recharts-cartesian-grid-vertical\">\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"163\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"206\" y1=\"15\" x2=\"206\" y2=\"163\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"337\" y1=\"15\" x2=\"337\" y2=\"163\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"468\" y1=\"15\" x2=\"468\" y2=\"163\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"599\" y1=\"15\" x2=\"599\" y2=\"163\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"730\" y1=\"15\" x2=\"730\" y2=\"163\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"786\" height=\"148\" x1=\"861\" y1=\"15\" x2=\"861\" y2=\"163\">\n </line>\n </g>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n <line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"163\" x2=\"861\" y2=\"163\">\n </line>\n <g class=\"recharts-cartesian-axis-ticks\">\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"169\" x2=\"75\" y2=\"163\">\n </line>\n <text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"75\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"75\" dy=\"0.71em\">Page A</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"206\" y1=\"169\" x2=\"206\" y2=\"163\">\n </line>\n <text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"206\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"206\" dy=\"0.71em\">Page B</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"337\" y1=\"169\" x2=\"337\" y2=\"163\">\n </line>\n <text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"337\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"337\" dy=\"0.71em\">Page C</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"468\" y1=\"169\" x2=\"468\" y2=\"163\">\n </line>\n <text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"468\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"468\" dy=\"0.71em\">Page D</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"599\" y1=\"169\" x2=\"599\" y2=\"163\">\n </line>\n <text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"599\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"599\" dy=\"0.71em\">Page E</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"730\" y1=\"169\" x2=\"730\" y2=\"163\">\n </line>\n <text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"730\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"730\" dy=\"0.71em\">Page F</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"786\" height=\"30\" x=\"75\" y=\"163\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"861\" y1=\"169\" x2=\"861\" y2=\"163\">\n </line>\n <text orientation=\"bottom\" width=\"786\" height=\"30\" stroke=\"none\" x=\"856.1875\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"856.1875\" dy=\"0.71em\">Page G</tspan>\n </text>\n </g>\n </g>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\">\n <line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"163\">\n </line>\n <g class=\"recharts-cartesian-axis-ticks\">\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"163\" x2=\"75\" y2=\"163\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">0</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"126\" x2=\"75\" y2=\"126\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"126\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">2500</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"89\" x2=\"75\" y2=\"89\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"89\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">5000</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"52\" x2=\"75\" y2=\"52\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"52\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">7500</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"148\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"15\" x2=\"75\" y2=\"15\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"148\" stroke=\"none\" x=\"67\" y=\"15\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">10000</tspan>\n </text>\n </g>\n </g>\n </g>\n <g class=\"recharts-layer recharts-line\">\n <path name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"none\" width=\"786\" height=\"148\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"789.6669311523438px 0px\" d=\"M75,115.64C118.667,116.133,162.333,116.627,206,118.6C249.667,120.573,293.333,133.4,337,133.4C380.667,133.4,424.333,121.856,468,121.856C511.667,121.856,555.333,135.028,599,135.028C642.667,135.028,686.333,131.575,730,127.628C773.667,123.681,817.333,117.515,861,111.348\">\n </path>\n <g class=\"recharts-layer\">\n </g>\n <g class=\"recharts-layer recharts-line-dots\">\n <circle r=\"3\" name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"75\" cy=\"115.63999999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"206\" cy=\"118.6\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"337\" cy=\"133.4\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"468\" cy=\"121.856\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"599\" cy=\"135.028\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"730\" cy=\"127.628\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"uv\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"861\" cy=\"111.348\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n </g>\n </g>\n <g class=\"recharts-layer recharts-line\">\n <path name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"none\" width=\"786\" height=\"148\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"874.0921630859375px 0px\" d=\"M75,127.48C118.667,134.895,162.333,142.31,206,142.31C249.667,142.31,293.333,17.96,337,17.96C380.667,17.96,424.333,105.162,468,105.162C511.667,105.162,555.333,91.96,599,91.96C642.667,91.96,686.333,106.76,730,106.76C773.667,106.76,817.333,103.06,861,99.36\">\n </path>\n <g class=\"recharts-layer\">\n </g>\n <g class=\"recharts-layer recharts-line-dots\">\n <circle r=\"3\" name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"75\" cy=\"127.47999999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"206\" cy=\"142.3096\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"337\" cy=\"17.96\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"468\" cy=\"105.16159999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"599\" cy=\"91.96000000000001\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"730\" cy=\"106.76\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"pv\" stroke=\"#a1daa3 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"861\" cy=\"99.36000000000001\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n </g>\n </g>\n <g class=\"recharts-layer recharts-line\">\n <path name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"none\" width=\"786\" height=\"148\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"786.4154052734375px 0px\" d=\"M75,127.48C118.667,128.886,162.333,130.292,206,130.292C249.667,130.292,293.333,129.108,337,129.108C380.667,129.108,424.333,133.4,468,133.4C511.667,133.4,555.333,131.955,599,130.721C642.667,129.488,686.333,126,730,126C773.667,126,817.333,128.96,861,131.92\">\n </path>\n <g class=\"recharts-layer\">\n </g>\n <g class=\"recharts-layer recharts-line-dots\">\n <circle r=\"3\" name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"75\" cy=\"127.47999999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"206\" cy=\"130.292\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"337\" cy=\"129.108\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"468\" cy=\"133.4\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"599\" cy=\"130.7212\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"730\" cy=\"126\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"amt\" stroke=\"#b23672 \" stroke-width=\"1\" fill=\"#fff\" width=\"786\" height=\"148\" cx=\"861\" cy=\"131.92000000000002\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n </g>\n </g>\n <g class=\"recharts-layer recharts-brush\" style=\"user-select: none;\">\n <rect stroke=\"#a7afbb \" fill=\"#fff\" x=\"75\" y=\"193\" width=\"786\" height=\"40\">\n </rect>\n <rect class=\"recharts-brush-slide\" stroke=\"none\" fill=\"#a7afbb \" fill-opacity=\"0.2\" x=\"80\" y=\"193\" width=\"776\" height=\"40\" style=\"cursor: move;\">\n </rect>\n <g class=\"recharts-layer recharts-brush-traveller\" tabindex=\"0\" role=\"slider\" aria-label=\"Min value: Page A, Max value: Page G\" aria-valuenow=\"75\" style=\"cursor: col-resize;\">\n <rect x=\"75\" y=\"193\" width=\"5\" height=\"40\" fill=\"#a7afbb \" stroke=\"none\">\n </rect>\n <line x1=\"76\" y1=\"212\" x2=\"79\" y2=\"212\" fill=\"none\" stroke=\"#fff\">\n </line>\n <line x1=\"76\" y1=\"214\" x2=\"79\" y2=\"214\" fill=\"none\" stroke=\"#fff\">\n </line>\n </g>\n <g class=\"recharts-layer recharts-brush-traveller\" tabindex=\"0\" role=\"slider\" aria-label=\"Min value: Page A, Max value: Page G\" aria-valuenow=\"856\" style=\"cursor: col-resize;\">\n <rect x=\"856\" y=\"193\" width=\"5\" height=\"40\" fill=\"#a7afbb \" stroke=\"none\">\n </rect>\n <line x1=\"857\" y1=\"212\" x2=\"860\" y2=\"212\" fill=\"none\" stroke=\"#fff\">\n </line>\n <line x1=\"857\" y1=\"214\" x2=\"860\" y2=\"214\" fill=\"none\" stroke=\"#fff\">\n </line>\n </g>\n </g>\n </svg>\n <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 846px; height: auto; right: 15px; bottom: 15px;\">\n <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: right;\">\n <li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"12\" height=\"12\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path stroke-width=\"4\" fill=\"none\" stroke=\"#67abc5 \" d=\"M0,16h10.666666666666666\n A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16\n H32M21.333333333333332,16\n A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16\" class=\"recharts-legend-icon\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">\n <span style=\"color: rgb(103, 171, 197);\">uv</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"12\" height=\"12\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path stroke-width=\"4\" fill=\"none\" stroke=\"#a1daa3 \" d=\"M0,16h10.666666666666666\n A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16\n H32M21.333333333333332,16\n A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16\" class=\"recharts-legend-icon\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">\n <span style=\"color: rgb(161, 218, 163);\">pv</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"12\" height=\"12\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path stroke-width=\"4\" fill=\"none\" stroke=\"#b23672 \" d=\"M0,16h10.666666666666666\n A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16\n H32M21.333333333333332,16\n A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16\" class=\"recharts-legend-icon\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(178, 54, 114);\">\n <span style=\"color: rgb(178, 54, 114);\">amt</span>\n </span>\n </li>\n </ul>\n </div>\n <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(75px, 15px);\">\n <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>"
514
- },
515
- {
516
- "label": "Props",
517
- "language": "json",
518
- "code": null,
519
- "props": [
520
- {
521
- "heading": "LineChart",
522
- "rows": [
523
- {
524
- "name": "width",
525
- "type": "Number",
526
- "default": "",
527
- "description": "The width of chart container."
528
- },
529
- {
530
- "name": "height",
531
- "type": "Number",
532
- "default": "",
533
- "description": "The height of chart container."
534
- },
535
- {
536
- "name": "data",
537
- "type": "Array",
538
- "default": "",
539
- "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
540
- },
541
- {
542
- "name": "dataKey",
543
- "type": "String | Number | Function",
544
- "default": "value",
545
- "description": "The key of data displayed in the axis. Also, used as label for the x-axis."
546
- },
547
- {
548
- "name": "dataUnit",
549
- "type": "string",
550
- "default": "",
551
- "description": "The unit of data displayed in the chart."
552
- },
553
- {
554
- "name": "showGrid",
555
- "type": "Boolean",
556
- "default": "false",
557
- "description": "Defines whether or not the grid shall be rendered."
558
- },
559
- {
560
- "name": "showXAxis",
561
- "type": "Boolean",
562
- "default": "true",
563
- "description": "Defines whether or not the x-axis shall be rendered."
564
- },
565
- {
566
- "name": "showYAxis",
567
- "type": "Boolean",
568
- "default": "false",
569
- "description": "Defines whether or not the y-axis shall be rendered."
570
- },
571
- {
572
- "name": "xAxisOptions",
573
- "type": "Object",
574
- "default": "",
575
- "description": "Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis"
576
- },
577
- {
578
- "name": "yAxisOptions",
579
- "type": "Object",
580
- "default": "",
581
- "description": "Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis"
582
- },
583
- {
584
- "name": "additionalAxes",
585
- "type": "React.ReactElement<XAxisProps | YAxisProps>[]",
586
- "default": "",
587
- "description": "Render a list of additional axes. This includes YAxis and XAxis."
588
- },
589
- {
590
- "name": "gridOptions",
591
- "type": "Object",
592
- "default": "",
593
- "description": "Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid"
594
- },
595
- {
596
- "name": "containerOptions",
597
- "type": "Object",
598
- "default": "",
599
- "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
600
- },
601
- {
602
- "name": "brush",
603
- "type": "Boolean",
604
- "default": "false",
605
- "description": "Defines whether or not the brush component shall be used."
606
- },
607
- {
608
- "name": "tooltip",
609
- "type": "ChartTooltip | Boolean",
610
- "default": "",
611
- "description": "Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor"
612
- },
613
- {
614
- "name": "legend",
615
- "type": "Legend | Boolean",
616
- "default": "false",
617
- "description": "Shows the provided Legend component otherwise shows nothing."
618
- },
619
- {
620
- "name": "lines",
621
- "type": "Array of Line",
622
- "default": "[]",
623
- "description": "Renders the provided Line components."
624
- },
625
- {
626
- "name": "...",
627
- "type": "",
628
- "default": "",
629
- "description": "Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart"
630
- }
631
- ]
632
- },
633
- {
634
- "heading": "Line",
635
- "rows": [
636
- {
637
- "name": "strokeColor",
638
- "type": "String",
639
- "default": "color-coldplay-fountain",
640
- "description": "Defines the color for the line. Take the color name from the charts colors page."
641
- },
642
- {
643
- "name": "dataKey",
644
- "type": "string | number | ((obj: T) => any)",
645
- "default": "value",
646
- "description": "The key of data used for the line."
647
- },
648
- {
649
- "name": "dataUnit",
650
- "type": "String | Number",
651
- "default": "",
652
- "description": "The unit of data displayed for the line."
653
- },
654
- {
655
- "name": "legendType",
656
- "type": "String",
657
- "default": "square",
658
- "description": "The type of icon in legend. If set to \"none\", no legend item will be rendered."
659
- },
660
- {
661
- "name": "type",
662
- "type": "String",
663
- "default": "monotone",
664
- "description": "The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area."
665
- },
666
- {
667
- "name": "isAnimationActive",
668
- "type": "Boolean",
669
- "default": "true",
670
- "description": "If set false, animation of line will be disabled."
671
- },
672
- {
673
- "name": "...",
674
- "type": "",
675
- "default": "",
676
- "description": "Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line"
677
- }
678
- ]
679
- },
680
- {
681
- "heading": "ReferenceLine",
682
- "rows": [
683
- {
684
- "name": "stroke",
685
- "type": "String",
686
- "default": "color-coldplay-fountain",
687
- "description": "Defines the color for the line. Take the color name from the charts colors page."
688
- },
689
- {
690
- "name": "...",
691
- "type": "",
692
- "default": "",
693
- "description": "Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine"
694
- }
695
- ]
696
- },
697
- {
698
- "heading": "Legend",
699
- "rows": [
700
- {
701
- "name": "iconType",
702
- "type": "String",
703
- "default": "square",
704
- "description": "Defines the type of the leading icon."
705
- },
706
- {
707
- "name": "iconSize",
708
- "type": "String",
709
- "default": "12",
710
- "description": "Defines the size of the leading icon."
711
- },
712
- {
713
- "name": "layout",
714
- "type": "String",
715
- "default": "vertical",
716
- "description": "Defines the layout of the legend."
717
- },
718
- {
719
- "name": "align",
720
- "type": "String",
721
- "default": "right",
722
- "description": "Defines the alignment of the legend relative to the chart."
723
- },
724
- {
725
- "name": "verticalAlign",
726
- "type": "String",
727
- "default": "top",
728
- "description": "Defines the vertical alignment of the legend relative to the chart."
729
- },
730
- {
731
- "name": "...",
732
- "type": "",
733
- "default": "",
734
- "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
735
- }
736
- ]
737
- }
738
- ]
739
- }
740
- ]
741
- },
742
- {
743
- "caption": "Example 4",
744
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Multiple axes in a LineChart with a brush for range selection</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 876px;\"><svg class=\"recharts-surface\" width=\"876\" height=\"268\" viewBox=\"0 0 876 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts14-clip\"><rect x=\"75\" y=\"15\" height=\"158\" width=\"682\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"173\" x2=\"757\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"133.5\" x2=\"757\" y2=\"133.5\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"94\" x2=\"757\" y2=\"94\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"54.5\" x2=\"757\" y2=\"54.5\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"15\" x2=\"757\" y2=\"15\"></line></g><g class=\"recharts-cartesian-grid-vertical\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"110.89473684210526\" y1=\"15\" x2=\"110.89473684210526\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"182.68421052631578\" y1=\"15\" x2=\"182.68421052631578\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"254.4736842105263\" y1=\"15\" x2=\"254.4736842105263\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"326.2631578947368\" y1=\"15\" x2=\"326.2631578947368\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"398.05263157894734\" y1=\"15\" x2=\"398.05263157894734\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"469.84210526315786\" y1=\"15\" x2=\"469.84210526315786\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"541.6315789473683\" y1=\"15\" x2=\"541.6315789473683\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"613.421052631579\" y1=\"15\" x2=\"613.421052631579\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"685.2105263157894\" y1=\"15\" x2=\"685.2105263157894\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"757\" y1=\"15\" x2=\"757\" y2=\"173\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"173\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"173\" x2=\"757\" y2=\"173\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"110.89473684210526\" y1=\"179\" x2=\"110.89473684210526\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"110.89473684210526\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"110.89473684210526\" dy=\"0.71em\">00:15</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"182.68421052631578\" y1=\"179\" x2=\"182.68421052631578\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"182.68421052631578\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"182.68421052631578\" dy=\"0.71em\">00:45</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"254.4736842105263\" y1=\"179\" x2=\"254.4736842105263\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"254.4736842105263\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"254.4736842105263\" dy=\"0.71em\">01:15</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"326.2631578947368\" y1=\"179\" x2=\"326.2631578947368\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"326.2631578947368\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"326.2631578947368\" dy=\"0.71em\">01:45</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"398.05263157894734\" y1=\"179\" x2=\"398.05263157894734\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"398.05263157894734\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"398.05263157894734\" dy=\"0.71em\">02:15</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"469.84210526315786\" y1=\"179\" x2=\"469.84210526315786\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"469.84210526315786\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"469.84210526315786\" dy=\"0.71em\">02:45</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"541.6315789473683\" y1=\"179\" x2=\"541.6315789473683\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"541.6315789473683\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"541.6315789473683\" dy=\"0.71em\">03:15</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"613.421052631579\" y1=\"179\" x2=\"613.421052631579\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"613.421052631579\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"613.421052631579\" dy=\"0.71em\">03:45</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"685.2105263157894\" y1=\"179\" x2=\"685.2105263157894\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"685.2105263157894\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"685.2105263157894\" dy=\"0.71em\">04:15</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"757\" y1=\"179\" x2=\"757\" y2=\"173\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"757\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"757\" dy=\"0.71em\">04:45</tspan></text></g></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\"><line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"173\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"173\" x2=\"75\" y2=\"173\"></line><text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"173\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">0</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"133.5\" x2=\"75\" y2=\"133.5\"></line><text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"133.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">30</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"94\" x2=\"75\" y2=\"94\"></line><text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"94\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">60</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"54.5\" x2=\"75\" y2=\"54.5\"></line><text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"54.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">90</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"15\" x2=\"75\" y2=\"15\"></line><text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"15\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">120</tspan></text></g></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"203\" x2=\"757\" y2=\"203\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"209\" x2=\"75\" y2=\"203\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"75\" y=\"211\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"75\" dy=\"0.71em\">Planned</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"302.33333333333337\" y1=\"209\" x2=\"302.33333333333337\" y2=\"203\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"302.33333333333337\" y=\"211\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"302.33333333333337\" dy=\"0.71em\">Charging</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"529.6666666666667\" y1=\"209\" x2=\"529.6666666666667\" y2=\"203\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"529.6666666666667\" y=\"211\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"529.6666666666667\" dy=\"0.71em\">Discharging</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"757\" y1=\"209\" x2=\"757\" y2=\"203\"></line><text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"757\" y=\"211\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"757\" dy=\"0.71em\">Interruption</tspan></text></g></g></g><g class=\"recharts-layer recharts-line\"><path name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"none\" width=\"682\" height=\"158\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 735.21142578125px\" d=\"M75,48.417C86.965,55.102,98.93,61.788,110.895,68.773C122.86,75.758,134.825,83.75,146.789,90.327C158.754,96.903,170.719,108.233,182.684,108.233C194.649,108.233,206.614,75.909,218.579,75.909C230.544,75.909,242.509,87.592,254.474,92.091C266.439,96.589,278.404,99.703,290.368,102.901C302.333,106.098,314.298,111.275,326.263,111.275C338.228,111.275,350.193,86.284,362.158,86.284C374.123,86.284,386.088,96.133,398.053,98.924C410.018,101.716,421.982,101.885,433.947,103.111C445.912,104.338,457.877,104.595,469.842,106.285C481.807,107.974,493.772,113.25,505.737,113.25C517.702,113.25,529.667,110.368,541.632,108.207C553.596,106.045,565.561,103.563,577.526,100.28C589.491,96.998,601.456,88.509,613.421,88.509C625.386,88.509,637.351,93.776,649.316,93.776C661.281,93.776,673.246,88.509,685.211,88.509C697.175,88.509,709.14,88.509,721.105,88.509C733.07,88.509,745.035,88.509,757,88.509\"></path></g><g class=\"recharts-layer recharts-line\"><path name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"none\" width=\"682\" height=\"158\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 704.7066650390625px\" d=\"M75,48.285C86.965,52.468,98.93,56.651,110.895,61.018C122.86,65.384,134.825,70.377,146.789,74.487C158.754,78.597,170.719,85.679,182.684,85.679C194.649,85.679,206.614,65.573,218.579,65.573C230.544,65.573,242.509,72.887,254.474,75.698C266.439,78.509,278.404,80.443,290.368,82.44C302.333,84.437,314.298,87.68,326.263,87.68C338.228,87.68,350.193,72.104,362.158,72.104C374.123,72.104,386.088,78.257,398.053,80.004C410.018,81.751,421.982,81.858,433.947,82.624C445.912,83.39,457.877,83.539,469.842,84.599C481.807,85.659,493.772,88.983,505.737,88.983C517.702,88.983,529.667,87.188,541.632,85.837C553.596,84.485,565.561,82.925,577.526,80.873C589.491,78.821,601.456,73.526,613.421,73.526C625.386,73.526,637.351,78.793,649.316,78.793C661.281,78.793,673.246,73.526,685.211,73.526C697.175,73.526,709.14,73.526,721.105,73.526C733.07,73.526,745.035,73.526,757,73.526\"></path></g><g class=\"recharts-layer recharts-line\"><path name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"none\" width=\"682\" height=\"158\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 787.10302734375px\" d=\"M75,39.424C86.965,49.112,98.93,58.799,110.895,68.918C122.86,79.036,134.825,90.61,146.789,100.136C158.754,109.662,170.719,126.074,182.684,126.074C194.649,126.074,206.614,75.369,218.579,75.369C230.544,75.369,242.509,92.304,254.474,98.819C266.439,105.334,278.404,109.831,290.368,114.461C302.333,119.091,314.298,126.601,326.263,126.601C338.228,126.601,350.193,88.76,362.158,88.76C374.123,88.76,386.088,103.024,398.053,107.061C410.018,111.099,421.982,111.343,433.947,113.118C445.912,114.893,457.877,115.418,469.842,117.713C481.807,120.009,493.772,126.89,505.737,126.89C517.702,126.89,529.667,122.712,541.632,119.583C553.596,116.454,565.561,112.868,577.526,108.115C589.491,103.361,601.456,91.064,613.421,91.064C625.386,91.064,637.351,95.014,649.316,95.014C661.281,95.014,673.246,91.064,685.211,91.064C697.175,91.064,709.14,91.064,721.105,91.064C733.07,91.064,745.035,91.064,757,91.064\"></path></g><g class=\"recharts-layer recharts-reference-line\"><line x=\"03:30\" stroke=\"#f19588 \" fill=\"none\" fill-opacity=\"1\" stroke-width=\"1\" x1=\"577.5263157894736\" y1=\"173\" x2=\"577.5263157894736\" y2=\"15\" class=\"recharts-reference-line-line\"></line><text x=\"582.5263157894736\" y=\"30\" fill=\"gray\" text-anchor=\"right\">Now</text></g><g class=\"recharts-layer recharts-brush\" style=\"user-select: none;\"><rect stroke=\"#a7afbb \" fill=\"#fff\" x=\"75\" y=\"233\" width=\"682\" height=\"20\"></rect><rect class=\"recharts-brush-slide\" stroke=\"none\" fill=\"#a7afbb \" fill-opacity=\"0.2\" x=\"80.00000000000006\" y=\"233\" width=\"672\" height=\"20\" style=\"cursor: move;\"></rect><g class=\"recharts-layer recharts-brush-traveller\" tabindex=\"0\" role=\"slider\" aria-label=\"Min value: undefined, Max value: undefined\" aria-valuenow=\"75.00000000000006\" style=\"cursor: col-resize;\"><rect x=\"75.00000000000006\" y=\"233\" width=\"5\" height=\"20\" fill=\"#a7afbb \" stroke=\"none\"></rect><line x1=\"76.00000000000006\" y1=\"242\" x2=\"79.00000000000006\" y2=\"242\" fill=\"none\" stroke=\"#fff\"></line><line x1=\"76.00000000000006\" y1=\"244\" x2=\"79.00000000000006\" y2=\"244\" fill=\"none\" stroke=\"#fff\"></line></g><g class=\"recharts-layer recharts-brush-traveller\" tabindex=\"0\" role=\"slider\" aria-label=\"Min value: undefined, Max value: undefined\" aria-valuenow=\"752\" style=\"cursor: col-resize;\"><rect x=\"752\" y=\"233\" width=\"5\" height=\"20\" fill=\"#a7afbb \" stroke=\"none\"></rect><line x1=\"753\" y1=\"242\" x2=\"756\" y2=\"242\" fill=\"none\" stroke=\"#fff\"></line><line x1=\"753\" y1=\"244\" x2=\"756\" y2=\"244\" fill=\"none\" stroke=\"#fff\"></line></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 15px; top: 15px;\"><ul class=\"list-style-none padding-left-20\"><li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \"><span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(103, 171, 197);\"></span><span class=\"text-color-darker text-capitalize-first-word\">Nominal</span></li><li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \"><span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(161, 218, 163);\"></span><span class=\"text-color-darker text-capitalize-first-word\">Moderate</span></li><li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \"><span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(178, 54, 114);\"></span><span class=\"text-color-darker text-capitalize-first-word\">Extreme</span></li></ul></div><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(75px, 15px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div>",
745
- "tabs": [
746
- {
747
- "label": "React",
748
- "language": "tsx",
749
- "code": "import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport LineChart from '@rio-cloud/rio-uikit/LineChart';\nimport Line from '@rio-cloud/rio-uikit/Line';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\nimport Tooltip from '@rio-cloud/rio-uikit/Tooltip';\nimport XAxis from '@rio-cloud/rio-uikit/XAxis';\nimport ReferenceLine from '@rio-cloud/rio-uikit/ReferenceLine';\n\ntype CustomData = {\n time: string;\n nominal: number;\n moderate: number;\n extreme: number;\n status: string;\n};\n\nconst getCurrentTime = () =>\n new Date().toLocaleTimeString('de-DE', {\n hour12: false,\n hour: '2-digit',\n minute: '2-digit',\n });\n\nexport default () => {\n const [highlightedLine, setHighlightedLine] = useState<string | null>(null);\n\n const handleLegendMouseEnter = (dataKey: string) => {\n setHighlightedLine(dataKey);\n };\n\n const handleLegendMouseLeave = () => {\n setHighlightedLine(null);\n };\n\n const lineData = [\n { dataKey: 'nominal', name: 'Nominal', strokeColor: 'color-coldplay-fountain' },\n { dataKey: 'moderate', name: 'Moderate', strokeColor: 'color-coldplay-moos' },\n { dataKey: 'extreme', name: 'Extreme', strokeColor: 'color-warmup-raspberry' },\n ];\n\n return (\n <>\n <label>Multiple axes in a LineChart with a brush for range selection</label>\n <div className='panel panel-default panel-body margin-bottom-0 height-300'>\n <LineChart\n data={data}\n brush\n showGrid\n showYAxis\n xAxisOptions={{ dataKey: 'time', xAxisId: '0' }}\n additionalAxes={[<XAxis key='1' xAxisId='1' dataKey='status' allowDuplicatedCategory={false} />]}\n gridOptions={{ strokeDasharray: '3 3' }}\n tooltip={<Tooltip />}\n legend={\n <Legend\n content={\n <CustomLegend\n highlightedLine={highlightedLine}\n onMouseEnter={handleLegendMouseEnter}\n onMouseLeave={handleLegendMouseLeave}\n />\n }\n />\n }\n referenceLines={[\n <ReferenceLine\n key='currentTime'\n x='03:30'\n stroke='color-warmup-salmon'\n label={<CustomLabel />}\n />,\n ]}\n brushOptions={{ dataKey: 'date', height: 20 }}\n lines={lineData.map((line, index) => (\n <Line\n key={`line${index + 1}`}\n name={line.name}\n dataKey={line.dataKey}\n strokeColor={line.strokeColor}\n activeDot={index === 0 ? { r: 8 } : undefined}\n strokeWidth={highlightedLine === line.dataKey ? 2 : 1}\n dot={{ strokeWidth: highlightedLine === line.dataKey ? 2 : 1 }}\n />\n ))}\n />\n </div>\n </>\n );\n};\n\nconst CustomLabel = (props: any) => {\n const { viewBox } = props;\n return (\n <text x={viewBox.x + 5} y={viewBox.y + 15} fill='gray' textAnchor='right'>\n Now\n </text>\n );\n};\n\ntype CustomLegendProps = {\n payload?: any[];\n highlightedLine: string | null;\n onMouseEnter: (dataKey: string) => void;\n onMouseLeave: () => void;\n};\n\nconst CustomLegend = ({ payload, highlightedLine, onMouseEnter, onMouseLeave }: CustomLegendProps) => {\n return (\n <ul className='list-style-none padding-left-20'>\n {payload?.map((entry: any, index: number) => (\n <li\n key={`item-${index}`}\n onMouseEnter={() => onMouseEnter(entry.dataKey)}\n onMouseLeave={onMouseLeave}\n className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedLine === entry.dataKey ? 'bg-lightest' : ''}`}\n >\n <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />\n <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>\n </li>\n ))}\n </ul>\n );\n};\n\nconst data: CustomData[] = [\n {\n time: '00:00',\n nominal: 94.62,\n moderate: 94.72,\n extreme: 101.45,\n status: 'Planned',\n },\n {\n time: '00:15',\n nominal: 79.16,\n moderate: 85.05,\n extreme: 79.05,\n status: 'Planned',\n },\n {\n time: '00:30',\n nominal: 62.79,\n moderate: 74.82,\n extreme: 55.34,\n status: 'Planned',\n },\n {\n time: '00:45',\n nominal: 49.19,\n moderate: 66.32,\n extreme: 35.64,\n status: 'Planned',\n },\n {\n time: '01:00',\n nominal: 73.74,\n moderate: 81.59,\n extreme: 74.15,\n status: 'Charging',\n },\n {\n time: '01:15',\n nominal: 61.45,\n moderate: 73.9,\n extreme: 56.34,\n status: 'Charging',\n },\n {\n time: '01:30',\n nominal: 53.24,\n moderate: 68.78,\n extreme: 44.46,\n status: 'Charging',\n },\n {\n time: '01:45',\n nominal: 46.88,\n moderate: 64.8,\n extreme: 35.24,\n status: 'Charging',\n },\n {\n time: '02:00',\n nominal: 65.86,\n moderate: 76.63,\n extreme: 63.98,\n status: 'Charging',\n },\n {\n time: '02:15',\n nominal: 56.26,\n moderate: 70.63,\n extreme: 50.08,\n status: 'Discharging',\n },\n {\n time: '02:30',\n nominal: 53.08,\n moderate: 68.64,\n extreme: 45.48,\n status: 'Discharging',\n },\n {\n time: '02:45',\n nominal: 50.67,\n moderate: 67.14,\n extreme: 41.99,\n status: 'Discharging',\n },\n {\n time: '03:00',\n nominal: 45.38,\n moderate: 63.81,\n extreme: 35.02,\n status: 'Charging',\n },\n {\n time: '03:15',\n nominal: 49.21,\n moderate: 66.2,\n extreme: 40.57,\n status: 'Charging',\n },\n {\n time: '03:30',\n nominal: 55.23,\n moderate: 69.97,\n extreme: 49.28,\n status: 'Charging',\n },\n {\n time: '03:45',\n nominal: 64.17,\n moderate: 75.55,\n extreme: 62.23,\n status: 'Interruption',\n },\n {\n time: '04:00',\n nominal: 60.17,\n moderate: 71.55,\n extreme: 59.23,\n status: 'Interruption',\n },\n {\n time: '04:15',\n nominal: 64.17,\n moderate: 75.55,\n extreme: 62.23,\n status: 'Interruption',\n },\n {\n time: '04:30',\n nominal: 64.17,\n moderate: 75.55,\n extreme: 62.23,\n status: 'Interruption',\n },\n {\n time: '04:45',\n nominal: 64.17,\n moderate: 75.55,\n extreme: 62.23,\n status: 'Interruption',\n },\n];"
750
- },
751
- {
752
- "label": "HTML",
753
- "language": "html",
754
- "code": "<label>Multiple axes in a LineChart with a brush for range selection</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 876px;\">\n <svg class=\"recharts-surface\" width=\"876\" height=\"268\" viewBox=\"0 0 876 268\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts14-clip\">\n <rect x=\"75\" y=\"15\" height=\"158\" width=\"682\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-cartesian-grid\">\n <g class=\"recharts-cartesian-grid-horizontal\">\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"173\" x2=\"757\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"133.5\" x2=\"757\" y2=\"133.5\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"94\" x2=\"757\" y2=\"94\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"54.5\" x2=\"757\" y2=\"54.5\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"15\" x2=\"757\" y2=\"15\">\n </line>\n </g>\n <g class=\"recharts-cartesian-grid-vertical\">\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"110.89473684210526\" y1=\"15\" x2=\"110.89473684210526\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"182.68421052631578\" y1=\"15\" x2=\"182.68421052631578\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"254.4736842105263\" y1=\"15\" x2=\"254.4736842105263\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"326.2631578947368\" y1=\"15\" x2=\"326.2631578947368\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"398.05263157894734\" y1=\"15\" x2=\"398.05263157894734\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"469.84210526315786\" y1=\"15\" x2=\"469.84210526315786\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"541.6315789473683\" y1=\"15\" x2=\"541.6315789473683\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"613.421052631579\" y1=\"15\" x2=\"613.421052631579\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"685.2105263157894\" y1=\"15\" x2=\"685.2105263157894\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"757\" y1=\"15\" x2=\"757\" y2=\"173\">\n </line>\n <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"682\" height=\"158\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"173\">\n </line>\n </g>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"173\" x2=\"757\" y2=\"173\">\n </line>\n <g class=\"recharts-cartesian-axis-ticks\">\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"110.89473684210526\" y1=\"179\" x2=\"110.89473684210526\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"110.89473684210526\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"110.89473684210526\" dy=\"0.71em\">00:15</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"182.68421052631578\" y1=\"179\" x2=\"182.68421052631578\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"182.68421052631578\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"182.68421052631578\" dy=\"0.71em\">00:45</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"254.4736842105263\" y1=\"179\" x2=\"254.4736842105263\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"254.4736842105263\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"254.4736842105263\" dy=\"0.71em\">01:15</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"326.2631578947368\" y1=\"179\" x2=\"326.2631578947368\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"326.2631578947368\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"326.2631578947368\" dy=\"0.71em\">01:45</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"398.05263157894734\" y1=\"179\" x2=\"398.05263157894734\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"398.05263157894734\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"398.05263157894734\" dy=\"0.71em\">02:15</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"469.84210526315786\" y1=\"179\" x2=\"469.84210526315786\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"469.84210526315786\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"469.84210526315786\" dy=\"0.71em\">02:45</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"541.6315789473683\" y1=\"179\" x2=\"541.6315789473683\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"541.6315789473683\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"541.6315789473683\" dy=\"0.71em\">03:15</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"613.421052631579\" y1=\"179\" x2=\"613.421052631579\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"613.421052631579\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"613.421052631579\" dy=\"0.71em\">03:45</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"685.2105263157894\" y1=\"179\" x2=\"685.2105263157894\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"685.2105263157894\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"685.2105263157894\" dy=\"0.71em\">04:15</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"173\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"757\" y1=\"179\" x2=\"757\" y2=\"173\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"757\" y=\"181\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"757\" dy=\"0.71em\">04:45</tspan>\n </text>\n </g>\n </g>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\">\n <line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"173\">\n </line>\n <g class=\"recharts-cartesian-axis-ticks\">\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"173\" x2=\"75\" y2=\"173\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"173\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">0</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"133.5\" x2=\"75\" y2=\"133.5\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"133.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">30</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"94\" x2=\"75\" y2=\"94\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"94\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">60</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"54.5\" x2=\"75\" y2=\"54.5\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"54.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">90</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"left\" width=\"60\" height=\"158\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"15\" x2=\"75\" y2=\"15\">\n </line>\n <text orientation=\"left\" width=\"60\" height=\"158\" stroke=\"none\" x=\"67\" y=\"15\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n <tspan x=\"67\" dy=\"0.355em\">120</tspan>\n </text>\n </g>\n </g>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"203\" x2=\"757\" y2=\"203\">\n </line>\n <g class=\"recharts-cartesian-axis-ticks\">\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"209\" x2=\"75\" y2=\"203\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"75\" y=\"211\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"75\" dy=\"0.71em\">Planned</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"302.33333333333337\" y1=\"209\" x2=\"302.33333333333337\" y2=\"203\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"302.33333333333337\" y=\"211\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"302.33333333333337\" dy=\"0.71em\">Charging</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"529.6666666666667\" y1=\"209\" x2=\"529.6666666666667\" y2=\"203\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"529.6666666666667\" y=\"211\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"529.6666666666667\" dy=\"0.71em\">Discharging</tspan>\n </text>\n </g>\n <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n <line orientation=\"bottom\" width=\"682\" height=\"30\" x=\"75\" y=\"203\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"757\" y1=\"209\" x2=\"757\" y2=\"203\">\n </line>\n <text orientation=\"bottom\" width=\"682\" height=\"30\" stroke=\"none\" x=\"757\" y=\"211\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n <tspan x=\"757\" dy=\"0.71em\">Interruption</tspan>\n </text>\n </g>\n </g>\n </g>\n <g class=\"recharts-layer recharts-line\">\n <path name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"none\" width=\"682\" height=\"158\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"735.21142578125px 0px\" d=\"M75,48.417C86.965,55.102,98.93,61.788,110.895,68.773C122.86,75.758,134.825,83.75,146.789,90.327C158.754,96.903,170.719,108.233,182.684,108.233C194.649,108.233,206.614,75.909,218.579,75.909C230.544,75.909,242.509,87.592,254.474,92.091C266.439,96.589,278.404,99.703,290.368,102.901C302.333,106.098,314.298,111.275,326.263,111.275C338.228,111.275,350.193,86.284,362.158,86.284C374.123,86.284,386.088,96.133,398.053,98.924C410.018,101.716,421.982,101.885,433.947,103.111C445.912,104.338,457.877,104.595,469.842,106.285C481.807,107.974,493.772,113.25,505.737,113.25C517.702,113.25,529.667,110.368,541.632,108.207C553.596,106.045,565.561,103.563,577.526,100.28C589.491,96.998,601.456,88.509,613.421,88.509C625.386,88.509,637.351,93.776,649.316,93.776C661.281,93.776,673.246,88.509,685.211,88.509C697.175,88.509,709.14,88.509,721.105,88.509C733.07,88.509,745.035,88.509,757,88.509\">\n </path>\n <g class=\"recharts-layer\">\n </g>\n <g class=\"recharts-layer recharts-line-dots\">\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"75\" cy=\"48.41699999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"110.89473684210526\" cy=\"68.77266666666668\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"146.78947368421052\" cy=\"90.3265\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"182.68421052631578\" cy=\"108.23316666666665\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"218.57894736842104\" cy=\"75.909\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"254.4736842105263\" cy=\"92.09083333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"290.36842105263156\" cy=\"102.90066666666667\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"326.2631578947368\" cy=\"111.27466666666666\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"362.1578947368421\" cy=\"86.28433333333335\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"398.05263157894734\" cy=\"98.92433333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"433.9473684210526\" cy=\"103.11133333333335\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"469.84210526315786\" cy=\"106.2845\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"505.7368421052631\" cy=\"113.24966666666666\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"541.6315789473683\" cy=\"108.20683333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"577.5263157894736\" cy=\"100.28049999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"613.421052631579\" cy=\"88.50949999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"649.3157894736842\" cy=\"93.77616666666665\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"685.2105263157894\" cy=\"88.50949999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"721.1052631578947\" cy=\"88.50949999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Nominal\" stroke-width=\"1\" stroke=\"#67abc5 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"757\" cy=\"88.50949999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n </g>\n </g>\n <g class=\"recharts-layer recharts-line\">\n <path name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"none\" width=\"682\" height=\"158\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"704.7066650390625px 0px\" d=\"M75,48.285C86.965,52.468,98.93,56.651,110.895,61.018C122.86,65.384,134.825,70.377,146.789,74.487C158.754,78.597,170.719,85.679,182.684,85.679C194.649,85.679,206.614,65.573,218.579,65.573C230.544,65.573,242.509,72.887,254.474,75.698C266.439,78.509,278.404,80.443,290.368,82.44C302.333,84.437,314.298,87.68,326.263,87.68C338.228,87.68,350.193,72.104,362.158,72.104C374.123,72.104,386.088,78.257,398.053,80.004C410.018,81.751,421.982,81.858,433.947,82.624C445.912,83.39,457.877,83.539,469.842,84.599C481.807,85.659,493.772,88.983,505.737,88.983C517.702,88.983,529.667,87.188,541.632,85.837C553.596,84.485,565.561,82.925,577.526,80.873C589.491,78.821,601.456,73.526,613.421,73.526C625.386,73.526,637.351,78.793,649.316,78.793C661.281,78.793,673.246,73.526,685.211,73.526C697.175,73.526,709.14,73.526,721.105,73.526C733.07,73.526,745.035,73.526,757,73.526\">\n </path>\n <g class=\"recharts-layer\">\n </g>\n <g class=\"recharts-layer recharts-line-dots\">\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"75\" cy=\"48.28533333333333\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"110.89473684210526\" cy=\"61.017500000000005\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"146.78947368421052\" cy=\"74.487\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"182.68421052631578\" cy=\"85.67866666666666\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"218.57894736842104\" cy=\"65.57316666666665\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"254.4736842105263\" cy=\"75.69833333333332\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"290.36842105263156\" cy=\"82.43966666666665\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"326.2631578947368\" cy=\"87.68\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"362.1578947368421\" cy=\"72.10383333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"398.05263157894734\" cy=\"80.00383333333333\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"433.9473684210526\" cy=\"82.62400000000001\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"469.84210526315786\" cy=\"84.599\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"505.7368421052631\" cy=\"88.98349999999999\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"541.6315789473683\" cy=\"85.83666666666667\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"577.5263157894736\" cy=\"80.87283333333335\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"613.421052631579\" cy=\"73.52583333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"649.3157894736842\" cy=\"78.7925\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"685.2105263157894\" cy=\"73.52583333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"721.1052631578947\" cy=\"73.52583333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Moderate\" stroke-width=\"1\" stroke=\"#a1daa3 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"757\" cy=\"73.52583333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n </g>\n </g>\n <g class=\"recharts-layer recharts-line\">\n <path name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"none\" width=\"682\" height=\"158\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"787.10302734375px 0px\" d=\"M75,39.424C86.965,49.112,98.93,58.799,110.895,68.918C122.86,79.036,134.825,90.61,146.789,100.136C158.754,109.662,170.719,126.074,182.684,126.074C194.649,126.074,206.614,75.369,218.579,75.369C230.544,75.369,242.509,92.304,254.474,98.819C266.439,105.334,278.404,109.831,290.368,114.461C302.333,119.091,314.298,126.601,326.263,126.601C338.228,126.601,350.193,88.76,362.158,88.76C374.123,88.76,386.088,103.024,398.053,107.061C410.018,111.099,421.982,111.343,433.947,113.118C445.912,114.893,457.877,115.418,469.842,117.713C481.807,120.009,493.772,126.89,505.737,126.89C517.702,126.89,529.667,122.712,541.632,119.583C553.596,116.454,565.561,112.868,577.526,108.115C589.491,103.361,601.456,91.064,613.421,91.064C625.386,91.064,637.351,95.014,649.316,95.014C661.281,95.014,673.246,91.064,685.211,91.064C697.175,91.064,709.14,91.064,721.105,91.064C733.07,91.064,745.035,91.064,757,91.064\">\n </path>\n <g class=\"recharts-layer\">\n </g>\n <g class=\"recharts-layer recharts-line-dots\">\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"75\" cy=\"39.42416666666666\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"110.89473684210526\" cy=\"68.9175\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"146.78947368421052\" cy=\"100.13566666666667\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"182.68421052631578\" cy=\"126.07400000000001\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"218.57894736842104\" cy=\"75.36916666666666\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"254.4736842105263\" cy=\"98.819\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"290.36842105263156\" cy=\"114.461\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"326.2631578947368\" cy=\"126.60066666666665\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"362.1578947368421\" cy=\"88.75966666666666\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"398.05263157894734\" cy=\"107.06133333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"433.9473684210526\" cy=\"113.118\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"469.84210526315786\" cy=\"117.71316666666667\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"505.7368421052631\" cy=\"126.89033333333332\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"541.6315789473683\" cy=\"119.58283333333334\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"577.5263157894736\" cy=\"108.11466666666665\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"613.421052631579\" cy=\"91.06383333333335\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"649.3157894736842\" cy=\"95.01383333333335\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"685.2105263157894\" cy=\"91.06383333333335\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"721.1052631578947\" cy=\"91.06383333333335\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n <circle r=\"3\" name=\"Extreme\" stroke-width=\"1\" stroke=\"#b23672 \" fill=\"#fff\" width=\"682\" height=\"158\" cx=\"757\" cy=\"91.06383333333335\" class=\"recharts-dot recharts-line-dot\">\n </circle>\n </g>\n </g>\n <g class=\"recharts-layer recharts-reference-line\">\n <line x=\"03:30\" stroke=\"#f19588 \" fill=\"none\" fill-opacity=\"1\" stroke-width=\"1\" x1=\"577.5263157894736\" y1=\"173\" x2=\"577.5263157894736\" y2=\"15\" class=\"recharts-reference-line-line\">\n </line>\n <text x=\"582.5263157894736\" y=\"30\" fill=\"gray\" text-anchor=\"right\">Now</text>\n </g>\n <g class=\"recharts-layer recharts-brush\" style=\"user-select: none;\">\n <rect stroke=\"#a7afbb \" fill=\"#fff\" x=\"75\" y=\"233\" width=\"682\" height=\"20\">\n </rect>\n <rect class=\"recharts-brush-slide\" stroke=\"none\" fill=\"#a7afbb \" fill-opacity=\"0.2\" x=\"80.00000000000006\" y=\"233\" width=\"672\" height=\"20\" style=\"cursor: move;\">\n </rect>\n <g class=\"recharts-layer recharts-brush-traveller\" tabindex=\"0\" role=\"slider\" aria-label=\"Min value: undefined, Max value: undefined\" aria-valuenow=\"75.00000000000006\" style=\"cursor: col-resize;\">\n <rect x=\"75.00000000000006\" y=\"233\" width=\"5\" height=\"20\" fill=\"#a7afbb \" stroke=\"none\">\n </rect>\n <line x1=\"76.00000000000006\" y1=\"242\" x2=\"79.00000000000006\" y2=\"242\" fill=\"none\" stroke=\"#fff\">\n </line>\n <line x1=\"76.00000000000006\" y1=\"244\" x2=\"79.00000000000006\" y2=\"244\" fill=\"none\" stroke=\"#fff\">\n </line>\n </g>\n <g class=\"recharts-layer recharts-brush-traveller\" tabindex=\"0\" role=\"slider\" aria-label=\"Min value: undefined, Max value: undefined\" aria-valuenow=\"752\" style=\"cursor: col-resize;\">\n <rect x=\"752\" y=\"233\" width=\"5\" height=\"20\" fill=\"#a7afbb \" stroke=\"none\">\n </rect>\n <line x1=\"753\" y1=\"242\" x2=\"756\" y2=\"242\" fill=\"none\" stroke=\"#fff\">\n </line>\n <line x1=\"753\" y1=\"244\" x2=\"756\" y2=\"244\" fill=\"none\" stroke=\"#fff\">\n </line>\n </g>\n </g>\n </svg>\n <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 15px; top: 15px;\">\n <ul class=\"list-style-none padding-left-20\">\n <li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \">\n <span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(103, 171, 197);\">\n </span>\n <span class=\"text-color-darker text-capitalize-first-word\">Nominal</span>\n </li>\n <li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \">\n <span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(161, 218, 163);\">\n </span>\n <span class=\"text-color-darker text-capitalize-first-word\">Moderate</span>\n </li>\n <li class=\"cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 \">\n <span class=\"rioglyph rioglyph-sphere\" style=\"color: rgb(178, 54, 114);\">\n </span>\n <span class=\"text-color-darker text-capitalize-first-word\">Extreme</span>\n </li>\n </ul>\n </div>\n <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(75px, 15px);\">\n <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>"
755
- },
756
- {
757
- "label": "Props",
758
- "language": "json",
759
- "code": null,
760
- "props": [
761
- {
762
- "heading": "LineChart",
763
- "rows": [
764
- {
765
- "name": "width",
766
- "type": "Number",
767
- "default": "",
768
- "description": "The width of chart container."
769
- },
770
- {
771
- "name": "height",
772
- "type": "Number",
773
- "default": "",
774
- "description": "The height of chart container."
775
- },
776
- {
777
- "name": "data",
778
- "type": "Array",
779
- "default": "",
780
- "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
781
- },
782
- {
783
- "name": "dataKey",
784
- "type": "String | Number | Function",
785
- "default": "value",
786
- "description": "The key of data displayed in the axis. Also, used as label for the x-axis."
787
- },
788
- {
789
- "name": "dataUnit",
790
- "type": "string",
791
- "default": "",
792
- "description": "The unit of data displayed in the chart."
793
- },
794
- {
795
- "name": "showGrid",
796
- "type": "Boolean",
797
- "default": "false",
798
- "description": "Defines whether or not the grid shall be rendered."
799
- },
800
- {
801
- "name": "showXAxis",
802
- "type": "Boolean",
803
- "default": "true",
804
- "description": "Defines whether or not the x-axis shall be rendered."
805
- },
806
- {
807
- "name": "showYAxis",
808
- "type": "Boolean",
809
- "default": "false",
810
- "description": "Defines whether or not the y-axis shall be rendered."
811
- },
812
- {
813
- "name": "xAxisOptions",
814
- "type": "Object",
815
- "default": "",
816
- "description": "Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis"
817
- },
818
- {
819
- "name": "yAxisOptions",
820
- "type": "Object",
821
- "default": "",
822
- "description": "Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis"
823
- },
824
- {
825
- "name": "additionalAxes",
826
- "type": "React.ReactElement<XAxisProps | YAxisProps>[]",
827
- "default": "",
828
- "description": "Render a list of additional axes. This includes YAxis and XAxis."
829
- },
830
- {
831
- "name": "gridOptions",
832
- "type": "Object",
833
- "default": "",
834
- "description": "Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid"
835
- },
836
- {
837
- "name": "containerOptions",
838
- "type": "Object",
839
- "default": "",
840
- "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
841
- },
842
- {
843
- "name": "brush",
844
- "type": "Boolean",
845
- "default": "false",
846
- "description": "Defines whether or not the brush component shall be used."
847
- },
848
- {
849
- "name": "tooltip",
850
- "type": "ChartTooltip | Boolean",
851
- "default": "",
852
- "description": "Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor"
853
- },
854
- {
855
- "name": "legend",
856
- "type": "Legend | Boolean",
857
- "default": "false",
858
- "description": "Shows the provided Legend component otherwise shows nothing."
859
- },
860
- {
861
- "name": "lines",
862
- "type": "Array of Line",
863
- "default": "[]",
864
- "description": "Renders the provided Line components."
865
- },
866
- {
867
- "name": "...",
868
- "type": "",
869
- "default": "",
870
- "description": "Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart"
871
- }
872
- ]
873
- },
874
- {
875
- "heading": "Line",
876
- "rows": [
877
- {
878
- "name": "strokeColor",
879
- "type": "String",
880
- "default": "color-coldplay-fountain",
881
- "description": "Defines the color for the line. Take the color name from the charts colors page."
882
- },
883
- {
884
- "name": "dataKey",
885
- "type": "string | number | ((obj: T) => any)",
886
- "default": "value",
887
- "description": "The key of data used for the line."
888
- },
889
- {
890
- "name": "dataUnit",
891
- "type": "String | Number",
892
- "default": "",
893
- "description": "The unit of data displayed for the line."
894
- },
895
- {
896
- "name": "legendType",
897
- "type": "String",
898
- "default": "square",
899
- "description": "The type of icon in legend. If set to \"none\", no legend item will be rendered."
900
- },
901
- {
902
- "name": "type",
903
- "type": "String",
904
- "default": "monotone",
905
- "description": "The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area."
906
- },
907
- {
908
- "name": "isAnimationActive",
909
- "type": "Boolean",
910
- "default": "true",
911
- "description": "If set false, animation of line will be disabled."
912
- },
913
- {
914
- "name": "...",
915
- "type": "",
916
- "default": "",
917
- "description": "Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line"
918
- }
919
- ]
920
- },
921
- {
922
- "heading": "ReferenceLine",
923
- "rows": [
924
- {
925
- "name": "stroke",
926
- "type": "String",
927
- "default": "color-coldplay-fountain",
928
- "description": "Defines the color for the line. Take the color name from the charts colors page."
929
- },
930
- {
931
- "name": "...",
932
- "type": "",
933
- "default": "",
934
- "description": "Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine"
935
- }
936
- ]
937
- },
938
- {
939
- "heading": "Legend",
940
- "rows": [
941
- {
942
- "name": "iconType",
943
- "type": "String",
944
- "default": "square",
945
- "description": "Defines the type of the leading icon."
946
- },
947
- {
948
- "name": "iconSize",
949
- "type": "String",
950
- "default": "12",
951
- "description": "Defines the size of the leading icon."
952
- },
953
- {
954
- "name": "layout",
955
- "type": "String",
956
- "default": "vertical",
957
- "description": "Defines the layout of the legend."
958
- },
959
- {
960
- "name": "align",
961
- "type": "String",
962
- "default": "right",
963
- "description": "Defines the alignment of the legend relative to the chart."
964
- },
965
- {
966
- "name": "verticalAlign",
967
- "type": "String",
968
- "default": "top",
969
- "description": "Defines the vertical alignment of the legend relative to the chart."
970
- },
971
- {
972
- "name": "...",
973
- "type": "",
974
- "default": "",
975
- "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
976
- }
977
- ]
978
- }
979
- ]
980
- }
981
- ]
982
- }
983
- ]
984
- }
985
- ],
986
- "see_also": []
987
- }