{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/integrated-charts-user-created/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"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\napplications such as Excel, but fully integrated inside your applications."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Users can select a range of cells in the grid and create a chart from the context menu, as shown below:"}]},{"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":"Notice that Chart Ranges appear in the grid after a chart is created. These provide useful visual feedback for users by\nhighlighting the charted category and series data in the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Try it out on our "},{"type":"element","tagName":"a","properties":{"href":"../../example"},"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/29.3.5/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/29.3.5/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":"p","properties":{},"children":[{"type":"text","value":"Note that developers can also programmatically create range charts, see "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/integrated-charts-application-created/"},"children":[{"type":"text","value":"Application Created Charts"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-user-created-charts","style":"position:relative;"},"children":[{"type":"text","value":"Enabling User Created Charts"},{"type":"element","tagName":"a","properties":{"href":"#enabling-user-created-charts","ariaLabel":"enabling user created charts 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":"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 enable 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/29.3.5/range-selection/"},"children":[{"type":"text","value":"Range Selection"}]},{"type":"text","value":" and / or display the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/integrated-charts-range-chart/#creating-chart-ranges"},"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":"text","value":"User Created Charts"},{"type":"element","tagName":"a","properties":{"href":"#user-created-charts","ariaLabel":"user created charts 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":"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/29.3.5/static/a190850340d64a657f2ce9128b4921b7/fa8f5/category-range-fill-handle.png","srcSet":["/archive/29.3.5/static/a190850340d64a657f2ce9128b4921b7/56d15/category-range-fill-handle.png 200w","/archive/29.3.5/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: 368px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 100.49999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAADkElEQVQ4y22U3W8bRRTF/d9V4pUneOGF/wAhJMRDkQriASFBVUCiD62iorRCEUGEQBFBatqHtIWiQKKE2I4Tf+x6vbvez9mZnZ39oRk7SRO60tXY1+tzz9x7zu3UtSYMIyopKYWg1pqqqsjyknFcMolLwrSkEiVlKRiNxni+T1mWLuxnG0EwI54ndNrWMAtD6romimOaRiOkYppW7E8l//iSPU+Q5AJRSY4HA/rHxw7cFrYFut0ew+GIJEnp8NLTtq07M1HTD3JOpgmDaYKXSPy0ppIKY1oXStVIVdM0BmOMy2V5YRm2LmHPs6BtmUczRsMTvMkIjL5StOVVRKRSdCxY0zQXYOCYZEJRKMhlS1Ep97KUEtU0SKWRUqHUIm/fr6ReMFzQXTI0C8C8lARlg6kF6/vf04tC6koh6gYtFPNfVxDBiAqI/3hMdPs64odPyWbeFcDlFQoDfq9P/eg6t7ffoxtHaN2SDbsUP35Iuf4GKjlF2H4/v8/k7mv8tPUOXjy5uLKxvVQK4ogyKel/d5f027dY2fmEo3DminWf3ePJxttsPLlBlHiYBv493OCrrXf5eOcm48i/GIpr7nCI9nzKoy7B3iH+dMLRZEiQltRS4c1DurMxvZlHVhYol4voTYdMwjHRfL5kqDUW0pyekhYFqeeTHh9T6GUhdwtzabhWJldzVqcLhk1zztAC5kGAt7tLnKZOImfTtyYwxrbH/C9nT+u2ju3fOUN7Zd9HHB3RBDOs+qxUrEScZGqN0mYhl2WuVppat9QGZ1fnlKVaaHUDcYxKc+KHDyh/XnH5WimEajk82KDYueOKW8/LquZFf5tw5yPKtc+Je4d0xrMjTBEg0yGNlg7AMhtsf0Z39Rrj7jplrdE1PPzzDoN71yi27zu2Rjas7q6xuvEm6RevM/vrGZ1Hfz+A6QvywW801XzRYw2b+5t8+fQm3zz9mtNoCA1s7f9C//H7xGsfkA162NZvHf7Oree3GG/eID7Yo3PqH6CSCSI+QSuxtJ5EK+OAtTRI65KqclcUCkqN20hnuUa2VBoS28NGt3h+cMnoVkrTICDNUjvjcye56dqJurjINVbhdspWNgvrNZe2jdXXfJ6QZdm5NF7+/WqcGcMB8orHSiLPCyePIK3ISum2sxCC4upZ2LMiz/PFxj5bDhfRuh7aLW7Xfn8mCLOKPEvdn9MsoygKx96C2u+2WJIkhFHMf+bO7V3xnOSoAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Open Chart Tool Panel","title":"Open Chart Tool Panel","src":"/archive/29.3.5/static/7ed307081ebeeb959c3c43f4489a8362/55493/chart-tool-panels.png","srcSet":["/archive/29.3.5/static/7ed307081ebeeb959c3c43f4489a8362/56d15/chart-tool-panels.png 200w","/archive/29.3.5/static/7ed307081ebeeb959c3c43f4489a8362/55493/chart-tool-panels.png 368w"],"sizes":["(max-width:","368px)","100vw,","368px"],"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-chart-tool-panels/"},"children":[{"type":"text","value":"Chart Tool Panels"}]},{"type":"text","value":":\n                The chart tool panels can be opened by a button located in the middle right part of the chart. The Chart Tool Panels allow 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":"text","value":"\n            "}]},{"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":"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":"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":"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: 166px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 166.26506024096386%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAhCAYAAADZPosTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEVUlEQVRIx51Wa1PbVhDVn+7Hhs70L+RTk2lnmhnyoS2Q4TUpaYINDCUEbEMTMDZ+gi1bkt+SrnR17+nsSpYfQPrQzJm9kq+O9uzukWXUOwFqCerdEI2u5DhFY2799LlEvRMyjPs+0B7EaNoKtY6MN/wH0D13DhjG3kEB67uHWNs5wGXJxn0PycboXyEm0zjOV7F3eAHjzds/8eLVBn5c3cSnzy00HaBihqiaEtXO46g9IATe/H6M1bU9GHbfQ28o4AwFus4E7e4QbSuGmaDVHaTX6bzeHi6UhtakjCUL4UP4HigGQnAMAwEpQwTJNWgFGQb8mwwFOtYAVTNAw5LcxAaTxo01fN9HDAHP80DHbaWCo+NjXo9GI+TyBdy3WgjDkEk79hANS6VZUQ3NIdAZAYYvBAhEprXGTamE/UyWiYIgwHg8wW/rGygWb6CUSgnrVsRkTVuj1QfOr9rcGEOwTAHh+wiFQM9xGEpKCM+DN5nA9zy44zGfUzmYsLtI+Dabxy+b+zBc2uy6cIMArgYEYkyiCK5S8LSGpzRH+t0PApjdwZLk2agZJNWTEbxmE97WNvxMFv6HfYb3/gOD14TtHQjThNkbo9oWC02Zrg1ozcXH9TVweorI8yBtC9JxgOEQGI/hmyaU6wInJ0CtCseTqLT8xHKzsSHphlYKRKlvSsDtLWq2jdOzM1yXylDxo3BTLmMQhkCpDDTqsN0QlRZlGDEpyT88K+Pd4eUcIWVYLHL9nH4fLs0fgCCKUK5U4Pg+cHUFVCuwXZkSTp3y61YGL1+tzxF2OtA7O8DREXB0CBwcQGcyDFDMZqF3d4F+D/ZYMGFsv9gt1G2CQbPHIFIiD8MFYA70O1jBJG3K9DXGTjEDGFJKRFGENCaIlIKMVBKj+IFJ/5yBy9nFY6NTp1gTwACSDJPdREqOIAatNLNovbhnSnjXmw12odhF9mNxTnIimwgJ00N/jXDOKZmTazx/sTonOYoj+ZfW3ljAvhsk5YgeEs45peloXtd4sJeOSMbZ3V042P4+n6SJRcK+yw1o2hE3pmlF7BKKxrIkGUq+qZG3sfksB0BxLecJ7f4ElbZIXq4hgzIkGNOaTRGIgFOq5yxsruSgIDnrRUIXlXaw4JSPFw0cnd8+LblZcLC1kk/04pEMg8QpITflp9ebeP7y9f8ljDOsW1H62iIL0rW0yw8kn1tcw8clxzVc/iggPNmUZt7G1kqOyZebkjrFmTmFZJsDzCQnruKZ+yfJy9ajWGyMcFm25yRLGfs4CPmmr0ledIriz5jtP07xw89rM8kq2XzfG2HjpoZGzsLWd3GG+rEMrWjhP6VYH+FLdTBHqOLNn1sOvnl/jsZ59wGhSp0y4XGh7MgdhPtEeio5lHEzvrRsPMsWUPtk8mBHkElddTpavYGbvGDjzzgip5mkB6RNmT79qt3Dt9nCQob8VyAVWn0f3ZFAtU2fImEyhxE75a9bB7lrE38DJdfERbA4D4UAAAAASUVORK5CYII='); 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/29.3.5/static/c5d0489d0fb0279203d2d3568ee7ff13/02ab0/chart-toolbar.png","srcSet":["/archive/29.3.5/static/c5d0489d0fb0279203d2d3568ee7ff13/02ab0/chart-toolbar.png 166w"],"sizes":["(max-width:","166px)","100vw,","166px"],"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":"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 a location or application dialog. For more details see the section on "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/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":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up 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":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about the: "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/integrated-charts-range-chart/"},"children":[{"type":"text","value":"Range Chart"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"User Created Charts","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-user-created-charts","depth":2,"value":"Enabling User Created Charts"},{"id":"user-created-charts","depth":2,"value":"User Created Charts"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/integrated-charts-user-created","pageName":"integrated-charts-user-created"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}