{"componentChunkName":"component---src-pages-data-visualization-getting-started-vue-mdx","path":"/data-visualization/getting-started/vue/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Get started","description":"Get started with Carbon Charts in Vue","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"relativePagePath":"/data-visualization/getting-started/vue.mdx","titleType":"prepend","MdxNode":{"id":"dd716791-fe3c-554f-894f-3fcfde9830cb","children":[],"parent":"5e3e5cbc-d040-5326-8ab2-8bedeb2314b4","internal":{"content":"---\ntitle: Get started\ndescription: Get started with Carbon Charts in Vue\ntabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']\n---\n\nimport DataOptionsSection from './shared-data-options-section';\n\n<AnchorLinks>\n\n<AnchorLink>Carbon Charts Vue library</AnchorLink>\n<AnchorLink>Install</AnchorLink>\n<AnchorLink>Getting started</AnchorLink>\n<AnchorLink>Development</AnchorLink>\n<AnchorLink>Troubleshooting</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n\n<Column colMd={4} colLg={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"Try Carbon Charts Vue components with CodeSandbox.\"\n    href=\"https://codesandbox.io/s/carbon-charts-vue-ghlq0\">\n    <MdxIcon name=\"codesandbox\" />\n  </ResourceCard>\n</Column>\n\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon Charts Vue\"\n      href=\"https://github.com/carbon-design-system/carbon-charts/tree/master/packages/vue\"\n    >\n      <MdxIcon name=\"github\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Carbon Charts Vue library\n\nThe library provides front-end developers & engineers 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#### Using yarn\n\n<br />\n\n```bash\n$ yarn add @carbon/charts @carbon/charts-vue d3\n```\n\n#### If you prefer npm\n\n<br />\n\n```bash\n$ npm install --save @carbon/charts @carbon/charts-vue d3\n```\n\n## Getting started\n\nTo start using the `BarChart` component, try the example below:\n\n```html path=hello-world.vue\n<script>\n  import Vue from 'vue';\n  import '@carbon/charts/style.css';\n  import chartsVue from '@carbon/charts-vue';\n\n  Vue.use(chartsVue);\n\n  export default {\n    name: 'HelloWorld',\n    components: {},\n    data() {\n      return {\n        stackedBarData: {\n          // ...see next section\n        },\n        stackedBarOptions: {\n          // ...see next section\n        },\n      };\n    },\n    template:\n      '<ccv-bar-chart :data=\"stackedBarData\" :options=\"stackedBarOptions\"></ccv-bar-chart>',\n  };\n</script>\n```\n\n<DataOptionsSection />\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 [Vue Storybook](https://github.com/storybookjs/storybook/tree/next/app/vue) for developing components.\n\n#### Start the server\n\n<br />\n\n```bash\ncd packages/vue\nyarn run storybook\n```\n\nOpen browser to `http://localhost:6006/`.\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":"3653d3d2160d7d41adfc37df7c30dfea","counter":1383,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Get started","description":"Get started with Carbon Charts in Vue","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"exports":{},"rawBody":"---\ntitle: Get started\ndescription: Get started with Carbon Charts in Vue\ntabs: ['Vanilla', 'React', 'Angular', 'Vue', 'Other frameworks']\n---\n\nimport DataOptionsSection from './shared-data-options-section';\n\n<AnchorLinks>\n\n<AnchorLink>Carbon Charts Vue library</AnchorLink>\n<AnchorLink>Install</AnchorLink>\n<AnchorLink>Getting started</AnchorLink>\n<AnchorLink>Development</AnchorLink>\n<AnchorLink>Troubleshooting</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n\n<Column colMd={4} colLg={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"Try Carbon Charts Vue components with CodeSandbox.\"\n    href=\"https://codesandbox.io/s/carbon-charts-vue-ghlq0\">\n    <MdxIcon name=\"codesandbox\" />\n  </ResourceCard>\n</Column>\n\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon Charts Vue\"\n      href=\"https://github.com/carbon-design-system/carbon-charts/tree/master/packages/vue\"\n    >\n      <MdxIcon name=\"github\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Carbon Charts Vue library\n\nThe library provides front-end developers & engineers 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#### Using yarn\n\n<br />\n\n```bash\n$ yarn add @carbon/charts @carbon/charts-vue d3\n```\n\n#### If you prefer npm\n\n<br />\n\n```bash\n$ npm install --save @carbon/charts @carbon/charts-vue d3\n```\n\n## Getting started\n\nTo start using the `BarChart` component, try the example below:\n\n```html path=hello-world.vue\n<script>\n  import Vue from 'vue';\n  import '@carbon/charts/style.css';\n  import chartsVue from '@carbon/charts-vue';\n\n  Vue.use(chartsVue);\n\n  export default {\n    name: 'HelloWorld',\n    components: {},\n    data() {\n      return {\n        stackedBarData: {\n          // ...see next section\n        },\n        stackedBarOptions: {\n          // ...see next section\n        },\n      };\n    },\n    template:\n      '<ccv-bar-chart :data=\"stackedBarData\" :options=\"stackedBarOptions\"></ccv-bar-chart>',\n  };\n</script>\n```\n\n<DataOptionsSection />\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 [Vue Storybook](https://github.com/storybookjs/storybook/tree/next/app/vue) for developing components.\n\n#### Start the server\n\n<br />\n\n```bash\ncd packages/vue\nyarn run storybook\n```\n\nOpen browser to `http://localhost:6006/`.\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","fileAbsolutePath":"/fargate/7b444b50/src/pages/data-visualization/getting-started/vue.mdx"}}}}