{"componentChunkName":"component---src-pages-data-visualization-getting-started-vanilla-mdx","path":"/data-visualization/getting-started/vanilla/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Get started","description":"Get started with Carbon Charts in Vanilla","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"relativePagePath":"/data-visualization/getting-started/vanilla.mdx","titleType":"prepend","MdxNode":{"id":"8575a03a-4300-5f01-9ebb-2dbddd874d6e","children":[],"parent":"24820d6e-940a-5677-942e-88b715810f33","internal":{"content":"---\ntitle: Get started\ndescription: Get started with Carbon Charts in Vanilla\ntabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']\n---\n\nimport DataOptionsSection from './shared-data-options-section';\n\n\n\nCarbon charts help you tell accurate and convincing stories around data with beautiful and accessible visualizations.\n\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\nCarbon Charts Vanilla library\nInstall\nGetting started\nDevelopment\nTroubleshooting\n\n\n\n## Resources\n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n\n \n \n\n\n\n## Carbon Charts Vanilla library\n\nThe library provides a collection of reusable charting components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n## Install\n\n#### If using yarn:\n\n
\n\n```bash\n$ yarn add @carbon/charts d3\n```\n\n#### If you prefer npm:\n\n
\n\n```bash\n$ npm install --save @carbon/charts d3\n```\n\n## Getting started\n\n#### If consuming through a bundler (e.g. webpack):\n\n```html path=index.html\n...\n

\n...\n```\n\n```js path=index.js\nimport '@carbon/charts/style.css';\nimport { BarChart, defaultColors } from '@carbon/charts';\n\n// grab chart holder DOM element\nconst chartHolder = document.getElementById('my-bar-chart');\n\n// initialize the chart\nnew BarChart(chartHolder, {\n data: stackedBarData,\n options: stackedBarOptions,\n});\n```\n\n#### If consuming in a browser environment (e.g. through CDNs):\n\n```html path=index.html\n\n\n \n \n \n \n

\n\n \n \n \n\n```\n\n\n\n## Development\n\nPlease refer to the [Contribution Guidelines](https://github.com/carbon-design-system/carbon-charts/blob/master/CONTRIBUTING.md) before starting any work.\n\n### Using the server\n\nWe recommend the use of [Webpack Dev Server](https://github.com/webpack/webpack-dev-server) for developing components.\n\n#### Start the server\n\n
\n\n```bash\ncd packages/core\nyarn run demo:server\n```\n\nOpen browser to `http://localhost:9001/`.\n\n### List of available components\n\nView available components [here](https://github.com/carbon-design-system/carbon-charts#component-status).\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","type":"Mdx","contentDigest":"420865eca8f14ab37cbad42f7de3d336","counter":1414,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Get started","description":"Get started with Carbon Charts in Vanilla","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"exports":{},"rawBody":"---\ntitle: Get started\ndescription: Get started with Carbon Charts in Vanilla\ntabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']\n---\n\nimport DataOptionsSection from './shared-data-options-section';\n\n\n\nCarbon charts help you tell accurate and convincing stories around data with beautiful and accessible visualizations.\n\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\nCarbon Charts Vanilla library\nInstall\nGetting started\nDevelopment\nTroubleshooting\n\n\n\n## Resources\n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n\n \n \n\n\n\n## Carbon Charts Vanilla library\n\nThe library provides a collection of reusable charting components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n## Install\n\n#### If using yarn:\n\n
\n\n```bash\n$ yarn add @carbon/charts d3\n```\n\n#### If you prefer npm:\n\n
\n\n```bash\n$ npm install --save @carbon/charts d3\n```\n\n## Getting started\n\n#### If consuming through a bundler (e.g. webpack):\n\n```html path=index.html\n...\n