sentry/docs-ui/components/barChart.stories.js

import React from 'react';

import {storiesOf} from '@storybook/react';
import {withInfo} from '@storybook/addon-info';

import BarChart from 'app/components/charts/barChart';

storiesOf('Charts|BarChart', module).add(
  'BarChart',
  withInfo('Stacked & Unstacked Bar Charts')(() => {
    return (
      <div>
        <h2 style={{paddingLeft: '60px'}}>Stacked Bar Charts:</h2>

        <BarChart
          style={{height: 250}}
          stacked={true}
          series={[
            {
              seriesName: 'Unhandled Errors',
              data: [
                {
                  value: 923,
                  name: 'Chrome',
                },
                {
                  value: 107,
                  name: 'Safari',
                },
                {
                  value: 50,
                  name: 'Firefox',
                },
              ],
            },
            {
              seriesName: 'Handled Errors',
              data: [
                {
                  value: 100,
                  name: 'Chrome',
                },
                {
                  value: 99,
                  name: 'Safari',
                },
                {
                  value: 66,
                  name: 'Opera',
                },
              ],
            },
          ]}
        />
        <BarChart
          style={{height: 400}}
          stacked={true}
          series={[
            {
              seriesName: 'Chrome',
              data: [
                {
                  value: 923,
                  name: 'Jan 1',
                },
                {
                  value: 107,
                  name: 'Jan 2',
                },
                {
                  value: 50,
                  name: 'Jan 3',
                },
              ],
            },
            {
              seriesName: 'Safari',
              data: [
                {
                  value: 100,
                  name: 'Jan 1',
                },
                {
                  value: 99,
                  name: 'Jan 2',
                },
                {
                  value: 66,
                  name: 'Jan 3',
                },
                {
                  value: 66,
                  name: 'Jan 4',
                },
              ],
            },
          ]}
        />
        <h2 style={{paddingLeft: '60px'}}>Regular Bar Chart (Not Stacked):</h2>
        <BarChart
          style={{height: 400}}
          series={[
            {
              seriesName: 'Chrome',
              data: [
                {
                  value: 923,
                  name: 'Jan 1',
                },
                {
                  value: 107,
                  name: 'Jan 2',
                },
                {
                  value: 50,
                  name: 'Jan 3',
                },
              ],
            },
            {
              seriesName: 'Safari',
              data: [
                {
                  value: 100,
                  name: 'Jan 1',
                },
                {
                  value: 99,
                  name: 'Jan 2',
                },
                {
                  value: 66,
                  name: 'Jan 3',
                },
                {
                  value: 66,
                  name: 'Jan 4',
                },
              ],
            },
          ]}
        />
      </div>
    );
  })
);