@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,1507 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:24.680Z",
+    "source": "https://uikit.developers.rio.cloud/#components/barCharts",
+    "category": "Components",
+    "section": "Charts",
+    "slug": "components/barcharts",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "eb0e4ec7499c92b26563759b70a299394485e3bea7adab0085c701fb3af70504"
+  },
+  "title": "BarChart",
+  "lead": null,
+  "content": [
+    {
+      "heading": "BarChart",
+      "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": "Simple horizontal BarChart",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Simple horizontal BarChart</div><div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts1-clip\"><rect x=\"0\" y=\"0\" height=\"223\" width=\"468\"></rect></clipPath></defs><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"0\" y1=\"223\" x2=\"468\" y2=\"223\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"229\" x2=\"39\" y2=\"223\"></line><text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"39\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"39\" dy=\"0.71em\">January</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"117\" y1=\"229\" x2=\"117\" y2=\"223\"></line><text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"117\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"117\" dy=\"0.71em\">February</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"195\" y1=\"229\" x2=\"195\" y2=\"223\"></line><text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"195\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"195\" dy=\"0.71em\">March</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"273\" y1=\"229\" x2=\"273\" y2=\"223\"></line><text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"273\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"273\" dy=\"0.71em\">April</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"351\" y1=\"229\" x2=\"351\" y2=\"223\"></line><text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"351\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"351\" dy=\"0.71em\">May</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"429\" y1=\"229\" x2=\"429\" y2=\"223\"></line><text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"429\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"429\" dy=\"0.71em\">June</tspan></text></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></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(10px, 10px);\"><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 BarChart from '@rio-cloud/rio-uikit/BarChart';\nimport Bar from '@rio-cloud/rio-uikit/Bar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => {\n    return (\n        <>\n            <FormLabel>Simple horizontal BarChart</FormLabel>\n            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>\n                <BarChart\n                    data={data}\n                    dataKey='label'\n                    xAxisOptions={{ dataKey: 'label' }}\n                    showYAxis={false}\n                    margin={{ bottom: 15 }}\n                    bars={[\n                        <Bar\n                            key='myBar'\n                            dataKey='costs'\n                            unit='€'\n                            color='brand-primary'\n                            radius={[3, 3, 0, 0]}\n                            label={{\n                                position: 'top',\n                                formatter: (value: number) => `${value} €`,\n                            }}\n                        />,\n                    ]}\n                />\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    {\n        label: 'January',\n        costs: 46.8,\n    },\n    {\n        label: 'February',\n        costs: 22.0,\n    },\n    {\n        label: 'March',\n        costs: 12.4,\n    },\n    {\n        label: 'April',\n        costs: 3.88,\n    },\n    {\n        label: 'May',\n        costs: 3.23,\n    },\n    {\n        label: 'June',\n        costs: 4.67,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Simple horizontal BarChart</div>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\">\n            <svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts1-clip\">\n                        <rect x=\"0\" y=\"0\" height=\"223\" width=\"468\">\n                        </rect>\n                    </clipPath>\n                </defs>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"0\" y1=\"223\" x2=\"468\" 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=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"229\" x2=\"39\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"39\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"39\" dy=\"0.71em\">January</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"117\" y1=\"229\" x2=\"117\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"117\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"117\" dy=\"0.71em\">February</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"195\" y1=\"229\" x2=\"195\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"195\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"195\" dy=\"0.71em\">March</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"273\" y1=\"229\" x2=\"273\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"273\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"273\" dy=\"0.71em\">April</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"351\" y1=\"229\" x2=\"351\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"351\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"351\" dy=\"0.71em\">May</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"468\" height=\"30\" x=\"0\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"429\" y1=\"229\" x2=\"429\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"468\" height=\"30\" stroke=\"none\" x=\"429\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"429\" dy=\"0.71em\">June</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"7.8\" y=\"71.0355991202002\" width=\"62\" height=\"151.9644008797998\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M7.8,74.0355991202002A 3,3,0,0,1,10.8,71.0355991202002L 66.8,71.0355991202002A 3,3,0,0,1,\n        69.8,74.0355991202002L 69.8,223L 7.8,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"85.8\" y=\"151.56374317616246\" width=\"62\" height=\"71.43625682383752\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M85.8,154.56374317616246A 3,3,0,0,1,88.8,151.56374317616246L 144.8,151.56374317616246A 3,3,0,0,1,\n        147.8,154.56374317616246L 147.8,223L 85.8,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"163.8\" y=\"182.73592797201886\" width=\"62\" height=\"40.26407202798115\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M163.8,185.73592797201886A 3,3,0,0,1,166.8,182.73592797201886L 222.8,182.73592797201886A 3,3,0,0,1,\n        225.8,185.73592797201886L 225.8,223L 163.8,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"241.8\" y=\"210.40124197834137\" width=\"62\" height=\"12.598758021658625\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M241.8,213.40124197834137A 3,3,0,0,1,244.8,210.40124197834137L 300.8,210.40124197834137A 3,3,0,0,1,\n        303.8,213.40124197834137L 303.8,223L 241.8,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"319.8\" y=\"212.5118586572275\" width=\"62\" height=\"10.488141342772499\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M319.8,215.5118586572275A 3,3,0,0,1,322.8,212.5118586572275L 378.8,212.5118586572275A 3,3,0,0,1,\n        381.8,215.5118586572275L 381.8,223L 319.8,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"397.8\" y=\"207.83603093784905\" width=\"62\" height=\"15.163969062150958\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M397.8,210.83603093784905A 3,3,0,0,1,400.8,207.83603093784905L 456.8,207.83603093784905A 3,3,0,0,1,\n        459.8,210.83603093784905L 459.8,223L 397.8,223Z\">\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(10px, 10px);\">\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": "BarChart",
+                  "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": "layout",
+                      "type": "String",
+                      "default": "horizontal",
+                      "description": "The layout of the chart. Possible values are: horizontal, vertical"
+                    },
+                    {
+                      "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": "true",
+                      "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": "useDataColors",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the color information shall be taken from the data input to use different colors for different entries."
+                    },
+                    {
+                      "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": "bars",
+                      "type": "Array of Bar",
+                      "default": "[]",
+                      "description": "Renders the provided Bar components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Bar",
+                  "rows": [
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the whole bar component instead of individual colors from the data. 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 bar."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the bar."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar"
+                    }
+                  ]
+                },
+                {
+                  "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": "Horizontal BarChart",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Horizontal BarChart</div><div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts4-clip\"><rect x=\"60\" y=\"0\" height=\"223\" width=\"408\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"223\" x2=\"468\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"167.25\" x2=\"468\" y2=\"167.25\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"111.5\" x2=\"468\" y2=\"111.5\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"55.75\" x2=\"468\" y2=\"55.75\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"0\" x2=\"468\" y2=\"0\"></line></g><g class=\"recharts-cartesian-grid-vertical\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"94\" y1=\"0\" x2=\"94\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"162\" y1=\"0\" x2=\"162\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"230\" y1=\"0\" x2=\"230\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"298\" y1=\"0\" x2=\"298\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"366\" y1=\"0\" x2=\"366\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"434\" y1=\"0\" x2=\"434\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"0\" x2=\"60\" y2=\"223\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"468\" y1=\"0\" x2=\"468\" y2=\"223\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"223\" x2=\"468\" y2=\"223\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"94\" y1=\"229\" x2=\"94\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"94\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"94\" dy=\"0.71em\">January</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"162\" y1=\"229\" x2=\"162\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"162\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"162\" dy=\"0.71em\">February</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"230\" y1=\"229\" x2=\"230\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"230\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"230\" dy=\"0.71em\">March</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"298\" y1=\"229\" x2=\"298\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"298\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"298\" dy=\"0.71em\">April</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"366\" y1=\"229\" x2=\"366\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"366\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"366\" dy=\"0.71em\">May</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"434\" y1=\"229\" x2=\"434\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"434\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"434\" dy=\"0.71em\">June</tspan></text></g></g><text offset=\"0\" x=\"264\" y=\"253\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\"><tspan x=\"264\" dy=\"0.71em\">Timerange</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\"><line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"0\" x2=\"60\" y2=\"223\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"223\" x2=\"60\" y2=\"223\"></line><text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"223\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">0 €</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"167.25\" x2=\"60\" y2=\"167.25\"></line><text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"167.25\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">15 €</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"111.5\" x2=\"60\" y2=\"111.5\"></line><text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"111.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">30 €</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"55.75\" x2=\"60\" y2=\"55.75\"></line><text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"55.75\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">45 €</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"0\" x2=\"60\" y2=\"0\"></line><text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">60 €</tspan></text></g></g><text offset=\"5\" transform=\"rotate(-90, 5, 111.5)\" x=\"5\" y=\"111.5\" class=\"recharts-text recharts-label\" text-anchor=\"start\" fill=\"#808080\"><tspan x=\"5\" dy=\"0.355em\">Costs</tspan></text></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></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(60px, 10px);\"><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 BarChart from '@rio-cloud/rio-uikit/BarChart';\nimport Bar from '@rio-cloud/rio-uikit/Bar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => {\n    return (\n        <>\n            <FormLabel>Horizontal BarChart</FormLabel>\n            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>\n                <BarChart\n                    data={data}\n                    dataKey='label'\n                    showGrid\n                    xAxisOptions={{\n                        dataKey: 'label',\n                        label: { value: 'Timerange', offset: 0, position: 'bottom' },\n                    }}\n                    yAxisOptions={{\n                        unit: ' €',\n                        label: { value: 'Costs', angle: -90, position: 'insideLeft' },\n                    }}\n                    margin={{ bottom: 15 }}\n                    bars={[<Bar key='myBar' dataKey='costs' unit='€' radius={[3, 3, 0, 0]} barSize={20} />]}\n                />\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    {\n        label: 'January',\n        costs: 46.8,\n    },\n    {\n        label: 'February',\n        costs: 22.0,\n    },\n    {\n        label: 'March',\n        costs: 12.4,\n    },\n    {\n        label: 'April',\n        costs: 3.88,\n    },\n    {\n        label: 'May',\n        costs: 3.23,\n    },\n    {\n        label: 'June',\n        costs: 4.67,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Horizontal BarChart</div>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\">\n            <svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts4-clip\">\n                        <rect x=\"60\" y=\"0\" height=\"223\" width=\"408\">\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=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"223\" x2=\"468\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"167.25\" x2=\"468\" y2=\"167.25\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"111.5\" x2=\"468\" y2=\"111.5\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"55.75\" x2=\"468\" y2=\"55.75\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"0\" x2=\"468\" y2=\"0\">\n                        </line>\n                    </g>\n                    <g class=\"recharts-cartesian-grid-vertical\">\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"94\" y1=\"0\" x2=\"94\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"162\" y1=\"0\" x2=\"162\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"230\" y1=\"0\" x2=\"230\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"298\" y1=\"0\" x2=\"298\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"366\" y1=\"0\" x2=\"366\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"434\" y1=\"0\" x2=\"434\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"60\" y1=\"0\" x2=\"60\" y2=\"223\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"223\" x1=\"468\" y1=\"0\" x2=\"468\" y2=\"223\">\n                        </line>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"223\" x2=\"468\" 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=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"94\" y1=\"229\" x2=\"94\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"94\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"94\" dy=\"0.71em\">January</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"162\" y1=\"229\" x2=\"162\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"162\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"162\" dy=\"0.71em\">February</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"230\" y1=\"229\" x2=\"230\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"230\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"230\" dy=\"0.71em\">March</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"298\" y1=\"229\" x2=\"298\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"298\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"298\" dy=\"0.71em\">April</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"366\" y1=\"229\" x2=\"366\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"366\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"366\" dy=\"0.71em\">May</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"434\" y1=\"229\" x2=\"434\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"434\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"434\" dy=\"0.71em\">June</tspan>\n                            </text>\n                        </g>\n                    </g>\n                    <text offset=\"0\" x=\"264\" y=\"253\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                        <tspan x=\"264\" dy=\"0.71em\">Timerange</tspan>\n                    </text>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\">\n                    <line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"0\" x2=\"60\" 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=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"223\" x2=\"60\" y2=\"223\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"223\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" 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=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"167.25\" x2=\"60\" y2=\"167.25\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"167.25\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" dy=\"0.355em\">15 €</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"111.5\" x2=\"60\" y2=\"111.5\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"111.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" 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=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"55.75\" x2=\"60\" y2=\"55.75\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"55.75\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" dy=\"0.355em\">45 €</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"60\" height=\"223\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"0\" x2=\"60\" y2=\"0\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"223\" stroke=\"none\" x=\"52\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" dy=\"0.355em\">60 €</tspan>\n                            </text>\n                        </g>\n                    </g>\n                    <text offset=\"5\" transform=\"rotate(-90, 5, 111.5)\" x=\"5\" y=\"111.5\" class=\"recharts-text recharts-label\" text-anchor=\"start\" fill=\"#808080\">\n                        <tspan x=\"5\" dy=\"0.355em\">Costs</tspan>\n                    </text>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"84\" y=\"49.06\" width=\"20\" height=\"173.94\" radius=\"3,3,0,0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M84,52.06A 3,3,0,0,1,87,49.06L 101,49.06A 3,3,0,0,1,\n        104,52.06L 104,223L 84,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"152\" y=\"141.23333333333332\" width=\"20\" height=\"81.76666666666668\" radius=\"3,3,0,0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M152,144.23333333333332A 3,3,0,0,1,155,141.23333333333332L 169,141.23333333333332A 3,3,0,0,1,\n        172,144.23333333333332L 172,223L 152,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"220\" y=\"176.91333333333333\" width=\"20\" height=\"46.08666666666667\" radius=\"3,3,0,0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M220,179.91333333333333A 3,3,0,0,1,223,176.91333333333333L 237,176.91333333333333A 3,3,0,0,1,\n        240,179.91333333333333L 240,223L 220,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"288\" y=\"208.57933333333332\" width=\"20\" height=\"14.420666666666676\" radius=\"3,3,0,0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M288,211.57933333333332A 3,3,0,0,1,291,208.57933333333332L 305,208.57933333333332A 3,3,0,0,1,\n        308,211.57933333333332L 308,223L 288,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"356\" y=\"210.99516666666668\" width=\"20\" height=\"12.004833333333323\" radius=\"3,3,0,0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M356,213.99516666666668A 3,3,0,0,1,359,210.99516666666668L 373,210.99516666666668A 3,3,0,0,1,\n        376,213.99516666666668L 376,223L 356,223Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"424\" y=\"205.64316666666667\" width=\"20\" height=\"17.356833333333327\" radius=\"3,3,0,0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M424,208.64316666666667A 3,3,0,0,1,427,205.64316666666667L 441,205.64316666666667A 3,3,0,0,1,\n        444,208.64316666666667L 444,223L 424,223Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\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(60px, 10px);\">\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": "BarChart",
+                  "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": "layout",
+                      "type": "String",
+                      "default": "horizontal",
+                      "description": "The layout of the chart. Possible values are: horizontal, vertical"
+                    },
+                    {
+                      "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": "true",
+                      "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": "useDataColors",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the color information shall be taken from the data input to use different colors for different entries."
+                    },
+                    {
+                      "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": "bars",
+                      "type": "Array of Bar",
+                      "default": "[]",
+                      "description": "Renders the provided Bar components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Bar",
+                  "rows": [
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the whole bar component instead of individual colors from the data. 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 bar."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the bar."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar"
+                    }
+                  ]
+                },
+                {
+                  "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 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Multiple Bars BarChart</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts7-clip\"><rect x=\"45\" y=\"5\" height=\"208\" width=\"418\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"161\" x2=\"463\" y2=\"161\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"109\" x2=\"463\" y2=\"109\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"57\" x2=\"463\" y2=\"57\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"5\" x2=\"463\" y2=\"5\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"74.85714285714286\" y1=\"219\" x2=\"74.85714285714286\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"74.85714285714286\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"74.85714285714286\" dy=\"0.71em\">Page A</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"134.57142857142858\" y1=\"219\" x2=\"134.57142857142858\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"134.57142857142858\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"134.57142857142858\" dy=\"0.71em\">Page B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"194.2857142857143\" y1=\"219\" x2=\"194.2857142857143\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"194.2857142857143\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"194.2857142857143\" dy=\"0.71em\">Page C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"254\" y1=\"219\" x2=\"254\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"254\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"254\" dy=\"0.71em\">Page D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"313.7142857142857\" y1=\"219\" x2=\"313.7142857142857\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"313.7142857142857\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"313.7142857142857\" dy=\"0.71em\">Page E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"373.4285714285714\" y1=\"219\" x2=\"373.4285714285714\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"373.4285714285714\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"373.4285714285714\" dy=\"0.71em\">Page F</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"433.1428571428571\" y1=\"219\" x2=\"433.1428571428571\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"433.1428571428571\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"433.1428571428571\" dy=\"0.71em\">Page G</tspan></text></g></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"5\" x2=\"45\" y2=\"213\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"213\" x2=\"45\" y2=\"213\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">0</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"161\" x2=\"45\" y2=\"161\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"161\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">2500</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"109\" x2=\"45\" y2=\"109\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"109\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">5000</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"57\" x2=\"45\" y2=\"57\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"57\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">7500</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"5\" x2=\"45\" y2=\"5\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">10000</tspan></text></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 458px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><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 fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">pv</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 fill=\"#31144f \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(49, 20, 79);\">uv</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(45px, 10px);\"><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 BarChart from '@rio-cloud/rio-uikit/BarChart';\nimport Bar from '@rio-cloud/rio-uikit/Bar';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\n\nexport default () => {\n    return (\n        <>\n            <label>Multiple Bars BarChart</label>\n            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>\n                <BarChart\n                    data={data}\n                    dataKey='name'\n                    legend={<Legend layout='horizontal' verticalAlign='bottom' align='center' />}\n                    showGrid\n                    gridOptions={{ vertical: false }}\n                    xAxisOptions={{ dataKey: 'name' }}\n                    yAxisOptions={{ width: 40 }}\n                    bars={[\n                        <Bar key='pv' dataKey='pv' color='color-coldplay-moos' />,\n                        <Bar key='uv' dataKey='uv' color='color-warmup-crimson' />,\n                    ]}\n                />\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    { name: 'Page A', uv: 4000, pv: 2400 },\n    { name: 'Page B', uv: 3000, pv: 1398 },\n    { name: 'Page C', uv: 2000, pv: 9800 },\n    { name: 'Page D', uv: 2780, pv: 3908 },\n    { name: 'Page E', uv: 1890, pv: 4800 },\n    { name: 'Page F', uv: 2390, pv: 3800 },\n    { name: 'Page G', uv: 3490, pv: 4300 },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Multiple Bars BarChart</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\">\n            <svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts7-clip\">\n                        <rect x=\"45\" y=\"5\" height=\"208\" width=\"418\">\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=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"161\" x2=\"463\" y2=\"161\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"109\" x2=\"463\" y2=\"109\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"57\" x2=\"463\" y2=\"57\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"5\" x2=\"463\" y2=\"5\">\n                        </line>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"74.85714285714286\" y1=\"219\" x2=\"74.85714285714286\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"74.85714285714286\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"74.85714285714286\" dy=\"0.71em\">Page A</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"134.57142857142858\" y1=\"219\" x2=\"134.57142857142858\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"134.57142857142858\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"134.57142857142858\" dy=\"0.71em\">Page B</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"194.2857142857143\" y1=\"219\" x2=\"194.2857142857143\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"194.2857142857143\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"194.2857142857143\" dy=\"0.71em\">Page C</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"254\" y1=\"219\" x2=\"254\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"254\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"254\" dy=\"0.71em\">Page D</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"313.7142857142857\" y1=\"219\" x2=\"313.7142857142857\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"313.7142857142857\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"313.7142857142857\" dy=\"0.71em\">Page E</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"373.4285714285714\" y1=\"219\" x2=\"373.4285714285714\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"373.4285714285714\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"373.4285714285714\" dy=\"0.71em\">Page F</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"433.1428571428571\" y1=\"219\" x2=\"433.1428571428571\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"433.1428571428571\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"433.1428571428571\" 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=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"5\" x2=\"45\" y2=\"213\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"213\" x2=\"45\" y2=\"213\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">0</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"161\" x2=\"45\" y2=\"161\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"161\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">2500</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"109\" x2=\"45\" y2=\"109\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"109\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">5000</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"57\" x2=\"45\" y2=\"57\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"57\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">7500</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"5\" x2=\"45\" y2=\"5\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">10000</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"50.971428571428575\" y=\"163.07999999999998\" width=\"21\" height=\"49.920000000000016\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page A\" class=\"recharts-rectangle\" d=\"M 50.971428571428575,163.07999999999998 h 21 v 49.920000000000016 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"110.6857142857143\" y=\"183.9216\" width=\"21\" height=\"29.078399999999988\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page B\" class=\"recharts-rectangle\" d=\"M 110.6857142857143,183.9216 h 21 v 29.078399999999988 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"170.4\" y=\"9.159999999999997\" width=\"21\" height=\"203.84\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page C\" class=\"recharts-rectangle\" d=\"M 170.4,9.159999999999997 h 21 v 203.84 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"230.1142857142857\" y=\"131.7136\" width=\"21\" height=\"81.28639999999999\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page D\" class=\"recharts-rectangle\" d=\"M 230.1142857142857,131.7136 h 21 v 81.28639999999999 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"289.8285714285715\" y=\"113.16000000000001\" width=\"21\" height=\"99.83999999999999\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page E\" class=\"recharts-rectangle\" d=\"M 289.8285714285715,113.16000000000001 h 21 v 99.83999999999999 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"349.54285714285714\" y=\"133.96\" width=\"21\" height=\"79.03999999999999\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page F\" class=\"recharts-rectangle\" d=\"M 349.54285714285714,133.96 h 21 v 79.03999999999999 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"409.25714285714287\" y=\"123.56000000000002\" width=\"21\" height=\"89.43999999999998\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page G\" class=\"recharts-rectangle\" d=\"M 409.25714285714287,123.56000000000002 h 21 v 89.43999999999998 h -21 Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"75.97142857142858\" y=\"129.8\" width=\"21\" height=\"83.19999999999999\" radius=\"0\" fill=\"#31144f \" name=\"Page A\" class=\"recharts-rectangle\" d=\"M 75.97142857142858,129.8 h 21 v 83.19999999999999 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"135.68571428571428\" y=\"150.6\" width=\"21\" height=\"62.400000000000006\" radius=\"0\" fill=\"#31144f \" name=\"Page B\" class=\"recharts-rectangle\" d=\"M 135.68571428571428,150.6 h 21 v 62.400000000000006 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"195.4\" y=\"171.4\" width=\"21\" height=\"41.599999999999994\" radius=\"0\" fill=\"#31144f \" name=\"Page C\" class=\"recharts-rectangle\" d=\"M 195.4,171.4 h 21 v 41.599999999999994 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"255.1142857142857\" y=\"155.176\" width=\"21\" height=\"57.82400000000001\" radius=\"0\" fill=\"#31144f \" name=\"Page D\" class=\"recharts-rectangle\" d=\"M 255.1142857142857,155.176 h 21 v 57.82400000000001 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"314.8285714285715\" y=\"173.688\" width=\"21\" height=\"39.31200000000001\" radius=\"0\" fill=\"#31144f \" name=\"Page E\" class=\"recharts-rectangle\" d=\"M 314.8285714285715,173.688 h 21 v 39.31200000000001 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"374.54285714285714\" y=\"163.28799999999998\" width=\"21\" height=\"49.71200000000002\" radius=\"0\" fill=\"#31144f \" name=\"Page F\" class=\"recharts-rectangle\" d=\"M 374.54285714285714,163.28799999999998 h 21 v 49.71200000000002 h -21 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"434.25714285714287\" y=\"140.40800000000002\" width=\"21\" height=\"72.59199999999998\" radius=\"0\" fill=\"#31144f \" name=\"Page G\" class=\"recharts-rectangle\" d=\"M 434.25714285714287,140.40800000000002 h 21 v 72.59199999999998 h -21 Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\n                    </g>\n                </g>\n            </svg>\n            <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 458px; height: auto; left: 5px; bottom: 5px;\">\n                <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\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 fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">pv</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 fill=\"#31144f \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(49, 20, 79);\">uv</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(45px, 10px);\">\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": "BarChart",
+                  "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": "layout",
+                      "type": "String",
+                      "default": "horizontal",
+                      "description": "The layout of the chart. Possible values are: horizontal, vertical"
+                    },
+                    {
+                      "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": "true",
+                      "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": "useDataColors",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the color information shall be taken from the data input to use different colors for different entries."
+                    },
+                    {
+                      "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": "bars",
+                      "type": "Array of Bar",
+                      "default": "[]",
+                      "description": "Renders the provided Bar components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Bar",
+                  "rows": [
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the whole bar component instead of individual colors from the data. 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 bar."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the bar."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar"
+                    }
+                  ]
+                },
+                {
+                  "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 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Stacked BarChart</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts12-clip\"><rect x=\"45\" y=\"5\" height=\"208\" width=\"418\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"161\" x2=\"463\" y2=\"161\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"109\" x2=\"463\" y2=\"109\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"57\" x2=\"463\" y2=\"57\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"5\" x2=\"463\" y2=\"5\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"74.85714285714286\" y1=\"219\" x2=\"74.85714285714286\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"74.85714285714286\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"74.85714285714286\" dy=\"0.71em\">Page A</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"134.57142857142858\" y1=\"219\" x2=\"134.57142857142858\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"134.57142857142858\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"134.57142857142858\" dy=\"0.71em\">Page B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"194.2857142857143\" y1=\"219\" x2=\"194.2857142857143\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"194.2857142857143\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"194.2857142857143\" dy=\"0.71em\">Page C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"254\" y1=\"219\" x2=\"254\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"254\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"254\" dy=\"0.71em\">Page D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"313.7142857142857\" y1=\"219\" x2=\"313.7142857142857\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"313.7142857142857\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"313.7142857142857\" dy=\"0.71em\">Page E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"373.4285714285714\" y1=\"219\" x2=\"373.4285714285714\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"373.4285714285714\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"373.4285714285714\" dy=\"0.71em\">Page F</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"433.1428571428571\" y1=\"219\" x2=\"433.1428571428571\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"433.1428571428571\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"433.1428571428571\" dy=\"0.71em\">Page G</tspan></text></g></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"5\" x2=\"45\" y2=\"213\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"213\" x2=\"45\" y2=\"213\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">0</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"161\" x2=\"45\" y2=\"161\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"161\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">3000</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"109\" x2=\"45\" y2=\"109\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"109\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">6000</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"57\" x2=\"45\" y2=\"57\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"57\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">9000</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"5\" x2=\"45\" y2=\"5\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">12000</tspan></text></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 458px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><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 fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">pv</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 fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">uv</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(45px, 10px);\"><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 BarChart from '@rio-cloud/rio-uikit/BarChart';\nimport Bar from '@rio-cloud/rio-uikit/Bar';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\n\nexport default () => {\n    return (\n        <>\n            <label>Stacked BarChart</label>\n            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>\n                <BarChart\n                    data={data}\n                    dataKey='name'\n                    legend={<Legend layout='horizontal' verticalAlign='bottom' align='center' />}\n                    showGrid\n                    gridOptions={{ vertical: false }}\n                    xAxisOptions={{ dataKey: 'name' }}\n                    yAxisOptions={{ width: 40 }}\n                    bars={[\n                        <Bar key='pv' dataKey='pv' stackId='a' barSize={26} color='color-coldplay-moos' />,\n                        <Bar key='uv' dataKey='uv' stackId='a' barSize={26} color='color-coldplay-fountain' />,\n                    ]}\n                />\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    {\n        name: 'Page A',\n        uv: 4000,\n        pv: 2400,\n    },\n    {\n        name: 'Page B',\n        uv: 3000,\n        pv: 1398,\n    },\n    {\n        name: 'Page C',\n        uv: 2000,\n        pv: 9800,\n    },\n    {\n        name: 'Page D',\n        uv: 2780,\n        pv: 3908,\n    },\n    {\n        name: 'Page E',\n        uv: 1890,\n        pv: 4800,\n    },\n    {\n        name: 'Page F',\n        uv: 2390,\n        pv: 3800,\n    },\n    {\n        name: 'Page G',\n        uv: 3490,\n        pv: 4300,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Stacked BarChart</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\">\n            <svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts12-clip\">\n                        <rect x=\"45\" y=\"5\" height=\"208\" width=\"418\">\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=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"161\" x2=\"463\" y2=\"161\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"109\" x2=\"463\" y2=\"109\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"57\" x2=\"463\" y2=\"57\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"5\" x2=\"463\" y2=\"5\">\n                        </line>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"74.85714285714286\" y1=\"219\" x2=\"74.85714285714286\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"74.85714285714286\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"74.85714285714286\" dy=\"0.71em\">Page A</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"134.57142857142858\" y1=\"219\" x2=\"134.57142857142858\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"134.57142857142858\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"134.57142857142858\" dy=\"0.71em\">Page B</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"194.2857142857143\" y1=\"219\" x2=\"194.2857142857143\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"194.2857142857143\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"194.2857142857143\" dy=\"0.71em\">Page C</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"254\" y1=\"219\" x2=\"254\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"254\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"254\" dy=\"0.71em\">Page D</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"313.7142857142857\" y1=\"219\" x2=\"313.7142857142857\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"313.7142857142857\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"313.7142857142857\" dy=\"0.71em\">Page E</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"373.4285714285714\" y1=\"219\" x2=\"373.4285714285714\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"373.4285714285714\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"373.4285714285714\" dy=\"0.71em\">Page F</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"433.1428571428571\" y1=\"219\" x2=\"433.1428571428571\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"433.1428571428571\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"433.1428571428571\" 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=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"5\" x2=\"45\" y2=\"213\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"213\" x2=\"45\" y2=\"213\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">0</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"161\" x2=\"45\" y2=\"161\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"161\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">3000</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"109\" x2=\"45\" y2=\"109\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"109\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">6000</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"57\" x2=\"45\" y2=\"57\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"57\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">9000</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"5\" x2=\"45\" y2=\"5\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">12000</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"61\" y=\"171.4\" width=\"26\" height=\"41.599999999999994\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page A\" class=\"recharts-rectangle\" d=\"M 61,171.4 h 26 v 41.599999999999994 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"120.71428571428572\" y=\"188.768\" width=\"26\" height=\"24.232\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page B\" class=\"recharts-rectangle\" d=\"M 120.71428571428572,188.768 h 26 v 24.232 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"180.42857142857144\" y=\"43.133333333333326\" width=\"26\" height=\"169.86666666666667\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page C\" class=\"recharts-rectangle\" d=\"M 180.42857142857144,43.133333333333326 h 26 v 169.86666666666667 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"240.14285714285714\" y=\"145.26133333333334\" width=\"26\" height=\"67.73866666666666\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page D\" class=\"recharts-rectangle\" d=\"M 240.14285714285714,145.26133333333334 h 26 v 67.73866666666666 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"299.8571428571429\" y=\"129.8\" width=\"26\" height=\"83.19999999999999\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page E\" class=\"recharts-rectangle\" d=\"M 299.8571428571429,129.8 h 26 v 83.19999999999999 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"359.57142857142856\" y=\"147.13333333333335\" width=\"26\" height=\"65.86666666666665\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page F\" class=\"recharts-rectangle\" d=\"M 359.57142857142856,147.13333333333335 h 26 v 65.86666666666665 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"419.2857142857143\" y=\"138.46666666666664\" width=\"26\" height=\"74.53333333333336\" radius=\"0\" fill=\"#a1daa3 \" name=\"Page G\" class=\"recharts-rectangle\" d=\"M 419.2857142857143,138.46666666666664 h 26 v 74.53333333333336 h -26 Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"61\" y=\"102.06666666666668\" width=\"26\" height=\"69.33333333333333\" radius=\"0\" fill=\"#67abc5 \" name=\"Page A\" class=\"recharts-rectangle\" d=\"M 61,102.06666666666668 h 26 v 69.33333333333333 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"120.71428571428572\" y=\"136.768\" width=\"26\" height=\"52\" radius=\"0\" fill=\"#67abc5 \" name=\"Page B\" class=\"recharts-rectangle\" d=\"M 120.71428571428572,136.768 h 26 v 52 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"180.42857142857144\" y=\"8.466666666666676\" width=\"26\" height=\"34.666666666666664\" radius=\"0\" fill=\"#67abc5 \" name=\"Page C\" class=\"recharts-rectangle\" d=\"M 180.42857142857144,8.466666666666676 h 26 v 34.666666666666664 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"240.14285714285714\" y=\"97.07466666666666\" width=\"26\" height=\"48.18666666666668\" radius=\"0\" fill=\"#67abc5 \" name=\"Page D\" class=\"recharts-rectangle\" d=\"M 240.14285714285714,97.07466666666666 h 26 v 48.18666666666668 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"299.8571428571429\" y=\"97.03999999999999\" width=\"26\" height=\"32.76000000000002\" radius=\"0\" fill=\"#67abc5 \" name=\"Page E\" class=\"recharts-rectangle\" d=\"M 299.8571428571429,97.03999999999999 h 26 v 32.76000000000002 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"359.57142857142856\" y=\"105.70666666666666\" width=\"26\" height=\"41.42666666666669\" radius=\"0\" fill=\"#67abc5 \" name=\"Page F\" class=\"recharts-rectangle\" d=\"M 359.57142857142856,105.70666666666666 h 26 v 41.42666666666669 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"419.2857142857143\" y=\"77.97333333333334\" width=\"26\" height=\"60.4933333333333\" radius=\"0\" fill=\"#67abc5 \" name=\"Page G\" class=\"recharts-rectangle\" d=\"M 419.2857142857143,77.97333333333334 h 26 v 60.4933333333333 h -26 Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\n                    </g>\n                </g>\n            </svg>\n            <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 458px; height: auto; left: 5px; bottom: 5px;\">\n                <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\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 fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">pv</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 fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">uv</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(45px, 10px);\">\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": "BarChart",
+                  "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": "layout",
+                      "type": "String",
+                      "default": "horizontal",
+                      "description": "The layout of the chart. Possible values are: horizontal, vertical"
+                    },
+                    {
+                      "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": "true",
+                      "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": "useDataColors",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the color information shall be taken from the data input to use different colors for different entries."
+                    },
+                    {
+                      "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": "bars",
+                      "type": "Array of Bar",
+                      "default": "[]",
+                      "description": "Renders the provided Bar components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Bar",
+                  "rows": [
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the whole bar component instead of individual colors from the data. 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 bar."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the bar."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar"
+                    }
+                  ]
+                },
+                {
+                  "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": "Basistarif",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Vertical BarChart</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts15-clip\"><rect x=\"15\" y=\"5\" height=\"244\" width=\"363\"></rect></clipPath></defs><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"249\" x2=\"378\" y2=\"249\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"255\" x2=\"15\" y2=\"249\"></line><text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"15\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"15\" dy=\"0.71em\">0</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"105.75\" y1=\"255\" x2=\"105.75\" y2=\"249\"></line><text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"105.75\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"105.75\" dy=\"0.71em\">15</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"196.5\" y1=\"255\" x2=\"196.5\" y2=\"249\"></line><text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"196.5\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"196.5\" dy=\"0.71em\">30</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"287.25\" y1=\"255\" x2=\"287.25\" y2=\"249\"></line><text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"287.25\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"287.25\" dy=\"0.71em\">45</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"378\" y1=\"255\" x2=\"378\" y2=\"249\"></line><text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"378\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"378\" dy=\"0.71em\">60</tspan></text></g></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\"><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><text orientation=\"left\" width=\"10\" height=\"244\" stroke=\"none\" x=\"-191\" y=\"35.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"-191\" dy=\"0.355em\">Basistarif</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><text orientation=\"left\" width=\"10\" height=\"244\" stroke=\"none\" x=\"-191\" y=\"96.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"-191\" dy=\"0.355em\">Diesel</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><text orientation=\"left\" width=\"10\" height=\"244\" stroke=\"none\" x=\"-191\" y=\"157.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"-191\" dy=\"0.355em\">Maut</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><text orientation=\"left\" width=\"10\" height=\"244\" stroke=\"none\" x=\"-191\" y=\"218.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"-191\" dy=\"0.355em\">Zuschläge</tspan></text></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 5px; top: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: left;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: 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 fill=\"#c9778d \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(201, 119, 141);\"><span class=\"text-color-dark\">Basistarif</span></span></li><li class=\"recharts-legend-item legend-item-1\" style=\"display: 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 fill=\"#f19588 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(241, 149, 136);\"><span class=\"text-color-dark\">Diesel</span></span></li><li class=\"recharts-legend-item legend-item-2\" style=\"display: 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 fill=\"#f5bb89 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(245, 187, 137);\"><span class=\"text-color-dark\">Maut</span></span></li><li class=\"recharts-legend-item legend-item-3\" style=\"display: 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 fill=\"#ff8e3c \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(255, 142, 60);\"><span class=\"text-color-dark\">Zuschläge</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(15px, 10px);\"><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 BarChart from '@rio-cloud/rio-uikit/BarChart';\nimport Bar from '@rio-cloud/rio-uikit/Bar';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\n\ntype CustomData = {\n    label: string;\n    color: string;\n    costs: number;\n};\n\nexport default () => {\n    return (\n        <>\n            <label>Vertical BarChart</label>\n            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>\n                <BarChart\n                    data={data}\n                    layout='vertical'\n                    useDataColors\n                    legend={\n                        <Legend\n                            iconSize={12}\n                            formatter={(value: string, entry: CustomData) => {\n                                return <span className='text-color-dark'>{entry.label}</span>;\n                            }}\n                        />\n                    }\n                    xAxisOptions={{\n                        dataKey: 'costs',\n                        type: 'number',\n                        height: 14,\n                    }}\n                    yAxisOptions={{\n                        dataKey: 'label',\n                        type: 'category',\n                        width: 10,\n                        tickLine: false,\n                        axisLine: false,\n                        tickMargin: 200,\n                    }}\n                    bars={[\n                        <Bar\n                            key='costs'\n                            dataKey='costs'\n                            label={{\n                                position: 'right',\n                                formatter: (value: number) => `${value}€`,\n                            }}\n                        />,\n                    ]}\n                />\n            </div>\n        </>\n    );\n};\n\nconst data: CustomData[] = [\n    {\n        label: 'Basistarif',\n        color: 'color-warmup-charm',\n        costs: 46.8,\n    },\n    {\n        label: 'Diesel',\n        color: 'color-warmup-salmon',\n        costs: 22.0,\n    },\n    {\n        label: 'Maut',\n        color: 'color-warmup-cherokee',\n        costs: 12.4,\n    },\n    {\n        label: 'Zuschläge',\n        color: 'brand-warning',\n        costs: 3.88,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Vertical BarChart</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\">\n            <svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts15-clip\">\n                        <rect x=\"15\" y=\"5\" height=\"244\" width=\"363\">\n                        </rect>\n                    </clipPath>\n                </defs>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"249\" x2=\"378\" y2=\"249\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"255\" x2=\"15\" y2=\"249\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"15\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"15\" dy=\"0.71em\">0</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"105.75\" y1=\"255\" x2=\"105.75\" y2=\"249\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"105.75\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"105.75\" dy=\"0.71em\">15</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"196.5\" y1=\"255\" x2=\"196.5\" y2=\"249\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"196.5\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"196.5\" dy=\"0.71em\">30</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"287.25\" y1=\"255\" x2=\"287.25\" y2=\"249\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"287.25\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"287.25\" dy=\"0.71em\">45</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"363\" height=\"14\" x=\"15\" y=\"249\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"378\" y1=\"255\" x2=\"378\" y2=\"249\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"363\" height=\"14\" stroke=\"none\" x=\"378\" y=\"257\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"378\" dy=\"0.71em\">60</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\">\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <text orientation=\"left\" width=\"10\" height=\"244\" stroke=\"none\" x=\"-191\" y=\"35.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"-191\" dy=\"0.355em\">Basistarif</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <text orientation=\"left\" width=\"10\" height=\"244\" stroke=\"none\" x=\"-191\" y=\"96.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"-191\" dy=\"0.355em\">Diesel</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <text orientation=\"left\" width=\"10\" height=\"244\" stroke=\"none\" x=\"-191\" y=\"157.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"-191\" dy=\"0.355em\">Maut</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <text orientation=\"left\" width=\"10\" height=\"244\" stroke=\"none\" x=\"-191\" y=\"218.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"-191\" dy=\"0.355em\">Zuschläge</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"15\" y=\"11.1\" width=\"283.14\" height=\"48\" radius=\"0\" fill=\"#c9778d \" color=\"color-warmup-charm\" class=\"recharts-rectangle\" d=\"M 15,11.1 h 283.14 v 48 h -283.14 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"15\" y=\"72.1\" width=\"133.1\" height=\"48\" radius=\"0\" fill=\"#f19588 \" color=\"color-warmup-salmon\" class=\"recharts-rectangle\" d=\"M 15,72.1 h 133.1 v 48 h -133.1 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"15\" y=\"133.1\" width=\"75.02000000000001\" height=\"48\" radius=\"0\" fill=\"#f5bb89 \" color=\"color-warmup-cherokee\" class=\"recharts-rectangle\" d=\"M 15,133.1 h 75.02000000000001 v 48 h -75.02000000000001 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"15\" y=\"194.1\" width=\"23.474000000000004\" height=\"48\" radius=\"0\" fill=\"#ff8e3c \" color=\"brand-warning\" class=\"recharts-rectangle\" d=\"M 15,194.1 h 23.474000000000004 v 48 h -23.474000000000004 Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\n                    </g>\n                    <g class=\"recharts-layer recharts-label-list\">\n                        <text offset=\"5\" color=\"color-warmup-charm\" width=\"283.14\" height=\"48\" x=\"303.14\" y=\"35.1\" class=\"recharts-text recharts-label\" text-anchor=\"start\" fill=\"#c9778d \">\n                            <tspan x=\"303.14\" dy=\"0.355em\">46.8€</tspan>\n                        </text>\n                        <text offset=\"5\" color=\"color-warmup-salmon\" width=\"133.1\" height=\"48\" x=\"153.1\" y=\"96.1\" class=\"recharts-text recharts-label\" text-anchor=\"start\" fill=\"#f19588 \">\n                            <tspan x=\"153.1\" dy=\"0.355em\">22€</tspan>\n                        </text>\n                        <text offset=\"5\" color=\"color-warmup-cherokee\" width=\"75.02000000000001\" height=\"48\" x=\"95.02000000000001\" y=\"157.1\" class=\"recharts-text recharts-label\" text-anchor=\"start\" fill=\"#f5bb89 \">\n                            <tspan x=\"95.02000000000001\" dy=\"0.355em\">12.4€</tspan>\n                        </text>\n                        <text offset=\"5\" color=\"brand-warning\" width=\"23.474000000000004\" height=\"48\" x=\"43.474000000000004\" y=\"218.1\" class=\"recharts-text recharts-label\" text-anchor=\"start\" fill=\"#ff8e3c \">\n                            <tspan x=\"43.474000000000004\" dy=\"0.355em\">3.88€</tspan>\n                        </text>\n                    </g>\n                </g>\n            </svg>\n            <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 5px; top: 5px;\">\n                <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: left;\">\n                    <li class=\"recharts-legend-item legend-item-0\" style=\"display: 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 fill=\"#c9778d \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(201, 119, 141);\">\n                            <span class=\"text-color-dark\">Basistarif</span>\n                        </span>\n                    </li>\n                    <li class=\"recharts-legend-item legend-item-1\" style=\"display: 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 fill=\"#f19588 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(241, 149, 136);\">\n                            <span class=\"text-color-dark\">Diesel</span>\n                        </span>\n                    </li>\n                    <li class=\"recharts-legend-item legend-item-2\" style=\"display: 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 fill=\"#f5bb89 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(245, 187, 137);\">\n                            <span class=\"text-color-dark\">Maut</span>\n                        </span>\n                    </li>\n                    <li class=\"recharts-legend-item legend-item-3\" style=\"display: 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 fill=\"#ff8e3c \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(255, 142, 60);\">\n                            <span class=\"text-color-dark\">Zuschläge</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(15px, 10px);\">\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": "BarChart",
+                  "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": "layout",
+                      "type": "String",
+                      "default": "horizontal",
+                      "description": "The layout of the chart. Possible values are: horizontal, vertical"
+                    },
+                    {
+                      "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": "true",
+                      "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": "useDataColors",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the color information shall be taken from the data input to use different colors for different entries."
+                    },
+                    {
+                      "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": "bars",
+                      "type": "Array of Bar",
+                      "default": "[]",
+                      "description": "Renders the provided Bar components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Bar",
+                  "rows": [
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the whole bar component instead of individual colors from the data. 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 bar."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the bar."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar"
+                    }
+                  ]
+                },
+                {
+                  "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 6",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>BarChart with custom Tooltips</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts18-clip\"><rect x=\"45\" y=\"5\" height=\"208\" width=\"418\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"161\" x2=\"463\" y2=\"161\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"109\" x2=\"463\" y2=\"109\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"57\" x2=\"463\" y2=\"57\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"5\" x2=\"463\" y2=\"5\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"74.85714285714286\" y1=\"219\" x2=\"74.85714285714286\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"74.85714285714286\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"74.85714285714286\" dy=\"0.71em\">Truck A</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"134.57142857142858\" y1=\"219\" x2=\"134.57142857142858\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"134.57142857142858\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"134.57142857142858\" dy=\"0.71em\">Truck B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"194.2857142857143\" y1=\"219\" x2=\"194.2857142857143\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"194.2857142857143\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"194.2857142857143\" dy=\"0.71em\">Truck C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"254\" y1=\"219\" x2=\"254\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"254\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"254\" dy=\"0.71em\">Truck D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"313.7142857142857\" y1=\"219\" x2=\"313.7142857142857\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"313.7142857142857\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"313.7142857142857\" dy=\"0.71em\">Truck E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"373.4285714285714\" y1=\"219\" x2=\"373.4285714285714\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"373.4285714285714\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"373.4285714285714\" dy=\"0.71em\">Truck F</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"433.1428571428571\" y1=\"219\" x2=\"433.1428571428571\" y2=\"213\"></line><text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"433.1428571428571\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"433.1428571428571\" dy=\"0.71em\">Truck G</tspan></text></g></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"5\" x2=\"45\" y2=\"213\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"213\" x2=\"45\" y2=\"213\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">0</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"161\" x2=\"45\" y2=\"161\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"161\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">3000</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"109\" x2=\"45\" y2=\"109\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"109\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">6000</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"57\" x2=\"45\" y2=\"57\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"57\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">9000</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"5\" x2=\"45\" y2=\"5\"></line><text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"37\" dy=\"0.355em\">12000</tspan></text></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 458px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><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 fill=\"#268897 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(38, 136, 151);\">pv</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 fill=\"#30b4c0 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(48, 180, 192);\">uv</span></li></ul></div><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;\"></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import BarChart from '@rio-cloud/rio-uikit/BarChart';\nimport Bar from '@rio-cloud/rio-uikit/Bar';\nimport Legend from '@rio-cloud/rio-uikit/Legend';\nimport ChartTooltip from '@rio-cloud/rio-uikit/ChartTooltip';\n\n// biome-ignore lint/suspicious/noExplicitAny: <explanation>\nconst CustomTooltip = ({ active, payload }: { active?: boolean; payload?: any }) => {\n    if (!active) {\n        return null;\n    }\n\n    const firstValue = payload[0].value;\n    const secondValue = payload[1].value;\n    const totalValue = firstValue + secondValue;\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} km`}</span>\n                </div>\n                <div className='display-flex'>\n                    <span className='width-10 text-center text-color-highlight'>+</span>\n                    <span className='text-color-highlight'>{`${secondValue} km`}</span>\n                </div>\n                <div className='display-flex border border-top-only border-color-lightest'>\n                    <span className='width-10 text-center text-color-highlight-darkest'>=</span>\n                    <span className='text-color-highlight-darkest'>{`${totalValue} km`}</span>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default () => (\n    <>\n        <label>BarChart with custom Tooltips</label>\n        <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>\n            <BarChart\n                data={data}\n                dataKey='name'\n                legend={<Legend layout='horizontal' verticalAlign='bottom' align='center' />}\n                showGrid\n                gridOptions={{ vertical: false }}\n                xAxisOptions={{ dataKey: 'name' }}\n                yAxisOptions={{ width: 40 }}\n                bars={[\n                    <Bar key='pv' dataKey='pv' stackId='a' barSize={26} color='color-highlight-dark' />,\n                    <Bar key='uv' dataKey='uv' stackId='a' barSize={26} color='color-highlight' />,\n                ]}\n                tooltip={<ChartTooltip content={<CustomTooltip />} cursor={{ fill: '#ebf9fa80' }} />}\n            />\n        </div>\n    </>\n);\n\nconst data = [\n    {\n        name: 'Truck A',\n        uv: 4000,\n        pv: 2400,\n    },\n    {\n        name: 'Truck B',\n        uv: 3000,\n        pv: 1398,\n    },\n    {\n        name: 'Truck C',\n        uv: 2000,\n        pv: 9800,\n    },\n    {\n        name: 'Truck D',\n        uv: 2780,\n        pv: 3908,\n    },\n    {\n        name: 'Truck E',\n        uv: 1890,\n        pv: 4800,\n    },\n    {\n        name: 'Truck F',\n        uv: 2390,\n        pv: 3800,\n    },\n    {\n        name: 'Truck G',\n        uv: 3490,\n        pv: 4300,\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>BarChart with custom Tooltips</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\">\n            <svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts18-clip\">\n                        <rect x=\"45\" y=\"5\" height=\"208\" width=\"418\">\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=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"161\" x2=\"463\" y2=\"161\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"109\" x2=\"463\" y2=\"109\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"57\" x2=\"463\" y2=\"57\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"45\" y=\"5\" width=\"418\" height=\"208\" x1=\"45\" y1=\"5\" x2=\"463\" y2=\"5\">\n                        </line>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"213\" x2=\"463\" y2=\"213\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"74.85714285714286\" y1=\"219\" x2=\"74.85714285714286\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"74.85714285714286\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"74.85714285714286\" dy=\"0.71em\">Truck A</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"134.57142857142858\" y1=\"219\" x2=\"134.57142857142858\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"134.57142857142858\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"134.57142857142858\" dy=\"0.71em\">Truck B</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"194.2857142857143\" y1=\"219\" x2=\"194.2857142857143\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"194.2857142857143\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"194.2857142857143\" dy=\"0.71em\">Truck C</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"254\" y1=\"219\" x2=\"254\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"254\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"254\" dy=\"0.71em\">Truck D</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"313.7142857142857\" y1=\"219\" x2=\"313.7142857142857\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"313.7142857142857\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"313.7142857142857\" dy=\"0.71em\">Truck E</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"373.4285714285714\" y1=\"219\" x2=\"373.4285714285714\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"373.4285714285714\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"373.4285714285714\" dy=\"0.71em\">Truck F</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"418\" height=\"30\" x=\"45\" y=\"213\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"433.1428571428571\" y1=\"219\" x2=\"433.1428571428571\" y2=\"213\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"418\" height=\"30\" stroke=\"none\" x=\"433.1428571428571\" y=\"221\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"433.1428571428571\" dy=\"0.71em\">Truck 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=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"5\" x2=\"45\" y2=\"213\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"213\" x2=\"45\" y2=\"213\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">0</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"161\" x2=\"45\" y2=\"161\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"161\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">3000</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"109\" x2=\"45\" y2=\"109\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"109\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">6000</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"57\" x2=\"45\" y2=\"57\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"57\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">9000</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"40\" height=\"208\" x=\"5\" y=\"5\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"39\" y1=\"5\" x2=\"45\" y2=\"5\">\n                            </line>\n                            <text orientation=\"left\" width=\"40\" height=\"208\" stroke=\"none\" x=\"37\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"37\" dy=\"0.355em\">12000</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"61\" y=\"171.4\" width=\"26\" height=\"41.599999999999994\" radius=\"0\" fill=\"#268897 \" name=\"Truck A\" class=\"recharts-rectangle\" d=\"M 61,171.4 h 26 v 41.599999999999994 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"120.71428571428572\" y=\"188.768\" width=\"26\" height=\"24.232\" radius=\"0\" fill=\"#268897 \" name=\"Truck B\" class=\"recharts-rectangle\" d=\"M 120.71428571428572,188.768 h 26 v 24.232 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"180.42857142857144\" y=\"43.133333333333326\" width=\"26\" height=\"169.86666666666667\" radius=\"0\" fill=\"#268897 \" name=\"Truck C\" class=\"recharts-rectangle\" d=\"M 180.42857142857144,43.133333333333326 h 26 v 169.86666666666667 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"240.14285714285714\" y=\"145.26133333333334\" width=\"26\" height=\"67.73866666666666\" radius=\"0\" fill=\"#268897 \" name=\"Truck D\" class=\"recharts-rectangle\" d=\"M 240.14285714285714,145.26133333333334 h 26 v 67.73866666666666 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"299.8571428571429\" y=\"129.8\" width=\"26\" height=\"83.19999999999999\" radius=\"0\" fill=\"#268897 \" name=\"Truck E\" class=\"recharts-rectangle\" d=\"M 299.8571428571429,129.8 h 26 v 83.19999999999999 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"359.57142857142856\" y=\"147.13333333333335\" width=\"26\" height=\"65.86666666666665\" radius=\"0\" fill=\"#268897 \" name=\"Truck F\" class=\"recharts-rectangle\" d=\"M 359.57142857142856,147.13333333333335 h 26 v 65.86666666666665 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"419.2857142857143\" y=\"138.46666666666664\" width=\"26\" height=\"74.53333333333336\" radius=\"0\" fill=\"#268897 \" name=\"Truck G\" class=\"recharts-rectangle\" d=\"M 419.2857142857143,138.46666666666664 h 26 v 74.53333333333336 h -26 Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"61\" y=\"102.06666666666668\" width=\"26\" height=\"69.33333333333333\" radius=\"0\" fill=\"#30b4c0 \" name=\"Truck A\" class=\"recharts-rectangle\" d=\"M 61,102.06666666666668 h 26 v 69.33333333333333 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"120.71428571428572\" y=\"136.768\" width=\"26\" height=\"52\" radius=\"0\" fill=\"#30b4c0 \" name=\"Truck B\" class=\"recharts-rectangle\" d=\"M 120.71428571428572,136.768 h 26 v 52 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"180.42857142857144\" y=\"8.466666666666676\" width=\"26\" height=\"34.666666666666664\" radius=\"0\" fill=\"#30b4c0 \" name=\"Truck C\" class=\"recharts-rectangle\" d=\"M 180.42857142857144,8.466666666666676 h 26 v 34.666666666666664 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"240.14285714285714\" y=\"97.07466666666666\" width=\"26\" height=\"48.18666666666668\" radius=\"0\" fill=\"#30b4c0 \" name=\"Truck D\" class=\"recharts-rectangle\" d=\"M 240.14285714285714,97.07466666666666 h 26 v 48.18666666666668 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"299.8571428571429\" y=\"97.03999999999999\" width=\"26\" height=\"32.76000000000002\" radius=\"0\" fill=\"#30b4c0 \" name=\"Truck E\" class=\"recharts-rectangle\" d=\"M 299.8571428571429,97.03999999999999 h 26 v 32.76000000000002 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"359.57142857142856\" y=\"105.70666666666666\" width=\"26\" height=\"41.42666666666669\" radius=\"0\" fill=\"#30b4c0 \" name=\"Truck F\" class=\"recharts-rectangle\" d=\"M 359.57142857142856,105.70666666666666 h 26 v 41.42666666666669 h -26 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"419.2857142857143\" y=\"77.97333333333334\" width=\"26\" height=\"60.4933333333333\" radius=\"0\" fill=\"#30b4c0 \" name=\"Truck G\" class=\"recharts-rectangle\" d=\"M 419.2857142857143,77.97333333333334 h 26 v 60.4933333333333 h -26 Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\n                    </g>\n                </g>\n            </svg>\n            <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 458px; height: auto; left: 5px; bottom: 5px;\">\n                <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\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 fill=\"#268897 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(38, 136, 151);\">pv</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 fill=\"#30b4c0 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n                            </path>\n                        </svg>\n                        <span class=\"recharts-legend-item-text\" style=\"color: rgb(48, 180, 192);\">uv</span>\n                    </li>\n                </ul>\n            </div>\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>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "BarChart",
+                  "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": "layout",
+                      "type": "String",
+                      "default": "horizontal",
+                      "description": "The layout of the chart. Possible values are: horizontal, vertical"
+                    },
+                    {
+                      "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": "true",
+                      "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": "useDataColors",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the color information shall be taken from the data input to use different colors for different entries."
+                    },
+                    {
+                      "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": "bars",
+                      "type": "Array of Bar",
+                      "default": "[]",
+                      "description": "Renders the provided Bar components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Bar",
+                  "rows": [
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the whole bar component instead of individual colors from the data. 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 bar."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the bar."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar"
+                    }
+                  ]
+                },
+                {
+                  "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 7",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Multiple axis BarChart</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\"><svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts21-clip\"><rect x=\"60\" y=\"0\" height=\"193\" width=\"408\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"193\" x2=\"468\" y2=\"193\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"144.75\" x2=\"468\" y2=\"144.75\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"96.5\" x2=\"468\" y2=\"96.5\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"48.25\" x2=\"468\" y2=\"48.25\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"0\" x2=\"468\" y2=\"0\"></line></g><g class=\"recharts-cartesian-grid-vertical\"><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"94\" y1=\"0\" x2=\"94\" y2=\"193\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"162\" y1=\"0\" x2=\"162\" y2=\"193\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"230\" y1=\"0\" x2=\"230\" y2=\"193\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"298\" y1=\"0\" x2=\"298\" y2=\"193\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"366\" y1=\"0\" x2=\"366\" y2=\"193\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"434\" y1=\"0\" x2=\"434\" y2=\"193\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"0\" x2=\"60\" y2=\"193\"></line><line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"468\" y1=\"0\" x2=\"468\" y2=\"193\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"193\" x2=\"468\" y2=\"193\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"94\" y1=\"199\" x2=\"94\" y2=\"193\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"94\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"94\" dy=\"0.71em\">January</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"162\" y1=\"199\" x2=\"162\" y2=\"193\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"162\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"162\" dy=\"0.71em\">February</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"230\" y1=\"199\" x2=\"230\" y2=\"193\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"230\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"230\" dy=\"0.71em\">March</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"298\" y1=\"199\" x2=\"298\" y2=\"193\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"298\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"298\" dy=\"0.71em\">April</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"366\" y1=\"199\" x2=\"366\" y2=\"193\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"366\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"366\" dy=\"0.71em\">May</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"434\" y1=\"199\" x2=\"434\" y2=\"193\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"434\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"434\" dy=\"0.71em\">June</tspan></text></g></g><text offset=\"30\" x=\"264\" y=\"253\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\"><tspan x=\"264\" dy=\"0.71em\">Timerange</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\"><line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"0\" x2=\"60\" y2=\"193\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"193\" x2=\"60\" y2=\"193\"></line><text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"193\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">0 €</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"144.75\" x2=\"60\" y2=\"144.75\"></line><text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"144.75\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">15 €</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"96.5\" x2=\"60\" y2=\"96.5\"></line><text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"96.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">30 €</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"48.25\" x2=\"60\" y2=\"48.25\"></line><text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"48.25\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">45 €</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"0\" x2=\"60\" y2=\"0\"></line><text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\"><tspan x=\"52\" dy=\"0.355em\">60 €</tspan></text></g></g><text offset=\"5\" transform=\"rotate(-90, 5, 96.5)\" x=\"5\" y=\"96.5\" class=\"recharts-text recharts-label\" text-anchor=\"start\" fill=\"#808080\"><tspan x=\"5\" dy=\"0.355em\">Costs</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"223\" x2=\"468\" y2=\"223\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"94\" y1=\"229\" x2=\"94\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"94\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"94\" dy=\"0.71em\">Q1</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"162\" y1=\"229\" x2=\"162\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"162\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"162\" dy=\"0.71em\">Q1</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"230\" y1=\"229\" x2=\"230\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"230\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"230\" dy=\"0.71em\">Q1</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"298\" y1=\"229\" x2=\"298\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"298\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"298\" dy=\"0.71em\">Q2</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"366\" y1=\"229\" x2=\"366\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"366\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"366\" dy=\"0.71em\">Q2</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"434\" y1=\"229\" x2=\"434\" y2=\"223\"></line><text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"434\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"434\" dy=\"0.71em\">Q2</tspan></text></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></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(60px, 10px);\"><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 BarChart from '@rio-cloud/rio-uikit/BarChart';\nimport Bar from '@rio-cloud/rio-uikit/Bar';\nimport XAxis from '@rio-cloud/rio-uikit/XAxis';\n\nexport default () => {\n    return (\n        <>\n            <label>Multiple axis BarChart</label>\n            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>\n                <BarChart\n                    data={data}\n                    dataKey='label'\n                    showGrid\n                    xAxisOptions={{\n                        dataKey: 'label',\n                        label: { value: 'Timerange', offset: 30, position: 'bottom' },\n                    }}\n                    yAxisOptions={{\n                        unit: ' €',\n                        label: { value: 'Costs', angle: -90, position: 'insideLeft' },\n                    }}\n                    margin={{ bottom: 15 }}\n                    bars={[<Bar key='myBar' dataKey='costs' unit='€' />]}\n                    additionalAxes={[\n                        <XAxis key='quarterAxis' xAxisId='quarterAxis' dataKey='quarter' orientation='bottom' />,\n                    ]}\n                />\n            </div>\n        </>\n    );\n};\n\nconst data = [\n    { label: 'January', costs: 46.8, quarter: 'Q1' },\n    { label: 'February', costs: 22.0, quarter: 'Q1' },\n    { label: 'March', costs: 12.4, quarter: 'Q1' },\n    { label: 'April', costs: 3.88, quarter: 'Q2' },\n    { label: 'May', costs: 3.23, quarter: 'Q2' },\n    { label: 'June', costs: 4.67, quarter: 'Q2' },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Multiple axis BarChart</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 height-300 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: 268px; max-width: 468px;\">\n            <svg class=\"recharts-surface\" width=\"468\" height=\"268\" viewBox=\"0 0 468 268\" style=\"width: 100%; height: 100%;\">\n                <title>\n                </title>\n                <desc>\n                </desc>\n                <defs>\n                    <clipPath id=\"recharts21-clip\">\n                        <rect x=\"60\" y=\"0\" height=\"193\" width=\"408\">\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=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"193\" x2=\"468\" y2=\"193\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"144.75\" x2=\"468\" y2=\"144.75\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"96.5\" x2=\"468\" y2=\"96.5\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"48.25\" x2=\"468\" y2=\"48.25\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"0\" x2=\"468\" y2=\"0\">\n                        </line>\n                    </g>\n                    <g class=\"recharts-cartesian-grid-vertical\">\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"94\" y1=\"0\" x2=\"94\" y2=\"193\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"162\" y1=\"0\" x2=\"162\" y2=\"193\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"230\" y1=\"0\" x2=\"230\" y2=\"193\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"298\" y1=\"0\" x2=\"298\" y2=\"193\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"366\" y1=\"0\" x2=\"366\" y2=\"193\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"434\" y1=\"0\" x2=\"434\" y2=\"193\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"60\" y1=\"0\" x2=\"60\" y2=\"193\">\n                        </line>\n                        <line stroke-dasharray=\"3 3\" stroke=\"#ccc\" fill=\"none\" x=\"60\" y=\"0\" width=\"408\" height=\"193\" x1=\"468\" y1=\"0\" x2=\"468\" y2=\"193\">\n                        </line>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"193\" x2=\"468\" y2=\"193\">\n                    </line>\n                    <g class=\"recharts-cartesian-axis-ticks\">\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"94\" y1=\"199\" x2=\"94\" y2=\"193\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"94\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"94\" dy=\"0.71em\">January</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"162\" y1=\"199\" x2=\"162\" y2=\"193\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"162\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"162\" dy=\"0.71em\">February</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"230\" y1=\"199\" x2=\"230\" y2=\"193\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"230\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"230\" dy=\"0.71em\">March</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"298\" y1=\"199\" x2=\"298\" y2=\"193\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"298\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"298\" dy=\"0.71em\">April</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"366\" y1=\"199\" x2=\"366\" y2=\"193\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"366\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"366\" dy=\"0.71em\">May</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"193\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"434\" y1=\"199\" x2=\"434\" y2=\"193\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"434\" y=\"201\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"434\" dy=\"0.71em\">June</tspan>\n                            </text>\n                        </g>\n                    </g>\n                    <text offset=\"30\" x=\"264\" y=\"253\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                        <tspan x=\"264\" dy=\"0.71em\">Timerange</tspan>\n                    </text>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-yAxis yAxis\">\n                    <line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"0\" x2=\"60\" y2=\"193\">\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=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"193\" x2=\"60\" y2=\"193\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"193\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" 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=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"144.75\" x2=\"60\" y2=\"144.75\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"144.75\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" dy=\"0.355em\">15 €</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"96.5\" x2=\"60\" y2=\"96.5\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"96.5\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" 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=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"48.25\" x2=\"60\" y2=\"48.25\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"48.25\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" dy=\"0.355em\">45 €</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"left\" width=\"60\" height=\"193\" x=\"0\" y=\"0\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"54\" y1=\"0\" x2=\"60\" y2=\"0\">\n                            </line>\n                            <text orientation=\"left\" width=\"60\" height=\"193\" stroke=\"none\" x=\"52\" y=\"10\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"end\" fill=\"#666\">\n                                <tspan x=\"52\" dy=\"0.355em\">60 €</tspan>\n                            </text>\n                        </g>\n                    </g>\n                    <text offset=\"5\" transform=\"rotate(-90, 5, 96.5)\" x=\"5\" y=\"96.5\" class=\"recharts-text recharts-label\" text-anchor=\"start\" fill=\"#808080\">\n                        <tspan x=\"5\" dy=\"0.355em\">Costs</tspan>\n                    </text>\n                </g>\n                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                    <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"60\" y1=\"223\" x2=\"468\" 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=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"94\" y1=\"229\" x2=\"94\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"94\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"94\" dy=\"0.71em\">Q1</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"162\" y1=\"229\" x2=\"162\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"162\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"162\" dy=\"0.71em\">Q1</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"230\" y1=\"229\" x2=\"230\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"230\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"230\" dy=\"0.71em\">Q1</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"298\" y1=\"229\" x2=\"298\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"298\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"298\" dy=\"0.71em\">Q2</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"366\" y1=\"229\" x2=\"366\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"366\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"366\" dy=\"0.71em\">Q2</tspan>\n                            </text>\n                        </g>\n                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                            <line orientation=\"bottom\" width=\"408\" height=\"30\" x=\"60\" y=\"223\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"434\" y1=\"229\" x2=\"434\" y2=\"223\">\n                            </line>\n                            <text orientation=\"bottom\" width=\"408\" height=\"30\" stroke=\"none\" x=\"434\" y=\"231\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                <tspan x=\"434\" dy=\"0.71em\">Q2</tspan>\n                            </text>\n                        </g>\n                    </g>\n                </g>\n                <g class=\"recharts-layer recharts-bar\">\n                    <g class=\"recharts-layer recharts-bar-rectangles\">\n                        <g class=\"recharts-layer\">\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"66.8\" y=\"42.46000000000001\" width=\"54\" height=\"150.54\" radius=\"0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M 66.8,42.46000000000001 h 54 v 150.54 h -54 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"134.8\" y=\"122.23333333333333\" width=\"54\" height=\"70.76666666666667\" radius=\"0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M 134.8,122.23333333333333 h 54 v 70.76666666666667 h -54 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"202.8\" y=\"153.11333333333334\" width=\"54\" height=\"39.886666666666656\" radius=\"0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M 202.8,153.11333333333334 h 54 v 39.886666666666656 h -54 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"270.8\" y=\"180.51933333333335\" width=\"54\" height=\"12.48066666666665\" radius=\"0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M 270.8,180.51933333333335 h 54 v 12.48066666666665 h -54 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"338.8\" y=\"182.6101666666667\" width=\"54\" height=\"10.389833333333314\" radius=\"0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M 338.8,182.6101666666667 h 54 v 10.389833333333314 h -54 Z\">\n                                </path>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar-rectangle\">\n                                <path x=\"406.8\" y=\"177.97816666666668\" width=\"54\" height=\"15.02183333333332\" radius=\"0\" fill=\"#67abc5 \" class=\"recharts-rectangle\" d=\"M 406.8,177.97816666666668 h 54 v 15.02183333333332 h -54 Z\">\n                                </path>\n                            </g>\n                        </g>\n                    </g>\n                    <g class=\"recharts-layer\">\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(60px, 10px);\">\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": "BarChart",
+                  "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": "layout",
+                      "type": "String",
+                      "default": "horizontal",
+                      "description": "The layout of the chart. Possible values are: horizontal, vertical"
+                    },
+                    {
+                      "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": "true",
+                      "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": "useDataColors",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the color information shall be taken from the data input to use different colors for different entries."
+                    },
+                    {
+                      "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": "bars",
+                      "type": "Array of Bar",
+                      "default": "[]",
+                      "description": "Renders the provided Bar components."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Bar",
+                  "rows": [
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "color-coldplay-fountain",
+                      "description": "Defines the color for the whole bar component instead of individual colors from the data. 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 bar."
+                    },
+                    {
+                      "name": "dataUnit",
+                      "type": "String | Number",
+                      "default": "",
+                      "description": "The unit of data displayed for the bar."
+                    },
+                    {
+                      "name": "...",
+                      "type": "",
+                      "default": "",
+                      "description": "Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar"
+                    }
+                  ]
+                },
+                {
+                  "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": []
+}