@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/areacharts.json

@@ -0,0 +1,563 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:18.748Z",
+    "source": "https://uikit.developers.rio.cloud/#components/areaCharts",
+    "category": "Components",
+    "section": "Charts",
+    "slug": "components/areacharts",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "499a45166d41ea3ea2e724403f1f035c640503c562c24d3de6dd9e2876a84e49"
+  },
+  "title": "AreaChart",
+  "lead": null,
+  "content": [
+    {
+      "heading": "AreaChart",
+      "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.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Simple AreaChart</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><defs><linearGradient id=\"area\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"5%\" stop-color=\"#67abc5 \" stop-opacity=\"0.8\"></stop><stop offset=\"95%\" stop-color=\"#67abc5 \" stop-opacity=\"0\"></stop></linearGradient></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-area\"><g class=\"recharts-layer\"><defs><clipPath id=\"animationClipPath-recharts-area-3\"><rect x=\"45\" y=\"0\" width=\"0\" height=\"124\"></rect></clipPath></defs><g class=\"recharts-layer\" clip-path=\"url(#animationClipPath-recharts-area-3)\"><g class=\"recharts-layer\"><path fill=\"url(#area)\" fill-opacity=\"0.6\" width=\"438\" height=\"108\" stroke=\"none\" class=\"recharts-curve recharts-area-area\" 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.3L423,123C402,123,381,123,360,123C339,123,318,123,297,123C276,123,255,123,234,123C213,123,192,123,171,123C150,123,129,123,108,123C87,123,66,123,45,123Z\"></path><path stroke=\"#67abc5 \" fill=\"none\" fill-opacity=\"0.6\" width=\"438\" height=\"108\" class=\"recharts-curve recharts-area-curve\" 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></g></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>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import AreaChart from '@rio-cloud/rio-uikit/AreaChart';\nimport Area from '@rio-cloud/rio-uikit/Area';\n\ntype CustomData = {\n    name: string;\n    value: number;\n};\n\nexport default () => {\n    return (\n        <>\n            <label>Simple AreaChart</label>\n            <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>\n                <AreaChart\n                    data={data}\n                    dataKey={(entry: CustomData) => entry.name}\n                    xAxisOptions={{ padding: { left: 30, right: 30 } }}\n                    areas={[<Area key='area' 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];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Simple AreaChart</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                <defs>\n                    <linearGradient id=\"area\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop offset=\"5%\" stop-color=\"#67abc5 \" stop-opacity=\"0.8\">\n                        </stop>\n                        <stop offset=\"95%\" stop-color=\"#67abc5 \" stop-opacity=\"0\">\n                        </stop>\n                    </linearGradient>\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-area\">\n                    <g class=\"recharts-layer\">\n                        <defs>\n                            <clipPath id=\"animationClipPath-recharts-area-3\">\n                                <rect x=\"45\" y=\"0\" width=\"83.36007275312578\" height=\"124\">\n                                </rect>\n                            </clipPath>\n                        </defs>\n                        <g class=\"recharts-layer\" clip-path=\"url(#animationClipPath-recharts-area-3)\">\n                            <g class=\"recharts-layer\">\n                                <path fill=\"url(#area)\" fill-opacity=\"0.6\" width=\"438\" height=\"108\" stroke=\"none\" class=\"recharts-curve recharts-area-area\" 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.3L423,123C402,123,381,123,360,123C339,123,318,123,297,123C276,123,255,123,234,123C213,123,192,123,171,123C150,123,129,123,108,123C87,123,66,123,45,123Z\">\n                                </path>\n                                <path stroke=\"#67abc5 \" fill=\"none\" fill-opacity=\"0.6\" width=\"438\" height=\"108\" class=\"recharts-curve recharts-area-curve\" 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>\n                    </g>\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>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "AreaChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "name": "data",
+                      "type": "Array",
+                      "default": "",
+                      "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\" }]"
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "String | Number | Function",
+                      "default": "value",
+                      "description": "The key of data displayed in the axis. Also, used as label for the x-axis."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "string",
+                      "default": "",
+                      "description": "The unit of data displayed in the chart."
+                    },
+                    {
+                      "name": "showGrid",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the grid shall be rendered."
+                    },
+                    {
+                      "name": "showXAxis",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether or not the x-axis shall be rendered."
+                    },
+                    {
+                      "name": "showYAxis",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the y-axis shall be rendered."
+                    },
+                    {
+                      "name": "xAxisOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis"
+                    },
+                    {
+                      "name": "yAxisOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis"
+                    },
+                    {
+                      "name": "additionalAxes",
+                      "type": "React.ReactElement<XAxisProps | YAxisProps>[]",
+                      "default": "",
+                      "description": "Render a list of additional axes. This includes YAxis and XAxis."
+                    },
+                    {
+                      "name": "gridOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid"
+                    },
+                    {
+                      "name": "containerOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
+                    },
+                    {
+                      "name": "brush",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the brush component shall be used."
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "ChartTooltip | Boolean",
+                      "default": "",
+                      "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"
+                    },
+                    {
+                      "name": "legend",
+                      "type": "Legend | Boolean",
+                      "default": "false",
+                      "description": "Shows the provided Legend component otherwise shows nothing."
+                    },
+                    {
+                      "name": "areas",
+                      "type": "Array of Area",
+                      "default": "[]",
+                      "description": "Renders the provided Area components."
+                    },
+                    {
+                      "name": "gradients",
+                      "type": "Array of AreaGradient",
+                      "default": "[]",
+                      "description": "Renders the provided gradient components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying AreaChart component. Details can be found here: https://recharts.org/en-US/api/AreaChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Area",
+                  "rows": [
+                    {
+                      "name": "strokeColor",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the area component. Take the color name from the charts colors page."
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "string | number | ((obj: T) => any)",
+                      "default": "value",
+                      "description": "The key of data used for the area."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String / Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the area."
+                    },
+                    {
+                      "name": "gradientId",
+                      "type": "String",
+                      "default": "areaGradient",
+                      "description": "The id of the corresponding gradient component used in the chart."
+                    },
+                    {
+                      "name": "legendType",
+                      "type": "String",
+                      "default": "square",
+                      "description": "The type of icon in legend. If set to \"none\", no legend item will be rendered."
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "monotone",
+                      "description": "The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area."
+                    },
+                    {
+                      "name": "isAnimationActive",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "If set false, animation of line will be disabled."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Area component. Details can be found here: https://recharts.org/en-US/api/Area"
+                    }
+                  ]
+                },
+                {
+                  "heading": "AreaGradient",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "areaGradient",
+                      "description": "The id of the gradient referenced by the area component that it is used for."
+                    },
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the gradient component. Take the color name from the charts colors page."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ReferenceLine",
+                  "rows": [
+                    {
+                      "name": "stroke",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the line. Take the color name from the charts colors page."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Legend",
+                  "rows": [
+                    {
+                      "name": "iconType",
+                      "type": "String",
+                      "default": "square",
+                      "description": "Defines the type of the leading icon."
+                    },
+                    {
+                      "name": "iconSize",
+                      "type": "String",
+                      "default": "12",
+                      "description": "Defines the size of the leading icon."
+                    },
+                    {
+                      "name": "layout",
+                      "type": "String",
+                      "default": "vertical",
+                      "description": "Defines the layout of the legend."
+                    },
+                    {
+                      "name": "align",
+                      "type": "String",
+                      "default": "right",
+                      "description": "Defines the alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "verticalAlign",
+                      "type": "String",
+                      "default": "top",
+                      "description": "Defines the vertical alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Multiple Areas in an AreaChart</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=\"recharts4-clip\"><rect x=\"75\" y=\"15\" height=\"208\" width=\"712\"></rect></clipPath></defs><defs><linearGradient id=\"area1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"5%\" stop-color=\"#493d6d \" stop-opacity=\"0.8\"></stop><stop offset=\"95%\" stop-color=\"#493d6d \" stop-opacity=\"0\"></stop></linearGradient><linearGradient id=\"area2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"5%\" stop-color=\"#f19588 \" stop-opacity=\"0.8\"></stop><stop offset=\"95%\" stop-color=\"#f19588 \" stop-opacity=\"0\"></stop></linearGradient></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=\"712\" height=\"208\" x1=\"75\" y1=\"223\" x2=\"787\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"171\" x2=\"787\" y2=\"171\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"119\" x2=\"787\" y2=\"119\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"67\" x2=\"787\" y2=\"67\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"15\" x2=\"787\" y2=\"15\"></line></g><g class=\"recharts-cartesian-grid-vertical\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"193.66666666666669\" y1=\"15\" x2=\"193.66666666666669\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"312.33333333333337\" y1=\"15\" x2=\"312.33333333333337\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"431\" y1=\"15\" x2=\"431\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"549.6666666666667\" y1=\"15\" x2=\"549.6666666666667\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"668.3333333333334\" y1=\"15\" x2=\"668.3333333333334\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"787\" y1=\"15\" x2=\"787\" y2=\"223\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"223\" x2=\"787\" y2=\"223\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"229\" x2=\"75\" y2=\"223\"></line><text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"75\" y=\"231\" 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=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"193.66666666666669\" y1=\"229\" x2=\"193.66666666666669\" y2=\"223\"></line><text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"193.66666666666669\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"193.66666666666669\" dy=\"0.71em\">Page B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"312.33333333333337\" y1=\"229\" x2=\"312.33333333333337\" y2=\"223\"></line><text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"312.33333333333337\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"312.33333333333337\" dy=\"0.71em\">Page C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"431\" y1=\"229\" x2=\"431\" y2=\"223\"></line><text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"431\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"431\" dy=\"0.71em\">Page D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"549.6666666666667\" y1=\"229\" x2=\"549.6666666666667\" y2=\"223\"></line><text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"549.6666666666667\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"549.6666666666667\" dy=\"0.71em\">Page E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"668.3333333333334\" y1=\"229\" x2=\"668.3333333333334\" y2=\"223\"></line><text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"668.3333333333334\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"668.3333333333334\" dy=\"0.71em\">Page F</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"787\" y1=\"229\" x2=\"787\" y2=\"223\"></line><text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"787\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"787\" 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=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"223\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"223\" x2=\"75\" y2=\"223\"></line><text orientation=\"left\" width=\"60\" height=\"208\" stroke=\"none\" x=\"67\" y=\"223\" 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=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"171\" x2=\"75\" y2=\"171\"></line><text orientation=\"left\" width=\"60\" height=\"208\" stroke=\"none\" x=\"67\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">900</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"119\" x2=\"75\" y2=\"119\"></line><text orientation=\"left\" width=\"60\" height=\"208\" stroke=\"none\" x=\"67\" y=\"119\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">1800</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"67\" x2=\"75\" y2=\"67\"></line><text orientation=\"left\" width=\"60\" height=\"208\" stroke=\"none\" x=\"67\" y=\"67\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"67\" dy=\"0.355em\">2700</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"208\" 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=\"208\" 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\">3600</tspan></text></g></g></g><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer\"><defs><clipPath id=\"animationClipPath-recharts-area-7\"><rect x=\"75\" y=\"0\" width=\"0\" height=\"224\"></rect></clipPath></defs><g class=\"recharts-layer\" clip-path=\"url(#animationClipPath-recharts-area-7)\"><g class=\"recharts-layer\"><path name=\"UV\" fill-opacity=\"0.5\" fill=\"url(#area1)\" width=\"712\" height=\"208\" stroke=\"none\" class=\"recharts-curve recharts-area-area\" d=\"M75,38.111C114.556,40.037,154.111,41.963,193.667,49.667C233.222,57.37,272.778,107.444,312.333,107.444C351.889,107.444,391.444,62.378,431,62.378C470.556,62.378,510.111,113.8,549.667,113.8C589.222,113.8,628.778,100.319,668.333,84.911C707.889,69.504,747.444,45.43,787,21.356L787,223C747.444,223,707.889,223,668.333,223C628.778,223,589.222,223,549.667,223C510.111,223,470.556,223,431,223C391.444,223,351.889,223,312.333,223C272.778,223,233.222,223,193.667,223C154.111,223,114.556,223,75,223Z\"></path><path name=\"UV\" fill-opacity=\"0.5\" stroke=\"#493d6d \" fill=\"none\" width=\"712\" height=\"208\" class=\"recharts-curve recharts-area-curve\" d=\"M75,38.111C114.556,40.037,154.111,41.963,193.667,49.667C233.222,57.37,272.778,107.444,312.333,107.444C351.889,107.444,391.444,62.378,431,62.378C470.556,62.378,510.111,113.8,549.667,113.8C589.222,113.8,628.778,100.319,668.333,84.911C707.889,69.504,747.444,45.43,787,21.356\"></path></g></g></g></g><g class=\"recharts-layer recharts-area\"><g class=\"recharts-layer\"><defs><clipPath id=\"animationClipPath-recharts-area-8\"><rect x=\"75\" y=\"0\" width=\"0\" height=\"224\"></rect></clipPath></defs><g class=\"recharts-layer\" clip-path=\"url(#animationClipPath-recharts-area-8)\"><g class=\"recharts-layer\"><path name=\"AMT\" fill-opacity=\"0.5\" fill=\"url(#area2)\" width=\"712\" height=\"208\" stroke=\"none\" class=\"recharts-curve recharts-area-area\" d=\"M75,84.333C114.556,89.822,154.111,95.311,193.667,95.311C233.222,95.311,272.778,90.689,312.333,90.689C351.889,90.689,391.444,107.444,431,107.444C470.556,107.444,510.111,101.801,549.667,96.987C589.222,92.172,628.778,78.556,668.333,78.556C707.889,78.556,747.444,90.111,787,101.667L787,223C747.444,223,707.889,223,668.333,223C628.778,223,589.222,223,549.667,223C510.111,223,470.556,223,431,223C391.444,223,351.889,223,312.333,223C272.778,223,233.222,223,193.667,223C154.111,223,114.556,223,75,223Z\"></path><path name=\"AMT\" fill-opacity=\"0.5\" stroke=\"#f19588 \" fill=\"none\" width=\"712\" height=\"208\" class=\"recharts-curve recharts-area-curve\" d=\"M75,84.333C114.556,89.822,154.111,95.311,193.667,95.311C233.222,95.311,272.778,90.689,312.333,90.689C351.889,90.689,391.444,107.444,431,107.444C470.556,107.444,510.111,101.801,549.667,96.987C589.222,92.172,628.778,78.556,668.333,78.556C707.889,78.556,747.444,90.111,787,101.667\"></path></g></g></g></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=\"75\" y1=\"20.777777777777782\" x2=\"787\" y2=\"20.777777777777782\" class=\"recharts-reference-line-line\"></line><text offset=\"5\" x=\"431\" y=\"20.777777777777782\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\"><tspan x=\"431\" dy=\"0.355em\">Max</tspan></text></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(73, 61, 109);\"></span><span class=\"text-color-darker text-capitalize-first-word\">UV</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(241, 149, 136);\"></span><span class=\"text-color-darker text-capitalize-first-word\">AMT</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>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport AreaChart from '@rio-cloud/rio-uikit/AreaChart';\nimport Area from '@rio-cloud/rio-uikit/Area';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\nimport ReferenceLine from '@rio-cloud/rio-uikit/ReferenceLine';\n\ntype CustomData = {\n    name: string;\n    uv: number;\n    pv: number;\n    amt: number;\n};\n\nexport default () => {\n    const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n    const handleLegendMouseEnter = (dataKey: string) => setHighlightedArea(dataKey);\n    const handleLegendMouseLeave = () => setHighlightedArea(null);\n\n    return (\n        <>\n            <label>Multiple Areas in an AreaChart</label>\n            <div className='panel panel-default panel-body margin-bottom-0 height-300'>\n                <AreaChart\n                    data={data}\n                    dataKey={(entry: CustomData) => entry.name}\n                    showYAxis\n                    showGrid\n                    legend={\n                        <Legend\n                            content={\n                                <CustomLegend\n                                    highlightedArea={highlightedArea}\n                                    onMouseEnter={handleLegendMouseEnter}\n                                    onMouseLeave={handleLegendMouseLeave}\n                                />\n                            }\n                        />\n                    }\n                    areas={[\n                        <Area\n                            key='area1'\n                            name='UV'\n                            dataKey='uv'\n                            strokeColor='color-warmup-victoria'\n                            fillOpacity={highlightedArea === 'uv' || !highlightedArea ? 0.5 : 0.1}\n                        />,\n                        <Area\n                            key='area2'\n                            name='AMT'\n                            dataKey='amt'\n                            strokeColor='color-warmup-salmon'\n                            fillOpacity={highlightedArea === 'amt' || !highlightedArea ? 0.5 : 0.1}\n                        />,\n                    ]}\n                    referenceLines={[\n                        <ReferenceLine\n                            key='y'\n                            y={3500}\n                            stroke='color-warmup-salmon'\n                            strokeDasharray='3 3'\n                            label='Max'\n                        />,\n                    ]}\n                />\n            </div>\n        </>\n    );\n};\n\ntype CustomLegendProps = {\n    payload?: { dataKey: string; value: string; color: string }[];\n    highlightedArea: string | null;\n    onMouseEnter: (dataKey: string) => void;\n    onMouseLeave: () => void;\n};\n\nconst CustomLegend = ({ payload, highlightedArea, 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 ${highlightedArea === 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        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];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Multiple Areas in an AreaChart</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=\"recharts4-clip\">\n                        <rect x=\"75\" y=\"15\" height=\"208\" width=\"712\">\n                        </rect>\n                    </clipPath>\n                </defs>\n                <defs>\n                    <linearGradient id=\"area1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop offset=\"5%\" stop-color=\"#493d6d \" stop-opacity=\"0.8\">\n                        </stop>\n                        <stop offset=\"95%\" stop-color=\"#493d6d \" stop-opacity=\"0\">\n                        </stop>\n                    </linearGradient>\n                    <linearGradient id=\"area2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop offset=\"5%\" stop-color=\"#f19588 \" stop-opacity=\"0.8\">\n                        </stop>\n                        <stop offset=\"95%\" stop-color=\"#f19588 \" stop-opacity=\"0\">\n                        </stop>\n                    </linearGradient>\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=\"712\" height=\"208\" x1=\"75\" y1=\"223\" x2=\"787\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"171\" x2=\"787\" y2=\"171\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"119\" x2=\"787\" y2=\"119\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"67\" x2=\"787\" y2=\"67\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"75\" y1=\"15\" x2=\"787\" 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=\"712\" height=\"208\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"193.66666666666669\" y1=\"15\" x2=\"193.66666666666669\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"312.33333333333337\" y1=\"15\" x2=\"312.33333333333337\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"431\" y1=\"15\" x2=\"431\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"549.6666666666667\" y1=\"15\" x2=\"549.6666666666667\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"668.3333333333334\" y1=\"15\" x2=\"668.3333333333334\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"75\" y=\"15\" width=\"712\" height=\"208\" x1=\"787\" y1=\"15\" x2=\"787\" y2=\"223\">\n                        </line>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"223\" x2=\"787\" y2=\"223\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"229\" x2=\"75\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"75\" y=\"231\" 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=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"193.66666666666669\" y1=\"229\" x2=\"193.66666666666669\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"193.66666666666669\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"193.66666666666669\" dy=\"0.71em\">Page B</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"312.33333333333337\" y1=\"229\" x2=\"312.33333333333337\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"312.33333333333337\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"312.33333333333337\" dy=\"0.71em\">Page C</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"431\" y1=\"229\" x2=\"431\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"431\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"431\" dy=\"0.71em\">Page D</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"549.6666666666667\" y1=\"229\" x2=\"549.6666666666667\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"549.6666666666667\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"549.6666666666667\" dy=\"0.71em\">Page E</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"668.3333333333334\" y1=\"229\" x2=\"668.3333333333334\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"668.3333333333334\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"668.3333333333334\" dy=\"0.71em\">Page F</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"712\" height=\"30\" x=\"75\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"787\" y1=\"229\" x2=\"787\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"712\" height=\"30\" stroke=\"none\" x=\"787\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"787\" 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=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"75\" y1=\"15\" x2=\"75\" y2=\"223\">\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=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"223\" x2=\"75\" y2=\"223\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"208\" stroke=\"none\" x=\"67\" y=\"223\" 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=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"171\" x2=\"75\" y2=\"171\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"208\" stroke=\"none\" x=\"67\" y=\"171\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"67\" dy=\"0.355em\">900</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"60\" height=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"119\" x2=\"75\" y2=\"119\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"208\" stroke=\"none\" x=\"67\" y=\"119\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"67\" dy=\"0.355em\">1800</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"60\" height=\"208\" x=\"15\" y=\"15\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"69\" y1=\"67\" x2=\"75\" y2=\"67\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"208\" stroke=\"none\" x=\"67\" y=\"67\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"67\" dy=\"0.355em\">2700</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"60\" height=\"208\" 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=\"208\" 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\">3600</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-area\">\n                    <g class=\"recharts-layer\">\n                        <defs>\n                            <clipPath id=\"animationClipPath-recharts-area-7\">\n                                <rect x=\"75\" y=\"0\" width=\"673.2266855450601\" height=\"224\">\n                                </rect>\n                            </clipPath>\n                        </defs>\n                        <g class=\"recharts-layer\" clip-path=\"url(#animationClipPath-recharts-area-7)\">\n                            <g class=\"recharts-layer\">\n                                <path name=\"UV\" fill-opacity=\"0.5\" fill=\"url(#area1)\" width=\"712\" height=\"208\" stroke=\"none\" class=\"recharts-curve recharts-area-area\" d=\"M75,38.111C114.556,40.037,154.111,41.963,193.667,49.667C233.222,57.37,272.778,107.444,312.333,107.444C351.889,107.444,391.444,62.378,431,62.378C470.556,62.378,510.111,113.8,549.667,113.8C589.222,113.8,628.778,100.319,668.333,84.911C707.889,69.504,747.444,45.43,787,21.356L787,223C747.444,223,707.889,223,668.333,223C628.778,223,589.222,223,549.667,223C510.111,223,470.556,223,431,223C391.444,223,351.889,223,312.333,223C272.778,223,233.222,223,193.667,223C154.111,223,114.556,223,75,223Z\">\n                                </path>\n                                <path name=\"UV\" fill-opacity=\"0.5\" stroke=\"#493d6d \" fill=\"none\" width=\"712\" height=\"208\" class=\"recharts-curve recharts-area-curve\" d=\"M75,38.111C114.556,40.037,154.111,41.963,193.667,49.667C233.222,57.37,272.778,107.444,312.333,107.444C351.889,107.444,391.444,62.378,431,62.378C470.556,62.378,510.111,113.8,549.667,113.8C589.222,113.8,628.778,100.319,668.333,84.911C707.889,69.504,747.444,45.43,787,21.356\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-area\">\n                    <g class=\"recharts-layer\">\n                        <defs>\n                            <clipPath id=\"animationClipPath-recharts-area-8\">\n                                <rect x=\"75\" y=\"0\" width=\"673.2266855450601\" height=\"224\">\n                                </rect>\n                            </clipPath>\n                        </defs>\n                        <g class=\"recharts-layer\" clip-path=\"url(#animationClipPath-recharts-area-8)\">\n                            <g class=\"recharts-layer\">\n                                <path name=\"AMT\" fill-opacity=\"0.5\" fill=\"url(#area2)\" width=\"712\" height=\"208\" stroke=\"none\" class=\"recharts-curve recharts-area-area\" d=\"M75,84.333C114.556,89.822,154.111,95.311,193.667,95.311C233.222,95.311,272.778,90.689,312.333,90.689C351.889,90.689,391.444,107.444,431,107.444C470.556,107.444,510.111,101.801,549.667,96.987C589.222,92.172,628.778,78.556,668.333,78.556C707.889,78.556,747.444,90.111,787,101.667L787,223C747.444,223,707.889,223,668.333,223C628.778,223,589.222,223,549.667,223C510.111,223,470.556,223,431,223C391.444,223,351.889,223,312.333,223C272.778,223,233.222,223,193.667,223C154.111,223,114.556,223,75,223Z\">\n                                </path>\n                                <path name=\"AMT\" fill-opacity=\"0.5\" stroke=\"#f19588 \" fill=\"none\" width=\"712\" height=\"208\" class=\"recharts-curve recharts-area-curve\" d=\"M75,84.333C114.556,89.822,154.111,95.311,193.667,95.311C233.222,95.311,272.778,90.689,312.333,90.689C351.889,90.689,391.444,107.444,431,107.444C470.556,107.444,510.111,101.801,549.667,96.987C589.222,92.172,628.778,78.556,668.333,78.556C707.889,78.556,747.444,90.111,787,101.667\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\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=\"75\" y1=\"20.777777777777782\" x2=\"787\" y2=\"20.777777777777782\" class=\"recharts-reference-line-line\">\n                    </line>\n                    <text offset=\"5\" x=\"431\" y=\"20.777777777777782\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                        <tspan x=\"431\" dy=\"0.355em\">Max</tspan>\n                    </text>\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(73, 61, 109);\">\n                        </span>\n                        <span class=\"text-color-darker text-capitalize-first-word\">UV</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(241, 149, 136);\">\n                        </span>\n                        <span class=\"text-color-darker text-capitalize-first-word\">AMT</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>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "AreaChart",
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The width of chart container."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The height of chart container."
+                    },
+                    {
+                      "name": "data",
+                      "type": "Array",
+                      "default": "",
+                      "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\" }]"
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "String | Number | Function",
+                      "default": "value",
+                      "description": "The key of data displayed in the axis. Also, used as label for the x-axis."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "string",
+                      "default": "",
+                      "description": "The unit of data displayed in the chart."
+                    },
+                    {
+                      "name": "showGrid",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the grid shall be rendered."
+                    },
+                    {
+                      "name": "showXAxis",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether or not the x-axis shall be rendered."
+                    },
+                    {
+                      "name": "showYAxis",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the y-axis shall be rendered."
+                    },
+                    {
+                      "name": "xAxisOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis"
+                    },
+                    {
+                      "name": "yAxisOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis"
+                    },
+                    {
+                      "name": "additionalAxes",
+                      "type": "React.ReactElement<XAxisProps | YAxisProps>[]",
+                      "default": "",
+                      "description": "Render a list of additional axes. This includes YAxis and XAxis."
+                    },
+                    {
+                      "name": "gridOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid"
+                    },
+                    {
+                      "name": "containerOptions",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
+                    },
+                    {
+                      "name": "brush",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the brush component shall be used."
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "ChartTooltip | Boolean",
+                      "default": "",
+                      "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"
+                    },
+                    {
+                      "name": "legend",
+                      "type": "Legend | Boolean",
+                      "default": "false",
+                      "description": "Shows the provided Legend component otherwise shows nothing."
+                    },
+                    {
+                      "name": "areas",
+                      "type": "Array of Area",
+                      "default": "[]",
+                      "description": "Renders the provided Area components."
+                    },
+                    {
+                      "name": "gradients",
+                      "type": "Array of AreaGradient",
+                      "default": "[]",
+                      "description": "Renders the provided gradient components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying AreaChart component. Details can be found here: https://recharts.org/en-US/api/AreaChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Area",
+                  "rows": [
+                    {
+                      "name": "strokeColor",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the area component. Take the color name from the charts colors page."
+                    },
+                    {
+                      "name": "dataKey",
+                      "type": "string | number | ((obj: T) => any)",
+                      "default": "value",
+                      "description": "The key of data used for the area."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String / Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the area."
+                    },
+                    {
+                      "name": "gradientId",
+                      "type": "String",
+                      "default": "areaGradient",
+                      "description": "The id of the corresponding gradient component used in the chart."
+                    },
+                    {
+                      "name": "legendType",
+                      "type": "String",
+                      "default": "square",
+                      "description": "The type of icon in legend. If set to \"none\", no legend item will be rendered."
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "monotone",
+                      "description": "The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area."
+                    },
+                    {
+                      "name": "isAnimationActive",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "If set false, animation of line will be disabled."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Area component. Details can be found here: https://recharts.org/en-US/api/Area"
+                    }
+                  ]
+                },
+                {
+                  "heading": "AreaGradient",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "areaGradient",
+                      "description": "The id of the gradient referenced by the area component that it is used for."
+                    },
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the gradient component. Take the color name from the charts colors page."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ReferenceLine",
+                  "rows": [
+                    {
+                      "name": "stroke",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the line. Take the color name from the charts colors page."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Legend",
+                  "rows": [
+                    {
+                      "name": "iconType",
+                      "type": "String",
+                      "default": "square",
+                      "description": "Defines the type of the leading icon."
+                    },
+                    {
+                      "name": "iconSize",
+                      "type": "String",
+                      "default": "12",
+                      "description": "Defines the size of the leading icon."
+                    },
+                    {
+                      "name": "layout",
+                      "type": "String",
+                      "default": "vertical",
+                      "description": "Defines the layout of the legend."
+                    },
+                    {
+                      "name": "align",
+                      "type": "String",
+                      "default": "right",
+                      "description": "Defines the alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "verticalAlign",
+                      "type": "String",
+                      "default": "top",
+                      "description": "Defines the vertical alignment of the legend relative to the chart."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}