{"componentChunkName":"component---src-pages-data-visualization-getting-started-angular-mdx","path":"/data-visualization/getting-started/angular/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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":"21cb6df1-1081-5ba5-bc52-784b7ea5797b","children":[],"parent":"a35d1318-69db-567c-bfd9-cb2c8190e445","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<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      <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#### Using yarn\n\n<br />\n\n```bash\n$ yarn add @carbon/charts @carbon/charts-angular d3\n```\n\n#### If you prefer npm\n\n<br />\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<n-bar-chart\n  class=\"n-chart\"\n  [data]=\"stackedBarData\"\n  [options]=\"stackedBarOptions\"\n  width=\"100%\"\n  height=\"400\"\n  #stackedBarChart\n></n-bar-chart>\n```\n\n```ts path=app.component.ts\nimport { Component } from '@angular/core';\n\nimport { defaultColors } from '@carbon/charts';\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## 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#### Start the server\n\n<br />\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":"570a832e3b3eb4973948aaca5294f58b","counter":1378,"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<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      <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#### Using yarn\n\n<br />\n\n```bash\n$ yarn add @carbon/charts @carbon/charts-angular d3\n```\n\n#### If you prefer npm\n\n<br />\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<n-bar-chart\n  class=\"n-chart\"\n  [data]=\"stackedBarData\"\n  [options]=\"stackedBarOptions\"\n  width=\"100%\"\n  height=\"400\"\n  #stackedBarChart\n></n-bar-chart>\n```\n\n```ts path=app.component.ts\nimport { Component } from '@angular/core';\n\nimport { defaultColors } from '@carbon/charts';\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## 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#### Start the server\n\n<br />\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":"/fargate/7b444b50/src/pages/data-visualization/getting-started/angular.mdx"}}}}