{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-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/27.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 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/27.0.0/range-selection/"},"children":[{"type":"text","value":"Range Selection"}]},{"type":"text","value":" and / or display the "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.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/27.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/27.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/cVBTGjzAoQqCEQBCPBlFEUFBADwX9LESiiuEfoQHKgEQKihRIdECDSINIkyXsg53NZrOZndfOjO14nh7b49e9fu7Y1/dDs0rxNd/56eic4kcAiIjeIKJ3iOgtInqTiN4lohf+ax7SZp4WBYWck+v7VKzLDf/aM/btZ+yLDx8dUyUlEU+zRhjHWyGPb2z/u/MVS9PGwnE+Dzn/7LysGpvk5+eNkPNGwOKGH/FGXoqGbk6+2N0/uBnGyVbA4q04L274jH1MeZ4jCAJMZ1Ps7uygKApsujBiWDrORVzPR5JlyPIUaZaC8wi6rqF12oKoBdyVgzAMkeV5i7w4FXOW1M1ev/75t9+Ff76uLZ7UPEmEH/jCdl3h+b5gaSEWYSZsVgib5eLvBwfiz3vbgpeoTTsoTSeCn6YH1Itj2bR6Und1+ciayCf2VA7OUxkyLq3pXNq2JwHIIKvliZnIvRNTHrTn0nCFND0pdx+PZbM9FUcGxzAJDslME5xFBkw2RdsxoXMLZpkgzgoEfoCIcdS1QJjX0O019CnDaMIwddeYewL6LIYx42KwyKFdLIxj3D3exsOFjhNLQ8s1MMxjhDzBwnYwW8xQFCnCAuhOU3SNFY46c4zmGawI6JsRHvfm4lgPoCXhIWlJgtZKwzgw0XbG0NjmwhQsTuA5LrxVuPkYUV5jMM/Q1VboaC6eWjlmXoW25qI7skXPLhHUeEhGmsg+M+Q4msjTpSlHkSXNMpU8SaVt2dLzQgnUMsxrObQK2dNXsj1y5NNlLudeJfu6J/uLVOjtKfjI2Kc+S8RhyxDa9EwcuYY443MxWifCZ7GwHVt4QSQgpfAzKbqTQrT6jujovhg7lXi6qkRT88Tg8Kw0bt3B7LtvF+RkaxhjGxPLwdBdYcI47KJElhcIgxA8TiBFDbYuceK6ODRNHM1m6DgrLHtLDI+nmPxxH5NvbsO59X22UUutHp+qi6NTdTg8U4skUzddFIVqu9VWu52emmeFKlGrZ2yo/tPdU7ef3Fc7Vl9FZ3zTu/vgy/x0duOXTz796ccPP/j6wtW6MyCvM6KltaC6qC66mDMaGybZjkOirKhGRYNkRPt6k/aGezTwtQsOw4D2fv1r4/crRHSNKkDJe0PFHYyU2XKmFEWhAFDiOFYm5kSxHVcRlVBKCGXITGW7tatY1eq5H+7cfv71q69ev/zSyx9dvXzlvWuXLl2/oijv/w9KrX6Rhax2eAAAAABJRU5ErkJggg=='); 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/27.0.0/static/a190850340d64a657f2ce9128b4921b7/fa8f5/category-range-fill-handle.png","srcSet":["/archive/27.0.0/static/a190850340d64a657f2ce9128b4921b7/56d15/category-range-fill-handle.png 200w","/archive/27.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","decoding":"async"},"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+AAAACXBIWXMAAAsTAAALEwEAmpwYAAADcklEQVQ4y22TW08bRxzF/cX61u/QfoX0qS9IUfvQKOpLEoLUirRShGiVlooYFBqIMBgEGML9YsDX+IIv+IIv6/VlvddZ/6qdrUmFOtLZPfufmTPnzOwEik2Bh5u6RbLYI3Gjkq+ZslZqCnJVg3i+I5Eq9Sm1XIoNh9KdLccmCyrpUp9MpUe7WibQ6Gg01SG1ZpdssUI6V6LS6Miah9u6QipbIJ0rkitWaakaNXVI3YZE5obtgyvOYjXi7QF5cUdAN3SGho5uGpi2heXYGKYhax4My5Q1D6ZlMhQOSjHPYDVIXxsQObri8KJAWhlStu4I2I6DhO1g2baEx8d171s4Lo4j/D7HQbz8Dp58g/nnK/aTJaLxKillSMm+IzAajXBdl/H7IfdaR+8w0HuSc3WEmH6KDrhPHrEd3mX/skyyrVEw6wS8MeOJYyHJXRfhCsl3ijtc16KSuytzuMtzmICY+p69+QXOsx1S7QElL7InIIS4d/SZj7AdW4pEbve4qpz7CwVfI8LvMDzx6afs/v6GaKHPp86Q8sPI/3UorCHSX7XM5vk8sWbcF1xfRCzM+JEnH7P5V5CDeJ1Eq0/erP6PQ8dhBGjxN1h2G/bDhELPuVazvmA+ifNsAq3VQPzwiL2DKKfxKjnFRHF63h4+cCgcOVGLTmNbd3ASYS08RayX9/fQe8y9gm+/wt3fIHKZJXKYotL1zyygmRauKxCeQ+EgHNt3ePkrlnkHx9usrb/kupu7F/T6aTfklnw8jnGRbJBqa5StBgF1aDBu3kBX+CfrCUqHxztSMD52KBxG/56+t/ju0RVniRppRadqtQhohsNtt4yitTAyl2xm17GAYfSXe4ehtUkulMz9ouMmhMPe0TUnsdvPkb0I68VNkvVL9KXXzF3MSkEjMesLnkZ49+E5Px5uywlG8pTO1hJ905YOjy7SRNMNMopB01YJ6I024eR70s0E+vIswfg8WqtO+7evcVHhZJvFlWdM7ISloFk4oXO8iKoZMv7OQVTe5dT4pnRWg4Q2p/jUzaO/nyGYWmBQzqJOfsFe5YbOVojl1Rc83t3wYzYOMTJvUbqGdLj1MUrkNE9ecREjQUANLxHa+om0mkX/e4a3ySD92zyDn7/kj3iM0toKH0IvmIj4grFWktX0Bj2lhyMcDqNpzjJNrhu2/P3+AQzH3P0SUBV6AAAAAElFTkSuQmCC'); 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/27.0.0/static/56d4e1d99ad97424608295a1325a6f17/f8bcd/chart-toolbar.png","srcSet":["/archive/27.0.0/static/56d4e1d99ad97424608295a1325a6f17/56d15/chart-toolbar.png 200w","/archive/27.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","decoding":"async"},"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/27.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":"typescript","options":"{ \"exampleHeight\": 825, \"enterprise\": true, \"modules\": [\"clientside\", \"charts\"] }"},"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/27.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/27.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/27.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/27.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/27.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},"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":"javascript","srcPath":"/integrated-charts","pageName":"integrated-charts"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}