{"componentChunkName":"component---src-pages-data-visualization-getting-started-other-frameworks-mdx","path":"/data-visualization/getting-started/other-frameworks/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Get started","description":"The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"relativePagePath":"/data-visualization/getting-started/other-frameworks.mdx","titleType":"prepend","MdxNode":{"id":"2c3c3c7a-3ebd-5329-9cb1-811098eee250","children":[],"parent":"188985fe-f968-5753-9659-9e5803bb6eb0","internal":{"content":"---\ntitle: Get started\ndescription: The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\ntabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']\n---\n\n\n\n**Note:** Please direct all questions regarding support, bug fixes, and feature requests to the [Carbon Charts core team](https://github.com/carbon-design-system/carbon-charts#core-team).\n\n\n\n\n\nDevelopment options\nOther frameworks\n\n\n\n## Resources\n\n\n\n\n \n \n \n\n\n\n \n \n \n\n\n
\n\n## Development options\n\nThe Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\n\n\n\nWrapping components with JavaScript frameworks\nExamples\nTroubleshooting\n\n\n\n### Wrapping components with JavaScript frameworks\n\nMany JavaScript frameworks have a mechanism to dynamically create/destroy DOM elements, for example, upon change in an array.\n\nIn order to develop wrappers of the Carbon Charts components in a framework of your choice, you'd need to initialize the chart through the vanilla library (`@carbon/charts`), and update data/options upon receiving updated values through the framework you are using.\n\nAlso when DOM elements that Carbon Charts components have been instantiated on are being destroyed, the component instances should be released so that e.g. there are no zombie event handlers.\n\nThe easiest way to hook on the creation/destruction of DOM elements is by defining a \"wrapping component\", with the JavaScript framework of your choice.\n\n### Examples\n\nBelow are links to various wrappers to our BarChart component:\n\n- [React](https://github.com/carbon-design-system/carbon-charts/blob/master/packages/react/src/bar-chart.js)\n- [Angular](https://github.com/carbon-design-system/carbon-charts/blob/master/packages/angular/src/bar-chart.component.ts)\n- [Vue](https://github.com/carbon-design-system/carbon-charts/blob/master/packages/vue/src/ccv-bar-chart.vue)\n\n### Troubleshooting\n\nIf you experience any issues while getting set up with Carbon Charts, please head over to the [GitHub repo](https://github.com/carbon-design-system/carbon-charts) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon-charts/issues) if your issue does not already exist.\n\n## Other frameworks\n\nWe are open to the idea of providing core support for additional frameworks in future.\n\nFor the Carbon Design System to incorporate additional frameworks into our core offering, those frameworks need clear, guaranteed, ongoing resources to maintain and support that option. If a team built a product using a native web components implemenation of Carbon Charts, for example, but had no plan to support that solution outside of their product, that couldn't become a core part of the Carbon Design System.\n","type":"Mdx","contentDigest":"f36c9995b6330cb7b57e27808b06c036","counter":1425,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Get started","description":"The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"exports":{},"rawBody":"---\ntitle: Get started\ndescription: The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\ntabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']\n---\n\n\n\n**Note:** Please direct all questions regarding support, bug fixes, and feature requests to the [Carbon Charts core team](https://github.com/carbon-design-system/carbon-charts#core-team).\n\n\n\n\n\nDevelopment options\nOther frameworks\n\n\n\n## Resources\n\n\n\n\n \n \n \n\n\n\n \n \n \n\n\n
\n\n## Development options\n\nThe Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\n\n\n\nWrapping components with JavaScript frameworks\nExamples\nTroubleshooting\n\n\n\n### Wrapping components with JavaScript frameworks\n\nMany JavaScript frameworks have a mechanism to dynamically create/destroy DOM elements, for example, upon change in an array.\n\nIn order to develop wrappers of the Carbon Charts components in a framework of your choice, you'd need to initialize the chart through the vanilla library (`@carbon/charts`), and update data/options upon receiving updated values through the framework you are using.\n\nAlso when DOM elements that Carbon Charts components have been instantiated on are being destroyed, the component instances should be released so that e.g. there are no zombie event handlers.\n\nThe easiest way to hook on the creation/destruction of DOM elements is by defining a \"wrapping component\", with the JavaScript framework of your choice.\n\n### Examples\n\nBelow are links to various wrappers to our BarChart component:\n\n- [React](https://github.com/carbon-design-system/carbon-charts/blob/master/packages/react/src/bar-chart.js)\n- [Angular](https://github.com/carbon-design-system/carbon-charts/blob/master/packages/angular/src/bar-chart.component.ts)\n- [Vue](https://github.com/carbon-design-system/carbon-charts/blob/master/packages/vue/src/ccv-bar-chart.vue)\n\n### Troubleshooting\n\nIf you experience any issues while getting set up with Carbon Charts, please head over to the [GitHub repo](https://github.com/carbon-design-system/carbon-charts) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon-charts/issues) if your issue does not already exist.\n\n## Other frameworks\n\nWe are open to the idea of providing core support for additional frameworks in future.\n\nFor the Carbon Design System to incorporate additional frameworks into our core offering, those frameworks need clear, guaranteed, ongoing resources to maintain and support that option. If a team built a product using a native web components implemenation of Carbon Charts, for example, but had no plan to support that solution outside of their product, that couldn't become a core part of the Carbon Design System.\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/data-visualization/getting-started/other-frameworks.mdx"}}}}