How to use the recharts.AreaChart function in recharts

tableGet,
  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,

tableGet,
  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,

{
          key: 'color' + index,
          id: 'color' + index,
          x1: '0', y1: '0', x2: '0', y2: '1'
        },
        _react2.default.createElement('stop', { offset: '5%', stopColor: colors[index], stopOpacity: 0.8 }),
        _react2.default.createElement('stop', { offset: '95%', stopColor: colors[index], stopOpacity: 0.1 })
      ));
    }
  });

  return _react2.default.createElement(
    'div',
    { style: { display: 'flex', justifyContent: 'space-around', margin: 'auto' } },
    _react2.default.createElement(
      _recharts.AreaChart,
      { width: 730, height: 250, data: data },
      _react2.default.createElement(_recharts.Legend, { layout: 'vertical', iconType: 'square', verticalAlign: 'top', align: 'left' }),
      _react2.default.createElement(
        'defs',
        null,
        gradients
      ),
      _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),
      lines
    )
  );
};