{"componentChunkName":"component---src-pages-data-visualization-getting-started-react-mdx","path":"/data-visualization/getting-started/react/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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":"853f8d79-78a2-59e4-aeba-9f3aee27c230","children":[],"parent":"7f320b65-e63d-5b9b-862b-6b84fbf01ecd","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/pppmo3ollx\">\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 `BarChart` component, try the example below:\n\n```jsx\nimport React from 'react';\n\nimport { defaultColors } from '@carbon/charts';\nimport { BarChart } from '@carbon/charts-react';\nimport '@carbon/charts/style.css';\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        <BarChart\n          data={this.state.stackedBarData}\n          options={stackedBarOptions}\n          width=\"100%\"\n          height={400}\n        />\n      </div>\n    );\n  }\n}\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 [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":"e29235d87b1ea59d389ee389ff57ecd9","counter":1412,"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/pppmo3ollx\">\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 `BarChart` component, try the example below:\n\n```jsx\nimport React from 'react';\n\nimport { defaultColors } from '@carbon/charts';\nimport { BarChart } from '@carbon/charts-react';\nimport '@carbon/charts/style.css';\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        <BarChart\n          data={this.state.stackedBarData}\n          options={stackedBarOptions}\n          width=\"100%\"\n          height={400}\n        />\n      </div>\n    );\n  }\n}\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 [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/3ed0734e/src/pages/data-visualization/getting-started/react.mdx"}}}}