{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-charts/layout/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section explains the components of a chart and how they are laid out inside a chart."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"how-is-the-chart-layout-calculated","style":"position:relative;"},"children":[{"type":"text","value":"How is the chart layout calculated?"},{"type":"element","tagName":"a","properties":{"href":"#how-is-the-chart-layout-calculated","ariaLabel":"how is the chart layout calculated permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.3.4/static/afd81f90f0bef7b2ce5d653e9c1c761b/78d47/cartesian-chart-layout.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 62.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC40lEQVQ4y22Ty4sdRRTG738gCIILIYuACAYlGHETF4KYhQYVjAiKIMaFmKUoIbgRH+ADESIhcZVVZohMBiG+8jDExUTNjENm5t4wMGbmvvr2u/rd1dVVv9DdOhstOBxOnTrfOV/xnR7/d4wBIVCOg5pOqdMUVSuUUl0+Sdo8eQ6uC1W1W9fLPI/UD0iDgDwMdy31PO4MBgyWV1i/uczGyl9sb26271LPJ7Ud0jAks2bkvk8eBJi6phfaNo4b4AeC8cxhOLMZzRw8XyCihFDEbS4MGx8TBKKN2zsRMx5NGdxaaxsZpehVVdUyjGTNaxc3eXZhwEvf38bJOhq1AQ1UdWe7v/KPD6KEjX6/CxrAPMsopcFJEo5cOM3Tc19x+PxJRiLsqppu2pBkGj9WFFJTKU1Z1dQabC9iMBi0LdoJ8zSlrkGUIa9cfp1DPxzm+Z9fJixddsKSz5e2+Gzpb86tT6hr0xUag9a6HUqEESvLq4i0gErSk0WB0lAUARcWD3Fu7gDz5w9iyoDfppscmH+f/fPv8calU+1kDZjSGlV3/FM/4vqvP7G6dQssu5uwrMHkLiw+CPP3wHf3Q+FzZ7bEmYXHOL2wn8VrbyKV/o/CQi+m/+Mc1upltBPQU1IiNdSJh/jyccSHexCfPoRKBWZyFc7eB2fvRV18rgX4Zehw/MaAEzduc2XayEXQ/+Mmpiwxkwm9IstaQC08oqNPEB/ZS/Tqw9SxQK5fI3hrD+LoA/ifvNACXv39az46s4+Pv32E68vfkKWajf4GaI1JU3pGa6QBFYeID17EP3YQ8e4zqDxB9v9EHHuK8O0nib54h7KR0aWTyOP7kCceRV85hZdr1tfWOik1wi6EIAkFSRARez7WzpDI8fAsm8B2sS2L6WiMZ7u4lo07cXDHDt7YIQlTfNtltLVF2Qi7qujphvu/JmW7l42vshRlWajt7c6GQ6pmp/MMU0mMqjANyM4OxDFaShq2dwFfHajue0gbTAAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Chart Layout","title":"Chart Layout","src":"/archive/29.3.4/static/afd81f90f0bef7b2ce5d653e9c1c761b/78d47/cartesian-chart-layout.png","srcSet":["/archive/29.3.4/static/afd81f90f0bef7b2ce5d653e9c1c761b/56d15/cartesian-chart-layout.png 200w","/archive/29.3.4/static/afd81f90f0bef7b2ce5d653e9c1c761b/d9f49/cartesian-chart-layout.png 400w","/archive/29.3.4/static/afd81f90f0bef7b2ce5d653e9c1c761b/78d47/cartesian-chart-layout.png 800w"],"sizes":["(max-width:","800px)","100vw,","800px"],"style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy","decoding":"async"},"children":[]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each chart is composed of a single or multiple series, and optionally a legend, axes, and captions, such as title, subtitle and footnote. All of these components are managed by the chart's layout engine. They are sized and positioned appropriately based on the chart's dimensions, the nature of the data and the configuration."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Components are laid out in the following order; earlier elements take up space that is then unavailable for the layout\nof later elements:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Chart padding"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Title plus its configured spacing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sub-title plus its configured spacing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Footnote plus its configured spacing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Legend plus its configured spacing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Navigator plus its configured margin"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Series area padding"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Axes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Series area"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If any elements are hidden (not configured, or turned off explicitly or dynamically) then they do not consume any space\nduring layout processing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"chart-padding","style":"position:relative;"},"children":[{"type":"text","value":"Chart Padding"},{"type":"element","tagName":"a","properties":{"href":"#chart-padding","ariaLabel":"chart padding permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":" configuration is applied first, ensuring a clear boundary of all other components from the edge of the canvas.\nSpace is consumed on all sides of the available area based upon the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":" configuration."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"title","style":"position:relative;"},"children":[{"type":"text","value":"Title"},{"type":"element","tagName":"a","properties":{"href":"#title","ariaLabel":"title permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"title"}]},{"type":"text","value":" configuration applies next, horizontally centring on the remaining space and consuming the\nheight of the title and its additional "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"title.spacing"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"sub-title","style":"position:relative;"},"children":[{"type":"text","value":"Sub-Title"},{"type":"element","tagName":"a","properties":{"href":"#sub-title","ariaLabel":"sub title permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"subtitle"}]},{"type":"text","value":" configuration applies next, horizontally centring on the remaining space and consuming the\nheight of the title and its additional "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"subtitle.spacing"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"footnote","style":"position:relative;"},"children":[{"type":"text","value":"Footnote"},{"type":"element","tagName":"a","properties":{"href":"#footnote","ariaLabel":"footnote permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"footnote"}]},{"type":"text","value":" configuration applies next, horizontally centring on the remaining space and consuming the height of the footnote and its additional "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"footnote.spacing"}]},{"type":"text","value":" at the bottom."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"legend","style":"position:relative;"},"children":[{"type":"text","value":"Legend"},{"type":"element","tagName":"a","properties":{"href":"#legend","ariaLabel":"legend permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"legend"}]},{"type":"text","value":" configuration is applied to the remaining space. The exact space consumed depends on how the\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/charts-legend/"},"children":[{"type":"text","value":"legend"}]},{"type":"text","value":" is configured."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"legend.spacing"}]},{"type":"text","value":" can be used to adjust the space between the legend and later components."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"navigator","style":"position:relative;"},"children":[{"type":"text","value":"Navigator"},{"type":"element","tagName":"a","properties":{"href":"#navigator","ariaLabel":"navigator permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigator"}]},{"type":"text","value":" configuration is applied next. The exact space consumed depends on how the\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/charts-navigator/"},"children":[{"type":"text","value":"navigator"}]},{"type":"text","value":" is configured."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigator.margin"}]},{"type":"text","value":" can be used to adjust the space between the navigator and later components."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"series-area-padding","style":"position:relative;"},"children":[{"type":"text","value":"Series Area Padding"},{"type":"element","tagName":"a","properties":{"href":"#series-area-padding","ariaLabel":"series area padding permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"seriesAreaPadding"}]},{"type":"text","value":" configuration is applied. It can be used to avoid the overlapping of series items with legend, title and axes labels."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"axes","style":"position:relative;"},"children":[{"type":"text","value":"Axes"},{"type":"element","tagName":"a","properties":{"href":"#axes","ariaLabel":"axes permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"axes"}]},{"type":"text","value":" layout is then calculated based upon the remaining space and how the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/charts-axes/"},"children":[{"type":"text","value":"axes"}]},{"type":"text","value":" are\nconfigured."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"series-area","style":"position:relative;"},"children":[{"type":"text","value":"Series Area"},{"type":"element","tagName":"a","properties":{"href":"#series-area","ariaLabel":"series area permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All remaining space is then dedicated to rendering of the configured "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" options."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"size-changes","style":"position:relative;"},"children":[{"type":"text","value":"Size Changes"},{"type":"element","tagName":"a","properties":{"href":"#size-changes","ariaLabel":"size changes permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the chart size changes, the layout process is performed for the new available canvas space.\nMost components are typically a fixed size, so typically it is the series-area which shrinks or grows\nand most other components just move around or adjust alignment."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, the chart will resize automatically to fill the container element. If either the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" configs are set, auto-sizing will be disabled unless the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoSize"}]},{"type":"text","value":" config is explicitly set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Make sure to give the chart's "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"container"}]},{"type":"text","value":" element an explicit size, otherwise you will run into a chicken and egg situation where the container expects to size itself according to the content and the chart expects to size itself according to the container."}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Layout","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"how-is-the-chart-layout-calculated","depth":2,"value":"How is the chart layout calculated?"},{"id":"chart-padding","depth":3,"value":"Chart Padding"},{"id":"title","depth":3,"value":"Title"},{"id":"sub-title","depth":3,"value":"Sub-Title"},{"id":"footnote","depth":3,"value":"Footnote"},{"id":"legend","depth":3,"value":"Legend"},{"id":"navigator","depth":3,"value":"Navigator"},{"id":"series-area-padding","depth":3,"value":"Series Area Padding"},{"id":"axes","depth":3,"value":"Axes"},{"id":"series-area","depth":3,"value":"Series Area"},{"id":"size-changes","depth":2,"value":"Size Changes"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/charts-layout","pageName":"charts-layout"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}