{"componentChunkName":"component---src-pages-data-visualization-getting-started-react-mdx","path":"/data-visualization/getting-started/react/","result":{"pageContext":{"frontmatter":{"title":"Get started","description":"Get started with Carbon Charts in React","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"relativePagePath":"/data-visualization/getting-started/react.mdx","titleType":"prepend","MdxNode":{"id":"671eb6c1-0aee-59be-947e-303258909d8c","children":[],"parent":"e634bc68-afa5-5a6b-8f2f-92d788d3a368","internal":{"content":"---\ntitle: Get started\ndescription: Get started with Carbon Charts in React\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 React 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 React components with CodeSandbox.\"\n    href=\"https://codesandbox.io/s/carbon-charts-react-isck2\">\n    <MdxIcon name=\"codesandbox\" />\n  </ResourceCard>\n</Column>\n\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon Charts React\"\n      href=\"https://github.com/carbon-design-system/carbon-charts/tree/master/packages/react\"\n    >\n      <MdxIcon name=\"github\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Carbon Charts React 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-react d3\n```\n\n#### If you prefer npm\n\n<br />\n\n```bash\n$ npm install --save @carbon/charts @carbon/charts-react d3\n```\n\n## Getting started\n\nTo start using the `StackedBarChart` component, try the example below:\n\n```jsx\nimport React from 'react';\n\nimport { StackedBarChart } from '@carbon/charts-react';\nimport '@carbon/charts/styles.css';\n// Or\n// import '@carbon/charts/styles/styles.scss';\n\nconst stackedBarOptions = {\n  // ...see next section\n};\n\nclass App extends React.Component {\n  state = {\n    stackedBarData: {\n      // ...see next section\n    },\n  };\n\n  render() {\n    return (\n      <div className=\"App\">\n        <StackedBarChart\n          data={this.state.stackedBarData}\n          options={stackedBarOptions}\n        />\n      </div>\n    );\n  }\n}\n\n// ...\n```\n\n<DataOptionsSection />\n\n## Demos and Examples\n\n- **[Storybook - Demos](https://carbon-design-system.github.io/carbon-charts/react)**\n- **[Storybook - Story Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/react/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 [React Storybook](https://github.com/storybookjs/storybook/tree/next/app/react) for developing components.\n\n#### Start the server\n\n<br />\n\n```bash\ncd packages/react\nyarn run storybook\n```\n\nOpen browser to `http://localhost:9005/`.\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":"9b71fa382c20388491d2895a631ee1ca","counter":1611,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Get started","description":"Get started with Carbon Charts in React","tabs":["Vanilla","React","Angular","Vue","Other frameworks"]},"exports":{},"rawBody":"---\ntitle: Get started\ndescription: Get started with Carbon Charts in React\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 React 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 React components with CodeSandbox.\"\n    href=\"https://codesandbox.io/s/carbon-charts-react-isck2\">\n    <MdxIcon name=\"codesandbox\" />\n  </ResourceCard>\n</Column>\n\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon Charts React\"\n      href=\"https://github.com/carbon-design-system/carbon-charts/tree/master/packages/react\"\n    >\n      <MdxIcon name=\"github\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Carbon Charts React 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-react d3\n```\n\n#### If you prefer npm\n\n<br />\n\n```bash\n$ npm install --save @carbon/charts @carbon/charts-react d3\n```\n\n## Getting started\n\nTo start using the `StackedBarChart` component, try the example below:\n\n```jsx\nimport React from 'react';\n\nimport { StackedBarChart } from '@carbon/charts-react';\nimport '@carbon/charts/styles.css';\n// Or\n// import '@carbon/charts/styles/styles.scss';\n\nconst stackedBarOptions = {\n  // ...see next section\n};\n\nclass App extends React.Component {\n  state = {\n    stackedBarData: {\n      // ...see next section\n    },\n  };\n\n  render() {\n    return (\n      <div className=\"App\">\n        <StackedBarChart\n          data={this.state.stackedBarData}\n          options={stackedBarOptions}\n        />\n      </div>\n    );\n  }\n}\n\n// ...\n```\n\n<DataOptionsSection />\n\n## Demos and Examples\n\n- **[Storybook - Demos](https://carbon-design-system.github.io/carbon-charts/react)**\n- **[Storybook - Story Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/react/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 [React Storybook](https://github.com/storybookjs/storybook/tree/next/app/react) for developing components.\n\n#### Start the server\n\n<br />\n\n```bash\ncd packages/react\nyarn run storybook\n```\n\nOpen browser to `http://localhost:9005/`.\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/1dde86ed/src/pages/data-visualization/getting-started/react.mdx"}}}}