{"componentChunkName":"component---src-templates-doc-page-jsx","path":"/vue-data-grid/integrated-charts/","result":{"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section introduces the grid's integrated charting functionality, which allows users to chart directly inside the grid and supports applications that want to create pre-defined charts."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The charting functionality is deeply integrated with the grid. This integration gives users a seamless charting experience while keeping the coding required by developers to a minimum."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We are not aware of any other datagrid that provides such integration. Other companies may provide a grid library and / or a charting library, but it's up to the developer to tie the two together."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section introduces the two ways charts can be created from the data contained in the grid:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"#user-created-charts"},"children":[{"type":"text","value":"User Created Charts"}]},{"type":"text","value":": A user creates a chart using the grid's UI by selecting a range of cells or entering pivot mode and then creating a chart via the context menu."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"#application-created-charts"},"children":[{"type":"text","value":"Application Created Charts"}]},{"type":"text","value":": The application requests the grid to create a chart through the grid's charting API."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"charts-module","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#charts-module","ariaLabel":"charts module permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Charts Module"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To minimise bundle sizes for applications that do not require charting, charts are contained in a separate "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/modules/"},"children":[{"type":"text","value":"module"}]},{"type":"text","value":", which can be imported as follows:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// import all Enterprise modules"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" ModuleRegistry"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" AllModules "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'@ag-grid-enterprise/all-modules'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\nModuleRegistry"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"registerModules"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"AllModules"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// or only import minimal modules required for charts"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" ModuleRegistry "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"@ag-grid-community/core\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" ClientSideRowModelModule "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"@ag-grid-community/client-side-row-model\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" GridChartsModule "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"@ag-grid-enterprise/charts\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\nModuleRegistry"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"registerModules"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"ClientSideRowModelModule"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" GridChartsModule"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The charts module has been built from the ground up with zero dependencies on any third party libraries."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are not using ES6 Modules and are instead using the bundled version of AG Grid Enterprise, note that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise.js"}]},{"type":"text","value":" already contains the charting module."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-charts","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enabling-charts","ariaLabel":"enabling charts permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Enabling Charts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable charting in the grid set the following grid option:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    enableCharts: true\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To allow users to create charts from a "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/range-selection/"},"children":[{"type":"text","value":"Range Selection"}]},{"type":"text","value":" and / or display the "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/integrated-charts-range-chart/"},"children":[{"type":"text","value":"Chart Ranges"}]},{"type":"text","value":"\nin the grid, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableRangeSelection"}]},{"type":"text","value":" should also be enabled as follows:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    enableCharts: true,\n    enableRangeSelection: true\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"user-created-charts","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#user-created-charts","ariaLabel":"user created charts permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"User Created Charts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"User created charts are designed to provide an out-of-the box charting experience, similar to that found in spreadsheet applications such as Excel, but more compellingly it will be integrated inside your applications."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All that is required for users to create charts, from the data already contained in the grid, is to import the "},{"type":"element","tagName":"a","properties":{"href":"#charts-module"},"children":[{"type":"text","value":"charts module"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"#enabling-charts"},"children":[{"type":"text","value":"enable charts"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Try it out on our "},{"type":"element","tagName":"a","properties":{"href":"../../example.php"},"children":[{"type":"text","value":"demo page"}]},{"type":"text","value":" by doing the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select a "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/range-selection/"},"children":[{"type":"text","value":"Cell Range"}]},{"type":"text","value":" of numeric values in the grid by dragging the mouse over a range of cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Bring up the "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/context-menu/"},"children":[{"type":"text","value":"Context Menu"}]},{"type":"text","value":" and select the desired chart type from the 'Chart Range' sub menu."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"gif","properties":{"src":"chart-showcase.gif","alt":"Chart Showcase"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The animation above highlights a number of charting features. For more details on each feature follow the links provided below:"}]},{"type":"element","tagName":"div","properties":{"style":"display: flex; margin-bottom: 25px; margin-top: 25px;"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{"style":"flex: 1 1 0;"},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"ul","properties":{"className":["content"]},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../integrated-charts-range-chart/#creating-chart-ranges"},"children":[{"type":"text","value":"Chart Ranges"}]},{"type":"text","value":": When a chart is created, corresponding chart ranges appear in the grid and can be adjusted via the chart range handle."}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../integrated-charts-range-chart/#category-and-series-ranges"},"children":[{"type":"text","value":"Categories and Series"}]},{"type":"text","value":": Columns can be configured as either categories or series for charting. If not configured then the grid will infer whether a column contains category or series data."}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{"style":"flex: 1 1 0;"},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 345px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 69%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAADmklEQVQ4yy2Tu4/cVBTGrzAoQqCEQBCPBlFEUFBADwX9LKxEFcM/QgOUAYkUFCmQ6IAGkQaRJkvYBzuzm93N7Lw9Y69n7BmP7fH7vWNf3487q1zpJ9177qdP55x7DwFA+HqD8w7nLc6bnHc5L/zXbJHNfVoUxI8iYrsuKdblRv/aM+3bz7QvHj05IRVjhERp1vDjeMuP4u2df3e/CtO0sbCsz7nBZ5dl1diQX142+LnhhXHDDaJGXtKGrM6+2Ds4vOPHyRaPb8V5se2G4cckz3N4ngdN17C3u4uiKLCJ+UGIpWVdYTsukixDlqdIsxRRFECWJ2ift0FrCntlwfd9fp+3iROndB4mdbM/qH/+7XfqXq5rI0rqKEmo67nUtG3quC4N04Iu/IyaYcHJ6d+PD+mfD3doVKJWTa9UrQBumh6SfhyzptFnsi2zJ8aMPTU1NrpMmR9GzNDmzDQdxvvIvKxmZ2rC9s9UdtiZM8WmTHUY2zudsmZHo8dKBCnxWkRNEwwDBWqooWOpkCMDapkgzgp4rocgjFDzsvy8hmyuIWshxrMQmr3G3KGQ9RiKHtHRIsfkyjCO8eBkB0cLGWcG74utQMpj+FGChWlBX+i8ryn8AuhpKXrKCsfdOcbzDEYADNQAp/05PZE9bui3yCRJ0F5NMPVUnuEUk3CTYYowTuBYNpyVv6kYAc9wxE16kxW6ExsXRg7dqdDh+97YpH2zhFfjiChpwgahwqbBjJ0vVTYODMYNWZSkzDRM5jg+72HNeMlMMgrWl1esM7bYxTJnc6diA9lhg0VK5Y6GaKwckEGY0FZboRNtSI9thQ6jOR2v+QuHMTUtkzpeQMEYdTNGe7OCtgcW7counVoVvVhVtDlx6Kg1LJW796F/9+2CWNkaytTEzLAg2SvM+COYRcn/VAHf8xHx0hmtEa5LnNk2WqqKY11H11ph2V9COtEw++MRZt/cg3X3+2wzWmJ1ei4ujs9FSRqKRZKJm1gQ+GKn3RF73b6YZ4XIUIvDUBL/6e2LO08fiV1jIKI7veM8ePxlfq5v//LJpz/9+OEHX1/Nat0dEac7JktjQeqiuorFUUimikpMyyK0rEiNioySMTmQm2Rf2icjd3Klg+SR/V//2sz3K5xbpAKEvC8J9mgs6Etd4KMncKEQx7EwU2eCadkCrahQggpSqAo77T3BqFbP/XD/3vOv33z19vWXXv7o5vUb7926du32DUF4/39KrX6Rb9x9ugAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Range Handle","title":"Range Handle","src":"/archive/26.0.0/static/a190850340d64a657f2ce9128b4921b7/fa8f5/category-range-fill-handle.png","srcSet":["/archive/26.0.0/static/a190850340d64a657f2ce9128b4921b7/56d15/category-range-fill-handle.png 200w","/archive/26.0.0/static/a190850340d64a657f2ce9128b4921b7/fa8f5/category-range-fill-handle.png 345w"],"sizes":["(max-width:","345px)","100vw,","345px"],"style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy"},"children":[]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{"style":"display: flex; margin-bottom: 25px; margin-top: 25px; margin-left: 40px;"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{"style":"flex: 1 1 0;"},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 350px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 84%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAADeUlEQVQ4y21U227bRhDVj/Wt/9D+QvrUFwNB+9Cg6EsSx0CLpAUCwy3SunBkI27swLJlwZKs2PJVlHWhFEm07lIoiaIuFK9LnQ6XkVMYXWDI4XB55sycWQZqPQbPbrsWxNoY+VsVUsfksTpZpW0gJw25FeoT1PsuarKD+keb7xWrKooUL7XGGLQbCMhDDT11hk5vhHKthWKljpY85DHPml0FhXKV4jVUam30VQ0dindtIF+6RfT0BlfZDnKDKST2EQHd0DEj000Dpm3BcmwY5M8+xQ3L5DHPTPJnzIFSkzDdC2KiTRE/u0EyRQmVGRoWAdqOA262A8u2uXn+Iu49M8eF4zD/HcXYs++AR9/A/OsFTsQ6hFwbBQKs2wQ4n8/hui4W9/u+t4b6EFN9zH3cnIE9/xE6ue6jB4iGj3GSbkAcaKiaXQS8PYsPF0DcpztzGfdjtRgyHYH77u463J11mOSzle+R2NjEdZkEox7WvZI9AMbYHaPP/pzKszlIvJnATevaTxR8CRZ+A8MDJ6bHf7yCUJ3gw5B6eL/k/zJk1gycH41C5HoD2V7OBzzYAttc9UtefojI30Gc5rrI9yeQzPb/MKSmz2mzlntFIgyAkzBCoSfIqGUfUBLhPF6C1pfBfniAxKmASxKlophQnLHXw3sMaSy8pQnPYVNPcBHHfngF2bHk99C7rL8Avv0K7skh4uky4skCWiNfs4BmWgTISACXgzHqG2eY/g2WSYDnUewfPENmVLkD9N5jIPOWvD/PIiXKJIpGcygjoM4MLJa30WW+sh4gZ3ge44C5BUNKOv+kvpf8mAb7Kt+hwdbRtvrE0HDQHDWgaH0YpTQi5QNYtHkm/HrHMLS/jJRSuku6WIzAE2cZXGSbn0v2SjioRSB209C3X2I9tcYBjfyaD3gZx5t3T/BTMso/MMRLDI+2MTFtzvAsVYRQlFFSDPRslc6yPEBYfItiLw99Zw3B3AYp2MXg96+pXyqJEsXW7mMsxcIc0KxeYHi+BVUzePkxUtk7y4XFSRnSIQ9FVvBhJEF/u4pgYRPTRhnq8hdItG6JTQg7e0/x8PjQL1NOUmteQxkZnOHRewHxSwmSQiM3ZyRKeBuho59RpDnT/1nFa5H+Ik36m/zyJf7MZVHf38W70FMsxX3AbF/EXvEQY2UMhxgmhSKuSj1kZJuP378Mx9z9O0BbAgAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Chart Toolbar","title":"Chart Toolbar","src":"/archive/26.0.0/static/56d4e1d99ad97424608295a1325a6f17/f8bcd/chart-toolbar.png","srcSet":["/archive/26.0.0/static/56d4e1d99ad97424608295a1325a6f17/56d15/chart-toolbar.png 200w","/archive/26.0.0/static/56d4e1d99ad97424608295a1325a6f17/f8bcd/chart-toolbar.png 350w"],"sizes":["(max-width:","350px)","100vw,","350px"],"style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy"},"children":[]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{"style":"flex: 1 1 0;"},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"ul","properties":{"className":["content"]},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../integrated-charts-toolbar/"},"children":[{"type":"text","value":"Chart Toolbar"}]},{"type":"text","value":":\n                The chart toolbar is located in the top right area of the chart and allows a user to:\n                "},{"type":"element","tagName":"ul","properties":{"className":["content"]},"children":[{"type":"text","value":"\n                    "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Change the chart type"}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Change the theme"}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Change which columns are used as categories and series"}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Format different aspects of the chart"}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Unlink the chart from the grid"}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Download the chart"}]},{"type":"text","value":"\n                "}]},{"type":"text","value":"\n            "}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, user created charts are displayed inside the grid's own popup windows. The windows can be moved (by mouse dragging a window's title bar) and resized (by mouse dragging a window's borders)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to display user created charts in an another location or application dialog. For more details see the section on "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/integrated-charts-container/"},"children":[{"type":"text","value":"providing a chart container"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If using the grid's own popup window, you will probably want to use the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"popupParent"}]},{"type":"text","value":" so that the popup windows are not constrained to the bounds of the grid. Typically users set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"popupParent=document.body"}]},{"type":"text","value":" to achieve this."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"application-created-charts","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#application-created-charts","ariaLabel":"application created charts permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Application-created Charts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Charts can be pre-defined or dynamically created from within applications, and as with "},{"type":"element","tagName":"a","properties":{"href":"#user-created-charts"},"children":[{"type":"text","value":"user-created charts"}]},{"type":"text","value":", these charts also benefit from the integration provided with the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The dummy financial application below just touches on what is possible with the grid's integrated charting capabilities. The following should be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pre-Defined Chart"}]},{"type":"text","value":": A pre-defined chart is shown in a separate chart container below the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Dynamic Charts"}]},{"type":"text","value":": Buttons positioned above the grid dynamically create different chart types."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"High Performance"}]},{"type":"text","value":": 100 rows are randomly updated 10 times a second (1,000 updates per second). Try updating the example via Plunker with higher update frequencies and more data."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Application Created Charts","name":"application-created-charts","type":"vanilla","options":"{ \"exampleHeight\": 825, \"enterprise\": true }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To learn how to create charts in your applications see the following sections for details:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/integrated-charts-api/"},"children":[{"type":"text","value":"Chart API"}]},{"type":"text","value":": Used to create charts programmatically inside applications."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/integrated-charts-container/"},"children":[{"type":"text","value":"Provide a Chart Container"}]},{"type":"text","value":": Used to target chart containers inside the application instead of the popup window provided by the grid."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"chart-customisation","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#chart-customisation","ariaLabel":"chart customisation permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Chart Customisation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before each chart is created, the developer can perform fine-grained "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/integrated-charts-customisation/"},"children":[{"type":"text","value":"Chart Customisation"}]},{"type":"text","value":" to change the chart's appearance and behaviour. For example, you can change the thickness of the lines, or customise the formatting of the axis labels."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The section "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/integrated-charts-customisation/"},"children":[{"type":"text","value":"Chart Customisation"}]},{"type":"text","value":" outlines all the items that can be customised for each chart type."}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about the: "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/integrated-charts-range-chart/"},"children":[{"type":"text","value":"Range Chart"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Integrated Charts","version":null,"enterprise":true,"description":null,"rootPage":null},"headings":[{"id":"charts-module","depth":2,"value":"Charts Module"},{"id":"enabling-charts","depth":2,"value":"Enabling Charts"},{"id":"user-created-charts","depth":2,"value":"User Created Charts"},{"id":"application-created-charts","depth":2,"value":"Application-created Charts"},{"id":"chart-customisation","depth":2,"value":"Chart Customisation"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"vue","srcPath":"/integrated-charts","pageName":"integrated-charts"}},"staticQueryHashes":["1766026005","3577950178","3666212512"]}