How to use the recharts.BarChart function in recharts

INDEX_COLUMN_DESIGNATOR,
} from "lib/dataFrameProto"
import { format, Duration } from "lib/format"
import { Map as ImmutableMap } from "immutable"
import withFullScreenWrapper from "hocs/withFullScreenWrapper"
import * as recharts from "recharts"

import "./Chart.scss"

const COMPONENTS: any = {
  ////////////
  // Charts //
  ////////////

  AreaChart: recharts.AreaChart,
  BarChart: recharts.BarChart,
  LineChart: recharts.LineChart,
  ComposedChart: recharts.ComposedChart,
  // PieChart       <- not implemented
  RadarChart: recharts.RadarChart,
  // RadialBarChart <- not implemented
  // ScatterChart   <- not implemented
  Treemap: recharts.Treemap,

  ////////////////////////
  // General Components //
  ////////////////////////

  // ResponsiveContainer, <- not implemented
  Area: recharts.Area,
  Legend: recharts.Legend,
  Tooltip: recharts.Tooltip,

INDEX_COLUMN_DESIGNATOR,
} from '../dataFrameProto';
import { format, Duration } from '../format';
import { PureStreamlitElement } from './util/StreamlitElement';

import * as recharts from 'recharts';

import './Chart.css';

const COMPONENTS = {
  ////////////
  // Charts //
  ////////////

  AreaChart         : recharts.AreaChart,
  BarChart          : recharts.BarChart,
  LineChart         : recharts.LineChart,
  ComposedChart     : recharts.ComposedChart,
  // PieChart       <- not implemented
  RadarChart        : recharts.RadarChart,
  // RadialBarChart <- not implemented
  // ScatterChart   <- not implemented
  Treemap           : recharts.Treemap,

  ////////////////////////
  // General Components //
  ////////////////////////

  // ResponsiveContainer, <- not implemented
  Area              : recharts.Area,
  Legend            : recharts.Legend,
  Tooltip           : recharts.Tooltip,

var HorizontalBarChart = function HorizontalBarChart(_ref) {
  var data = _ref.data;
  return _react2.default.createElement(
    _recharts.BarChart,
    { layout: 'horizontal', width: 730, height: 250, data: data },
    _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),
    _react2.default.createElement(_recharts.YAxis, null),
    _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }),
    _react2.default.createElement(_recharts.Tooltip, null),
    _react2.default.createElement(_recharts.Legend, null),
    _react2.default.createElement(_recharts.Bar, { dataKey: 'x', fill: '#8884d8' }),
    _react2.default.createElement(_recharts.Bar, { dataKey: 'y', fill: '#82ca9d' })
  );
};

var ErBarChart = function ErBarChart() {
  return _react2.default.createElement(
    'div',
    { style: { display: 'flex', flexFlow: 'row wrap' } },
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.BarChart,
        { layout: 'horizontal', data: dataMonthMedical },
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),
        _react2.default.createElement(_recharts.YAxis, null),
        _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }),
        _react2.default.createElement(_recharts.Tooltip, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Bar, { dataKey: 'Average Daily Medical Incidents per Month, 2010-2016', fill: '#D7075F' })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.BarChart,
        { layout: 'horizontal', data: dataMonthFire },
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),

_react2.default.createElement(
        _recharts.BarChart,
        { layout: 'horizontal', data: dataMonthFire },
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),
        _react2.default.createElement(_recharts.YAxis, null),
        _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }),
        _react2.default.createElement(_recharts.Tooltip, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Bar, { dataKey: 'Average Daily Fire Incidents per Month, 2010-2016', fill: '#e34d77' })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.BarChart,
        { layout: 'horizontal', data: dataMonthFalse },
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),
        _react2.default.createElement(_recharts.YAxis, null),
        _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }),
        _react2.default.createElement(_recharts.Tooltip, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Bar, { dataKey: 'Average Daily False Alarms per Month, 2010-2016', fill: '#ed7690' })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.BarChart,
        { layout: 'horizontal', data: dataHourMedical },
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }),