--- title: "Layout" framework: javascript version: "14.1.0" --- # Layout This section explains how the chart and its components are sized and laid out within the available space. ## Chart Size The chart will auto-size by default, taking the size of the container element and auto-sizing the chart dynamically. Use the `width` and/or `height` options if a fixed size is required. When auto-sizing, the chart will default to a minimum width and height of 300px. Set `minHeight: 0` and/or `minWidth: 0` to remove this constraint. ### Size Changes The chart monitors the size of the `container` element, and resizes dynamically. When the container size changes, the layout process is repeated for the new canvas space. As most chart components are a fixed size, it is usually the series-area which shrinks or grows, with the other components moving around or adjusting alignment. ## Sizing the Chart Container A `
` element is commonly used for the `container`, and the default height for this element type is `0px`. The chart's minimum height default will cause it to have a height of 300px. Users should explicitly manage the browser calculated `container` element size to achieve the dynamic size required. ### Sizing with Classes and Styles #### Chart Size (Class) ```ts import { AgChartOptions, AgCharts, BarSeriesModule, CategoryAxisModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-community"; ModuleRegistry.registerModules([ BarSeriesModule, CategoryAxisModule, LegendModule, NumberAxisModule, ]); const options: AgChartOptions = { data: [ { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 }, { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 }, { month: "May", avgTemp: 16.2, iceCreamSales: 800000 }, { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 }, { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 }, { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 }, ], series: [{ type: "bar", xKey: "month", yKey: "iceCreamSales" }], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Chart Size (Class)](https://www.ag-grid.com/charts/typescript/layout/examples/chart-class) ```html
``` ```js const options = { container: document.getElementById('myChart'), }; AgCharts.create(options); ``` In this configuration: - The element containing the chart is sized using inline styles. It could also be sized by styling the provided class. - All attributes on the `container` element - including `class` and `style` - are left unchanged when calling `AgCharts.create`. ### Sizing with Grid Layout #### Chart Size (Parent Grid) ```ts import { AgChartOptions, AgCharts, BarSeriesModule, CategoryAxisModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-community"; ModuleRegistry.registerModules([ BarSeriesModule, CategoryAxisModule, LegendModule, NumberAxisModule, ]); const options: AgChartOptions = { data: [ { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 }, { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 }, { month: "May", avgTemp: 16.2, iceCreamSales: 800000 }, { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 }, { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 }, { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 }, ], series: [{ type: "bar", xKey: "month", yKey: "iceCreamSales" }], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Chart Size (Parent Grid)](https://www.ag-grid.com/charts/typescript/layout/examples/chart-parent-grid) ```html
``` In this configuration: - The chart container is styled by placing it within a parent element using a `display: grid` layout. - In this example, the grid has a single cell. By default, grid stretches child elements to fill the width and height of the cell. ## Chart Layout Calculation ![Chart Layout](https://www.ag-grid.com/charts/_astro/cartesian-chart-layout.C4YWr2YJ.png) Each chart is composed of a single or multiple series, and optionally a [Legend](https://www.ag-grid.com/charts/javascript/legend/), [Axes](https://www.ag-grid.com/charts/javascript/axes-types/), 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. Components are laid out in the following order; earlier elements take up space that is then unavailable for the layout of later elements: - Chart padding. - Title plus its configured spacing. - Subtitle plus its configured spacing. - Footnote plus its configured spacing. - [Legend](https://www.ag-grid.com/charts/javascript/legend/) plus its configured spacing. - [Toolbar](https://www.ag-grid.com/charts/javascript/financial-charts-toolbar/). - [Range Buttons](https://www.ag-grid.com/charts/javascript/range-buttons/). - [Navigator](https://www.ag-grid.com/charts/javascript/navigator/) plus its configured spacing. - Series area padding. - [Axes](https://www.ag-grid.com/charts/javascript/axes-types/). - Series area. If any elements are disabled or not used, they do not consume any space during layout processing. ### Chart Padding `padding` configuration is applied first, ensuring a clear boundary of all other components from the edge of the canvas. Space is consumed on all sides of the available area based upon the `padding` configuration. ### Title `title` configuration applies next, horizontally centring on the remaining space and consuming the height of the title and its additional `title.spacing`. ### Subtitle `subtitle` configuration applies next, horizontally centring on the remaining space and consuming the height of the subtitle and its additional `subtitle.spacing`. ### Footnote `footnote` configuration applies next, horizontally centring on the remaining space and consuming the height of the footnote and its additional `footnote.spacing` at the bottom. ### Legend `legend` configuration is applied to the remaining space. The exact space consumed depends on how the [Legend](https://www.ag-grid.com/charts/javascript/legend/) is configured. `legend.spacing` can be used to adjust the space between the Legend and later components. ### Toolbar and Range Buttons The Toolbar and Range Buttons are then placed next, taking up a fixed amount of space. ### Navigator `navigator` configuration is applied next. The exact space consumed depends on how the [Navigator](https://www.ag-grid.com/charts/javascript/navigator/) is configured. `navigator.spacing` can be used to adjust the space between the Navigator and later components. ### Series Area Padding `seriesArea.padding` configuration is applied. It can be used to avoid the overlapping of series items with [Legend](https://www.ag-grid.com/charts/javascript/legend/), title and [Axes labels](https://www.ag-grid.com/charts/javascript/axes-labels/). ### Axes `axes` layout is then calculated based upon the remaining space and how the [Axes](https://www.ag-grid.com/charts/javascript/axes-types/) are configured. ### Series Area All remaining space is then dedicated to rendering of the configured `series` options.