{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-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/27.3.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.3.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":"p","properties":{},"children":[{"type":"text","value":"Note that developers can also programmatically create range charts, see "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/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":"element","tagName":"a","properties":{"href":"#enabling-user-created-charts","ariaLabel":"enabling 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":"Enabling User Created Charts"}]},{"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/27.3.0/range-selection/"},"children":[{"type":"text","value":"Range Selection"}]},{"type":"text","value":" and / or display the "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/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":"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":"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.3.0/static/a190850340d64a657f2ce9128b4921b7/fa8f5/category-range-fill-handle.png","srcSet":["/archive/27.3.0/static/a190850340d64a657f2ce9128b4921b7/56d15/category-range-fill-handle.png 200w","/archive/27.3.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.3.0/static/56d4e1d99ad97424608295a1325a6f17/f8bcd/chart-toolbar.png","srcSet":["/archive/27.3.0/static/56d4e1d99ad97424608295a1325a6f17/56d15/chart-toolbar.png 200w","/archive/27.3.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 a location or application dialog. For more details see the section on "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.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":"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.3.0/integrated-charts-range-chart/"},"children":[{"type":"text","value":"Range Chart"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"User Created Charts","version":null,"enterprise":true,"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","angular","react","vue"],"framework":"react","srcPath":"/integrated-charts-user-created","pageName":"integrated-charts-user-created"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}