{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/integrated-charts-chart-tool-panels/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Chart Tool Panels allow users to change the selected chart type and customise the data and chart formatting. "}]},{"type":"element","tagName":"div","properties":{"style":"display: flex; margin-bottom: 25px; margin-top: 25px; margin-left: 35px"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"figure","properties":{"style":"flex: 3; margin: 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":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.1.0/static/7ed307081ebeeb959c3c43f4489a8362/55493/chart-tool-panels.png","style":"display: block","target":"_blank","rel":["noopener"]},"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 Panels with button to close it on the middle left of the panels","title":"Open Chart Tool Panels with button to close it on the middle left of the panels","src":"/archive/29.1.0/static/7ed307081ebeeb959c3c43f4489a8362/55493/chart-tool-panels.png","srcSet":["/archive/29.1.0/static/7ed307081ebeeb959c3c43f4489a8362/56d15/chart-tool-panels.png 200w","/archive/29.1.0/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":"figcaption","properties":{"style":"text-align: center; font-size: 0.85rem; margin-top: 10px;"},"children":[{"type":"text","value":"Accessing Chart Tool Panels"}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Chart Tool Panels are accessed by clicking on the button highlighted above. Note they can also be opened\nvia configuration (see examples in this section) or programmatically through the Grid API, see "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/integrated-charts-api-chart-tool-panel/#opening-and-closing-the-chart-tool-panel-via-grid-api/"},"children":[{"type":"text","value":"Open / Close Chart Tool Panels"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"settings-tool-panel","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#settings-tool-panel","ariaLabel":"settings tool panel 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":"Settings Tool Panel"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Settings Panel can be used to change the chart type and chart theme."}]},{"type":"element","tagName":"figure","properties":{"style":"flex: 3;"},"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: 241px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.1.0/static/d4ad04848f791b452d8a24e2bd0a61ea/62847/settings-panel.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 139.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAIAAADuuAg3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAD/0lEQVQ4y5VV628VRRTf/8/HFxPiB+MHS2LU8IVERTHEaGJBoYpNIY1UDUQSuGABCxJ5FGpLpcLt6/ZevtAH99FC7+7O+5wzM7tjdm9bUfFDf/llc+Y3e3bOzDl7JkpSxqVmQiVcMaGELCilkkoxzrkQUqkehZApY5wLLkRPjxxoYexcB+fXsbaB9aeYOcocIeJibXFqenp1bS3znog453MLC0v1+syfD1rtdpZlUa0tGhsw1zaLHT3bNtWWqa2bdmoQjBAySZkQAgBMCSElFyJlTClljImeJrorIJZYElJFXUlCEyIhWSKLZAGpRyyHhVgOI0RcXVmpL9Ua9fry8nLYDSJEstb2oiLEPMuzfyLP/pbycnrrmeWRlMpaV3zA9uLZQS9yAqIdCcohkDXFLEZcKEAMIayxJxcaF5z1gGAAASCEAM3H/NIwuQyMhjzEty52fzwSV4bMzTNINmKMaRdC62518tCXsyc9OUDQWhsf9OIfz346oK7vR/KoFYTQPtuffPXKs7NvPr7zMaGNOLnNG7+Y83sXxvu+WTztkcAUnvHkRV3pM1f34IODiA6NUj6Yqc9b1167MnngxOL3rnD2of3dF3zwpYd33j1aPVU6K/Shdvuz8Ut7Rm+9//P9Y0TWgLYuTE0OfP3re59M9A9XT5YrK71RX9isTTxZuT/frBfbLU9maa0+tVydXl2YbzVMKRJQ9cmj6eWHc6uzteaSMRBJpUMIPgTn88xlSNQ758xnwYf8RWK2LUaA1Gq10yTJtxC2uZ3N/xeLImk8ajSbzbB7RKbMZ57nZZlY9xyscy8WSzrnIiGlURKNsoTWunJvCIDaKAL9L1EZjaDJKDIaACPOxfpI/+a3HwAXIQQisgCJsdP3DrPKPky3RELkBi9ODfK7ffHZfenQR7q7ETEu9M1D4Wpf/uBIsIZcRgDM4LV7x9mNt9nYYAZkvcciFjM8MzIx+SFdficePqg3S+exiUOVG29Vftt7pXEu1cKRFcacuNvfGnuZn36VXRkGzpCs1vrw70c/vb1/9vLrfOANsd6JUsbPzY+NzFd+mKucrp7ZZF1nndR6dHZ0beY4mzm2fn5Abj4j55TSl2dHR+bPTz08xa4PyW4ccSEzyoINwRUsOkbRdMBTBj5oHyAE85wYXLA+6Lx4M9IGnHc+82QtbaXFO+cLy1JBIrcjut6fX+rORUi0VK93Ouu9bO+uSIislFKIIiU+y3eFSAjpnCuzC56KBgJFG6FtA/9jgCkNBIi0Np1Oxxit0Y4vg0YLxnTj2Dknihadeu/TNJWyWCOOY2PAWlu6mChJWZKkQkghVbNb3jVCMsaV0lwIxguDlRePlCplTAgppYqTRAj5F/DZC7Ta7rMMAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Chart Settings Panel","title":"Chart Settings Panel","src":"/archive/29.1.0/static/d4ad04848f791b452d8a24e2bd0a61ea/62847/settings-panel.png","srcSet":["/archive/29.1.0/static/d4ad04848f791b452d8a24e2bd0a61ea/56d15/settings-panel.png 200w","/archive/29.1.0/static/d4ad04848f791b452d8a24e2bd0a61ea/62847/settings-panel.png 241w"],"sizes":["(max-width:","241px)","100vw,","241px"],"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":"figcaption","properties":{"style":"text-align: center; font-size: 0.85rem; margin-top: 10px;"},"children":[{"type":"text","value":"Chart Settings Panel"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to configure which chart groups and chart types are included and in which order via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartToolPanelsDef"}]},{"type":"text","value":" grid option: "}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"charts","names":"[\"chartToolPanelsDef\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The full list of chart groups with the corresponding chart types are shown below:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ChartGroupsDef","config":"{\"description\":\"\", \"asCode\":true, \"lineBetweenProps\": false}"},"children":[]}]},{"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":"The contents and order of chart menu items in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/context-menu/"},"children":[{"type":"text","value":"Context Menu"}]},{"type":"text","value":" will match the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ChartGroupsDef"}]},{"type":"text","value":" configuration."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows a subset of the provided chart groups with the chart types reordered. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Only the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pie"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Columns"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Bar"}]},{"type":"text","value":" chart groups are shown in the settings panel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Only the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pie"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Columns"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Bar"}]},{"type":"text","value":" chart groups are shown in the Context Menu when you right click the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Note the order of the chart groups and their chart types matches the order they are specified in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartGroupsDef"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Settings Panel is configured to be open by default via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultToolPanel: 'settings'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Settings Tool Panel Customisation","name":"settings-panel-customisation","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"charts\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"data-tool-panel","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#data-tool-panel","ariaLabel":"data tool panel 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":"Data Tool Panel"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Data Panel can be used to change the chart category and series."}]},{"type":"element","tagName":"figure","properties":{"style":"flex: 3;"},"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: 241px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.1.0/static/feaf61d732e234644f3511c5604b7cd9/62847/data-panel.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 139.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAIAAADuuAg3AAAACXBIWXMAAAsTAAALEwEAmpwYAAACaUlEQVQ4y52VT3PTMBDF/a05wwUYPg0XjnDotA1JGie2kyZASzxN4tiRLGn1ZyXZjhknMAwHiMtv9iBr9Px2Z57sgHEBIAUAY1wIkFJJ1RVIxUBx6BYgzzuS8e6MgK6kUoFBpJR8Hg5H4/EkDKezmbW2rlxTuVVhxxu7466tXVV5IcQ0iuaLxXA03my3TdMEAqRBZJyDlGXJCKXOYsZNkpl4Z6ZbHe3MYm9KMIgG5KlHzpVSxpgApEa0aJ02aJ33VYVowVgiXalOJR2VTqND69B667xz3nZrF1RVzRjTWifz+XQ2i+NksVzGScJY2bbt8Xhs/05grWtOOO8RkQthELUx3vvmeGz+SSClEoJLKYUQ6gQiVpV3zl4kEAB5nh8Oh+FoNIviyTTMsqzqJsfLYikVLUshBOecliVjTErp+vienTnJKTmM7yaTMLy5HazTtK7rXs6g1PDJrInREgCkMcb2JgCpXg+qTw8mHA3uwmnPhn/PvCecCckY46foPEMsAIp8X+T57WBwF4YPj4++t3nXNlqLaLvsIjrnu8d+FTjnzwBIbTqOvemyTUsmlYrieLlaxUlS13XbjwAR27Ztmub8svNu0zR1DwIO6s21ufqugRYHQtM0Xadpz5B14pdX+GGlBckKQr98/ZbM50qpvuK3N3i9NppTJsTTZlMUBReir/jVyZkVO1qy+/vlLIoOhPSJdyd+d4s3qTFQElpmWUYI3e/3AJfH7sQvPuL7hWL5ZpvtZ1E8XyyS+ZxQ6r2/lG2l/MmiqqrK++OvT89F5c+LcW4P/6RXtpXW3nfe/0HAuFBan38xz60fwQg9Frni2ckAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Chart Data Panel","title":"Chart Data Panel","src":"/archive/29.1.0/static/feaf61d732e234644f3511c5604b7cd9/62847/data-panel.png","srcSet":["/archive/29.1.0/static/feaf61d732e234644f3511c5604b7cd9/56d15/data-panel.png 200w","/archive/29.1.0/static/feaf61d732e234644f3511c5604b7cd9/62847/data-panel.png 241w"],"sizes":["(max-width:","241px)","100vw,","241px"],"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":"figcaption","properties":{"style":"text-align: center; font-size: 0.85rem; margin-top: 10px;"},"children":[{"type":"text","value":"Chart Data Panel"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to configure which groups are shown, the order in which they appear and whether they are opened by default via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartToolPanelsDef"}]},{"type":"text","value":" grid option:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"charts","names":"[\"chartToolPanelsDef\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default list and order of the Data Panel groups are as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    chartToolPanelsDef: {\n        dataPanel: {\n            groups: [\n                { type: 'categories', isOpen: true },\n                { type: 'series', isOpen: true },\n                { type: 'seriesChartType', isOpen: true }\n            ]\n        }\n    }\n}\n"}]},{"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":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"seriesChartType"}]},{"type":"text","value":" group is only shown in "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/integrated-charts-api-range-chart/#combination-charts/"},"children":[{"type":"text","value":"Combination Charts"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows some Data Panel customisations. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Categories"}]},{"type":"text","value":" group is not included."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Series"}]},{"type":"text","value":" group is closed by default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Data Panel is configured to be open by default via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultToolPanel: 'data'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Data Tool Panel Customisation","name":"data-panel-customisation","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"charts\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"format-tool-panel","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#format-tool-panel","ariaLabel":"format tool panel 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":"Format Tool Panel"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Format Panel allows users to format the chart where the available formatting options differ between chart types."}]},{"type":"element","tagName":"figure","properties":{"style":"flex: 3;"},"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: 241px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.1.0/static/f70a0405425b28cb54ae903dd68e552f/62847/format-panel.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 139.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAIAAADuuAg3AAAACXBIWXMAAAsTAAALEwEAmpwYAAADBUlEQVQ4y41VC3LiOBD1MfeCc4A9RMIMsIEJGJIJycQhhID+v25JtvGUEGEosqni1avCNt2y+r1uuRBSaW2U1kJIpbQx1tgDpVLpv/21NlZpy5WV+kBtbAGIjNEf/f5gOLwZjcY/f3rvY4ze+8lkctXrPVdV27Zt9ODDfBMeiB+v/VaHrg2F0hoRhZTGWi4EYxw+oLXhQup9wBOBcg2TN7h9g/EKpmuYvUOhjQP06IN14ENEH470IYYQ80NhAzWB2wOZDcyEom13lFHnXDmbTcvy5eWluxgF+tC2u6ZpY6wBfV03u13XtO0lLEKIMYa6abwPIQRABMTdZSjqumFcWMDZfD4YDm8n0+rinSer0u+uaZumbpqPRdvmAhQe7COBbxNcESGlYJxTSpVS/gIUDdrrCv/51w/ul7Pytve9/73fv//1K/fJEeETU7KxFkOQzmfBDoH/B/wAACBiTnYADp11zllrAeBzGgCmrt+3vbXOh5CaXpsC0b8sl6Px+Mdg0B8Mn6uqruu88EkylLPZzXg8mZbz+/uu69bv71tCC2NsMjqEs4SzDafB0ibRGOfA+xRfOABK6fNz9bpaLZevhJAvSt5LklsqBJ9rBsDNZjMajadleXd3t1gs6rqOXwARbRIHkk4ASW0AZFwCAOOCMrGl7DM3hDIuQohPT78fFouu6xxgSvbeW+uSmmlZ2DMpf4b0RvRCSCFVCNE5KKxzOp1BQso090pJKZVzLpd2ylP/Dz5nq657vZvRaFqWi8fH/mBYVdVu14bgYwynxJwUQi62yFslhFGWCiaUCyEo4/n2SEKFEKnht1vyulp1XQe5ZkQ8eHigysfmGfeRnlD29rZumtY6OAiWXczDgIhHP8+Q42Ks/9ZcVdXV1fXwv5tpWc7nd6lV+/2HxaKpa/8p+XRCCmudte59s9kSsiVESMUY3xLCOD+e/plJG0AuBADGWKdtZ2MpZcYYSpNsjAvGZRbvyC1hXEhEr7Sum6brOkRfcCFdAmitPzrkS2pjlDZS6f2nSf8Bmok4d/RqQsMAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Chart Format Panel","title":"Chart Format Panel","src":"/archive/29.1.0/static/f70a0405425b28cb54ae903dd68e552f/62847/format-panel.png","srcSet":["/archive/29.1.0/static/f70a0405425b28cb54ae903dd68e552f/56d15/format-panel.png 200w","/archive/29.1.0/static/f70a0405425b28cb54ae903dd68e552f/62847/format-panel.png 241w"],"sizes":["(max-width:","241px)","100vw,","241px"],"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":"figcaption","properties":{"style":"text-align: center; font-size: 0.85rem; margin-top: 10px;"},"children":[{"type":"text","value":"Chart Format Panel"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to configure which groups are shown, the order in which they appear and whether they are opened by default via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartToolPanelsDef"}]},{"type":"text","value":" grid option:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"charts","names":"[\"chartToolPanelsDef\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default list and order of format groups are as follows:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    chartToolPanelsDef: {\n        formatPanel: {\n            groups: [\n                { type: 'chart', isOpen: false },\n                { type: 'legend', isOpen: false },\n                { type: 'axis', isOpen: false },\n                { type: 'series', isOpen: false },\n                { type: 'navigator', isOpen: false }\n            ]\n        }\n    }\n}\n"}]},{"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":"The selected chart determines which groups are displayed. For example, a pie chart does not have an axis so "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Axis"}]},{"type":"text","value":" groups will not be shown even if they are listed in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartToolPanelsDef.formatPanel.groups"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows some Format Panel customisations. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The format panel groups have been reordered."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Axis"}]},{"type":"text","value":" group is open by default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Navigator"}]},{"type":"text","value":" group has been omitted."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Format Panel is configured to be open by default via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultToolPanel: 'format'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Format Tool Panel Customisation","name":"format-panel-customisation","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"charts\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"omitting--ordering-tool-panels","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#omitting--ordering-tool-panels","ariaLabel":"omitting  ordering tool panels 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":"Omitting & Ordering Tool Panels"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Chart Tool Panels can be omitted and ordered using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartToolPanelsDef.panels"}]},{"type":"text","value":" grid option:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    chartToolPanelsDef: {\n        panels: ['data', 'format', 'settings'], // default order\n    },\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows how the Chart Tool Panels can be omitted and ordered. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Format"}]},{"type":"text","value":" Tool Panel has been omitted."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Data"}]},{"type":"text","value":" Tool Panel appears before the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Settings"}]},{"type":"text","value":" Tool Panel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Data Panel is configured to be open by default via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultToolPanel: 'data'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Omitting & Ordering Tool Panels","name":"omitting-ordering-tool-panels","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"charts\"] }"},"children":[]}]},{"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/29.1.0/integrated-charts-toolbar/"},"children":[{"type":"text","value":"Chart Toolbar"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Chart Tool Panels","version":null,"enterprise":true,"description":null},"headings":[{"id":"settings-tool-panel","depth":2,"value":"Settings Tool Panel"},{"id":"data-tool-panel","depth":2,"value":"Data Tool Panel"},{"id":"format-tool-panel","depth":2,"value":"Format Tool Panel"},{"id":"omitting--ordering-tool-panels","depth":2,"value":"Omitting & Ordering Tool Panels"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/integrated-charts-chart-tool-panels","pageName":"integrated-charts-chart-tool-panels"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}