{"componentChunkName":"component---src-pages-data-visualization-getting-started-angular-mdx","path":"/data-visualization/getting-started/angular/","result":{"pageContext":{"frontmatter":{"title":"Get started","description":"Get started with Carbon Charts in Angular","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"relativePagePath":"/data-visualization/getting-started/angular.mdx","titleType":"prepend","MdxNode":{"id":"06bbf2a6-b22a-548d-a389-e63ca531f238","children":[],"parent":"675ceb59-bdea-5f3a-89af-e4e3903e74f9","internal":{"content":"---\ntitle: Get started\ndescription: Get started with Carbon Charts in Angular\ntabs: [\"Vanilla\", \"React\", \"Angular\", \"Vue\", \"Other frameworks\"]\n---\n\nimport DataOptionsSection from \"./shared-data-options-section\";\n\n<InlineNotification>\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</InlineNotification>\n\n<AnchorLinks>\n\n<AnchorLink>Carbon Charts Angular 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  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon Charts Angular\"\n      href=\"https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular\"\n    >\n      <MdxIcon name=\"github\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Carbon Charts Angular 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<Title> Using yarn </Title>\n\n```bash\n$ yarn add @carbon/charts @carbon/charts-angular d3\n```\n\n<Title> If you prefer npm </Title>\n\n```bash\n$ npm install --save @carbon/charts @carbon/charts-angular d3\n```\n\n## Getting started\n\nTo start using the `BarChart` component, try the example below:\n\n```ts path=app.module.ts\nimport { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\n\nimport { ChartsModule } from \"@carbon/charts-angular\";\n\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  imports: [BrowserModule, ChartsModule],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n```html path=app.component.html\n<ibm-stacked-bar-chart\n  class=\"n-chart\"\n  [data]=\"stackedBarData\"\n  [options]=\"stackedBarOptions\"\n  #stackedBarChart\n></ibm-bar-chart>\n```\n\n```ts path=app.component.ts\nimport { Component } from \"@angular/core\";\n\n@Component({\n  selector: \"my-app\",\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.css\"],\n})\nexport class AppComponent {\n  stackedBarData = {\n    // ...see next section\n  };\n\n  stackedBarOptions = {\n    // ...see next section\n  };\n}\n```\n\n<DataOptionsSection />\n\n## Demos and Examples\n\n- **[Storybook - Demos](https://carbon-design-system.github.io/carbon-charts/angular)**\n- **[Storybook - Story Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular/stories)**\n- **[Storybook - Data & options used](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/demo-data)**\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 [Angular Storybook](https://github.com/storybookjs/storybook/tree/next/app/angular) for developing components.\n\n<Title> Start the server</Title>\n\n```bash\ncd packages/angular\nyarn run storybook\n```\n\nOpen browser to `http://localhost:9006/`.\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":"39bbf6c977e78fcc6ba806dcd55fa903","counter":1585,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Get started","description":"Get started with Carbon Charts in Angular","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"exports":{},"rawBody":"---\ntitle: Get started\ndescription: Get started with Carbon Charts in Angular\ntabs: [\"Vanilla\", \"React\", \"Angular\", \"Vue\", \"Other frameworks\"]\n---\n\nimport DataOptionsSection from \"./shared-data-options-section\";\n\n<InlineNotification>\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</InlineNotification>\n\n<AnchorLinks>\n\n<AnchorLink>Carbon Charts Angular 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  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon Charts Angular\"\n      href=\"https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular\"\n    >\n      <MdxIcon name=\"github\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Carbon Charts Angular 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<Title> Using yarn </Title>\n\n```bash\n$ yarn add @carbon/charts @carbon/charts-angular d3\n```\n\n<Title> If you prefer npm </Title>\n\n```bash\n$ npm install --save @carbon/charts @carbon/charts-angular d3\n```\n\n## Getting started\n\nTo start using the `BarChart` component, try the example below:\n\n```ts path=app.module.ts\nimport { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\n\nimport { ChartsModule } from \"@carbon/charts-angular\";\n\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  imports: [BrowserModule, ChartsModule],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n```html path=app.component.html\n<ibm-stacked-bar-chart\n  class=\"n-chart\"\n  [data]=\"stackedBarData\"\n  [options]=\"stackedBarOptions\"\n  #stackedBarChart\n></ibm-bar-chart>\n```\n\n```ts path=app.component.ts\nimport { Component } from \"@angular/core\";\n\n@Component({\n  selector: \"my-app\",\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.css\"],\n})\nexport class AppComponent {\n  stackedBarData = {\n    // ...see next section\n  };\n\n  stackedBarOptions = {\n    // ...see next section\n  };\n}\n```\n\n<DataOptionsSection />\n\n## Demos and Examples\n\n- **[Storybook - Demos](https://carbon-design-system.github.io/carbon-charts/angular)**\n- **[Storybook - Story Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular/stories)**\n- **[Storybook - Data & options used](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/demo-data)**\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 [Angular Storybook](https://github.com/storybookjs/storybook/tree/next/app/angular) for developing components.\n\n<Title> Start the server</Title>\n\n```bash\ncd packages/angular\nyarn run storybook\n```\n\nOpen browser to `http://localhost:9006/`.\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":"/zeit/3b23ef32/src/pages/data-visualization/getting-started/angular.mdx"}}}}