diff --git a/frontend/package.json b/frontend/package.json
index 34d6a4c2cc9..292bad616d3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@patternfly/patternfly": "1.0.219",
+    "@patternfly/react-charts": "^3.4.5",
     "@patternfly/react-core": "2.4.1",
     "brace": "0.11.x",
     "classnames": "2.x",
diff --git a/frontend/public/components/app.jsx b/frontend/public/components/app.jsx
index 027349f10c7..90c303c53df 100644
--- a/frontend/public/components/app.jsx
+++ b/frontend/public/components/app.jsx
@@ -137,6 +137,13 @@ class App extends React.PureComponent {
   }
 
   _onNavToggle() {
+
+    // Some components, like svg charts, need to reflow when nav is toggled.
+    // Fire event after a short delay to allow nav animation to complete.
+    setTimeout(() => {
+      window.dispatchEvent(new Event('nav_toggle'));
+    }, 100);
+
     this.setState(prevState => {
       return {
         isNavOpen: !prevState.isNavOpen,
diff --git a/frontend/public/components/build.tsx b/frontend/public/components/build.tsx
index 196d7f41e7e..378a2576ec0 100644
--- a/frontend/public/components/build.tsx
+++ b/frontend/public/components/build.tsx
@@ -9,13 +9,13 @@ import { K8sResourceKindReference, referenceFor, K8sResourceKind } from '../modu
 import { cloneBuild, formatBuildDuration, BuildPhase, getBuildNumber } from '../module/k8s/builds';
 import { ColHead, DetailsPage, List, ListHeader, ListPage } from './factory';
 import { errorModal } from './modals';
-import { BuildHooks, BuildStrategy, Kebab, SectionHeading, history, navFactory, ResourceKebab, ResourceLink, resourceObjPath, ResourceSummary, Timestamp, AsyncComponent, resourcePath, StatusIcon } from './utils';
+import { BuildHooks, BuildStrategy, Kebab, SectionHeading, history, navFactory, ResourceKebab, ResourceLink, resourceObjPath, ResourceSummary, Timestamp, AsyncComponent, resourcePath, StatusIcon, humanizeDecimalBytes, humanizeCpuCores } from './utils';
 import { BuildPipeline, BuildPipelineLogLink } from './build-pipeline';
 import { breadcrumbsForOwnerRefs } from './utils/breadcrumbs';
 import { fromNow } from './utils/datetime';
 import { BuildLogs } from './build-logs';
 import { ResourceEventStream } from './events';
-import { Line, requirePrometheus } from './graphs';
+import { Area, requirePrometheus } from './graphs';
 
 const BuildsReference: K8sResourceKindReference = 'Build';
 
@@ -92,13 +92,13 @@ const BuildGraphs = requirePrometheus(({build}) => {
   return <React.Fragment>
     <div className="row">
       <div className="col-md-4">
-        <Line title="Memory Usage" namespace={namespace} query={`pod_name:container_memory_usage_bytes:sum{pod_name='${podName}',container_name='',namespace='${namespace}'}`} />
+        <Area title="Memory Usage" humanizeValue={humanizeDecimalBytes} namespace={namespace} query={`pod_name:container_memory_usage_bytes:sum{pod_name='${podName}',container_name='',namespace='${namespace}'}`} />
       </div>
       <div className="col-md-4">
-        <Line title="CPU Usage" namespace={namespace} query={`pod_name:container_cpu_usage:sum{pod_name='${podName}',container_name='',namespace='${namespace}'}`} />
+        <Area title="CPU Usage" humanizeValue={humanizeCpuCores} namespace={namespace} query={`pod_name:container_cpu_usage:sum{pod_name='${podName}',container_name='',namespace='${namespace}'}`} />
       </div>
       <div className="col-md-4">
-        <Line title="Filesystem" namespace={namespace} query={`pod_name:container_fs_usage_bytes:sum{pod_name='${podName}',container_name='',namespace='${namespace}'}`} />
+        <Area title="Filesystem" humanizeValue={humanizeDecimalBytes} namespace={namespace} query={`pod_name:container_fs_usage_bytes:sum{pod_name='${podName}',container_name='',namespace='${namespace}'}`} />
       </div>
     </div>
 
diff --git a/frontend/public/components/graphs/_graphs.scss b/frontend/public/components/graphs/_graphs.scss
index 575b27e4787..1c3dfaf275c 100644
--- a/frontend/public/components/graphs/_graphs.scss
+++ b/frontend/public/components/graphs/_graphs.scss
@@ -2,19 +2,27 @@
   padding-top: 15px; // So graph title doesn't abut border
   margin-top: 0;
   margin-bottom: 16px;
-  overflow: hidden;
+  overflow: visible; // Tooltips may overflow
+}
+
+.graph-wrapper svg {
+  overflow: visible !important; // Tooltips may overflow
 }
 
 .graph-title {
-  margin: 0;
-  text-align: center;
+  margin: 0 0 10px 0;
   color: black;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
   white-space: nowrap;
   line-height: 1.4; // so descenders don't clip
 }
 
+.graph-title--left {
+  text-align: left;
+}
+
 .query-browser__wrapper {
   border: 1px solid $color-grey-background-border;
   margin: 0 0 20px 0;
diff --git a/frontend/public/components/graphs/area.tsx b/frontend/public/components/graphs/area.tsx
new file mode 100644
index 00000000000..4f5e70a2cb8
--- /dev/null
+++ b/frontend/public/components/graphs/area.tsx
@@ -0,0 +1,67 @@
+import * as _ from 'lodash-es';
+import * as React from 'react';
+import { Chart, ChartArea, ChartVoronoiContainer, ChartAxis, ChartTheme, ChartGroup } from '@patternfly/react-charts';
+
+import { humanizeNumber } from '../utils';
+import { twentyFourHourTime } from '../utils/datetime';
+import { areaStyles, cartesianChartStyles } from './themes';
+import { useRefWidth } from '../utils/use-ref-width';
+import { usePrometheusPoll, PrometheusQuery } from './use-prometheus-poll';
+import { PrometheusGraph } from './prometheus-graph';
+
+export const Area: React.FC<AreaProps> = ({
+  basePath,
+  className,
+  height = 90,
+  humanizeTime = twentyFourHourTime,
+  humanizeValue = humanizeNumber,
+  namespace,
+  numSamples,
+  query,
+  theme = ChartTheme.light.multi,
+  tickCount = 3,
+  timeout,
+  timeSpan,
+  title,
+}) => {
+  const [containerRef, width] = useRefWidth();
+  const [data] = usePrometheusPoll({basePath, namespace, numSamples, query, timeout, timeSpan, defaultQueryName: title});
+  // Override theme. Once PF React Charts is released and we update, there should be much less we need to override here.
+  const _theme = _.merge(theme, cartesianChartStyles, areaStyles);
+  const getLabel = ({name, y}) => (data.length > 1) ? `${name}: ${humanizeValue(y)}` : humanizeValue(y);
+  const container = <ChartVoronoiContainer voronoiDimension="x" labels={getLabel} />;
+  return <PrometheusGraph className={className} query={query} title={title} >
+    <div ref={containerRef} style={{width: '100%'}}>
+      <Chart
+        containerComponent={container}
+        domainPadding={{y: 20}}
+        height={height}
+        width={width}
+        theme={_theme}
+        scale={{x: 'time', y: 'linear'}}
+      >
+        <ChartAxis tickCount={tickCount} tickFormat={humanizeTime} />
+        <ChartAxis dependentAxis tickCount={tickCount} tickFormat={humanizeValue} />
+        <ChartGroup>
+          { _.map(data, (values, i) => <ChartArea key={i} data={values} />) }
+        </ChartGroup>
+      </Chart>
+    </div>
+  </PrometheusGraph>;
+};
+
+type AreaProps = {
+  basePath: string;
+  className: string;
+  height: number,
+  humanizeTime: (date: Date) => string;
+  humanizeValue: (value: string | number) => string;
+  namespace: string;
+  numSamples: number;
+  query: PrometheusQuery[] | string;
+  theme: any;
+  tickCount: number;
+  timeout: number;
+  timeSpan: number;
+  title: string;
+}
diff --git a/frontend/public/components/graphs/graph-loader.jsx b/frontend/public/components/graphs/graph-loader.jsx
index 5829d4d65f5..3cf3f17f4a4 100644
--- a/frontend/public/components/graphs/graph-loader.jsx
+++ b/frontend/public/components/graphs/graph-loader.jsx
@@ -1,5 +1,6 @@
 export { Bar } from './bar';
 export { Gauge } from './gauge';
+export { Area } from './area';
 export { Line } from './line';
 export { QueryBrowser } from './query-browser';
 export { Donut } from './donut';
diff --git a/frontend/public/components/graphs/index.jsx b/frontend/public/components/graphs/index.jsx
index fb93dae8b16..57abe5c37d4 100644
--- a/frontend/public/components/graphs/index.jsx
+++ b/frontend/public/components/graphs/index.jsx
@@ -9,11 +9,12 @@ export const prometheusBasePath = window.SERVER_FLAGS.prometheusBaseURL;
 export const prometheusTenancyBasePath = window.SERVER_FLAGS.prometheusTenancyBaseURL;
 export const alertManagerBasePath = window.SERVER_FLAGS.alertManagerBaseURL;
 
-export const QueryBrowser = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.QueryBrowser)} {...props} />;
+export const Area = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Area)} {...props} />;
 export const Bar = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Bar)} {...props} />;
+export const Donut = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Donut)} {...props} />;
 export const Gauge = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Gauge)} {...props} />;
 export const Line = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Line)} {...props} />;
-export const Donut = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Donut)} {...props} />;
+export const QueryBrowser = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.QueryBrowser)} {...props} />;
 
 const canAccessPrometheus = (prometheusFlag) => prometheusFlag && !!prometheusBasePath && !!prometheusTenancyBasePath;
 
diff --git a/frontend/public/components/graphs/prometheus-graph.tsx b/frontend/public/components/graphs/prometheus-graph.tsx
new file mode 100644
index 00000000000..37ee9ca609d
--- /dev/null
+++ b/frontend/public/components/graphs/prometheus-graph.tsx
@@ -0,0 +1,63 @@
+/* eslint-disable no-undef, no-unused-vars */
+import * as _ from 'lodash-es';
+import * as React from 'react';
+import * as classNames from 'classnames';
+
+import { connectToURLs, MonitoringRoutes } from '../../monitoring';
+
+const getPrometheusUrl = (urls: string[], query: PrometheusQuery[] | string): string => {
+  const base = urls && urls[MonitoringRoutes.Prometheus];
+  if (!base || !query) {
+    return null;
+  }
+
+  const queries = _.isArray(query) ? query : [{query}];
+  const params = new URLSearchParams();
+  _.each(queries, (q, i) => {
+    params.set(`g${i}.range_input`, '1h');
+    params.set(`g${i}.expr`, q.query);
+    params.set(`g${i}.tab`, '0');
+  });
+
+  return `${base}/graph?${params.toString()}`;
+};
+
+const PrometheusGraphLink = connectToURLs(MonitoringRoutes.Prometheus)(
+  ({children, query, urls}: React.PropsWithChildren<PrometheusGraphLinkProps>) => {
+    const url = getPrometheusUrl(urls, query);
+    return <React.Fragment>
+      {
+        url
+          ? <a href={url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+            {children}
+          </a>
+          : {children}
+      }
+    </React.Fragment>;
+  }
+);
+
+export const PrometheusGraph: React.FunctionComponent<PrometheusGraphProps> = ({children, title, className, query}) => {
+  return <div className={classNames('graph-wrapper', className)}>
+    { title && <h5 className="graph-title graph-title--left">{title}</h5> }
+    <PrometheusGraphLink query={query}>
+      {children}
+    </PrometheusGraphLink>
+  </div>;
+};
+
+type PrometheusQuery = {
+  name: string;
+  query: string;
+};
+
+type PrometheusGraphLinkProps = {
+  query: PrometheusQuery[] | string;
+  urls?: string[];
+};
+
+type PrometheusGraphProps = {
+  className?: string;
+  query: PrometheusQuery[] | string;
+  title?: string;
+}
diff --git a/frontend/public/components/graphs/themes.tsx b/frontend/public/components/graphs/themes.tsx
new file mode 100644
index 00000000000..9156679c698
--- /dev/null
+++ b/frontend/public/components/graphs/themes.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable camelcase */
+
+import { global_FontFamily_sans_serif } from '@patternfly/react-tokens';
+
+const independentAxisStyles = {
+  independentAxis: {
+    style: {
+      axis: { stroke: '#D1D1D1' },
+      tickLabels: { fontFamily: global_FontFamily_sans_serif.value },
+    },
+  },
+};
+
+const dependentAxisStyles = {
+  dependentAxis: {
+    style: {
+      axis: { stroke: '#D1D1D1' },
+      grid: { stroke: '#EDEDED' },
+      tickLabels: { fontFamily: global_FontFamily_sans_serif.value },
+    },
+  },
+};
+
+const tooltipStyles = {
+  // General tooltip style
+  tooltip: {
+    flyoutStyle: {
+      fill: '#151515',
+    },
+    style: {
+      labels: {
+        fontFamily: global_FontFamily_sans_serif.value,
+        fill: '#FFF',
+      },
+    },
+  },
+
+  // Voronoi container tooltip theme, overrides general tooltip style
+  voronoi: {
+    style: {
+      flyout: {
+        fill: '#151515',
+      },
+      labels: {
+        fontFamily: global_FontFamily_sans_serif.value,
+        fill: '#FFF',
+      },
+    },
+  },
+};
+
+export const areaStyles = {
+  area: {
+    style: {
+      data: {
+        labels: global_FontFamily_sans_serif.value,
+        fillOpacity: .15,
+      },
+    },
+  },
+};
+
+export const cartesianChartStyles = {
+  chart: {
+    padding: {
+      bottom: 30,
+      left: 60,
+      right: 0,
+      top: 0,
+    },
+  },
+  ...independentAxisStyles,
+  ...dependentAxisStyles,
+  ...tooltipStyles,
+};
diff --git a/frontend/public/components/graphs/use-prometheus-poll.ts b/frontend/public/components/graphs/use-prometheus-poll.ts
new file mode 100644
index 00000000000..78d3a901c47
--- /dev/null
+++ b/frontend/public/components/graphs/use-prometheus-poll.ts
@@ -0,0 +1,82 @@
+import * as _ from 'lodash-es';
+import { useEffect, useRef } from 'react';
+import { prometheusTenancyBasePath, prometheusBasePath } from '.';
+import { coFetchJSON } from '../../co-fetch';
+import { useSafetyFirst } from '../safety-first';
+
+// TODO This effect only handles polling prometheus data range queries. For now,
+// area charts are the only component using this, so that's okay, but will need
+// to be expanded to handle singular vector queries as well.
+export const usePrometheusPoll = ({
+  basePath,
+  defaultQueryName = '',
+  namespace,
+  numSamples,
+  query,
+  timeout,
+  timeSpan = 60 * 60 * 1000,
+}: PrometheusPollProps ) => {
+  const [data, setData] = useSafetyFirst([]);
+  const interval = useRef(null);
+
+  useEffect(() => {
+    const fetch = () => {
+      const end = Date.now();
+      const start = end - timeSpan;
+      const baseUrl = basePath || (namespace ? prometheusTenancyBasePath : prometheusBasePath);
+      const pollFrequency = Math.max(timeSpan / 120, 3000); // Update every 3 seconds at most
+      const stepSize = (numSamples ? (timeSpan / numSamples) : pollFrequency) / 1000;
+      const timeoutParam = timeout ? `&timeout=${encodeURIComponent(timeout.toString())}` : '';
+      const queries = !_.isArray(query) ? [{query, name: defaultQueryName}] : query;
+      const promises = queries.map(q => {
+        const nsParam = namespace ? `&namespace=${encodeURIComponent(namespace)}` : '';
+        const url = `${baseUrl}/api/v1/query_range?query=${encodeURIComponent(q.query)}&start=${start / 1000}&end=${end / 1000}&step=${stepSize}${nsParam}${timeoutParam}`;
+        return coFetchJSON(url).then(result => {
+          const values = _.get(result, 'data.result[0].values');
+          return _.map(values, v => ({
+            name: q.name,
+            x: new Date(v[0] * 1000),
+            y: parseFloat(v[1]),
+          }));
+        });
+      });
+      Promise.all(promises)
+        .then(d => setData(d))
+        /* eslint-disable-next-line no-console */
+        .catch(e => console.warn(`Error retrieving Prometheus data: ${e}`))
+        .then(() => {
+          interval.current = setTimeout(fetch, pollFrequency);
+        });
+    };
+
+    if (query) {
+      fetch();
+    }
+    return () => {
+      clearInterval(interval.current);
+    };
+  }, [basePath, defaultQueryName, namespace, numSamples, query, timeout, timeSpan, setData]);
+
+  return [data] as [GraphDataPoint[][]];
+};
+
+export type PrometheusQuery = {
+  name: string;
+  query: string;
+};
+
+type PrometheusPollProps = {
+  basePath?: string;
+  defaultQueryName?: string;
+  namespace?: string;
+  numSamples?: number;
+  query: PrometheusQuery[] | string;
+  timeout?: number;
+  timeSpan?: number;
+}
+
+type GraphDataPoint = {
+  name?: string;
+  x: Date;
+  y: number;
+};
diff --git a/frontend/public/components/image-stream-tag.tsx b/frontend/public/components/image-stream-tag.tsx
index ec669682f4e..640554b452f 100644
--- a/frontend/public/components/image-stream-tag.tsx
+++ b/frontend/public/components/image-stream-tag.tsx
@@ -5,7 +5,7 @@ import * as _ from 'lodash-es';
 import { K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { DetailsPage } from './factory';
 import { Kebab, SectionHeading, navFactory, ResourceSummary } from './utils';
-import { humanizeMem } from './utils/units';
+import { humanizeBinaryBytes } from './utils/units';
 
 const ImageStreamTagsReference: K8sResourceKindReference = 'ImageStreamTag';
 
@@ -39,7 +39,7 @@ export const ImageStreamTagsDetails: React.SFC<ImageStreamTagsDetailsProps> = ({
   const cmd = (config.Cmd || []).join(' ');
   const exposedPorts = _.keys(config.ExposedPorts).join(', ');
   const size = _.get(imageStreamTag, 'image.dockerImageMetadata.Size');
-  const humanizedSize = _.isFinite(size) && humanizeMem(size);
+  const humanizedSize = _.isFinite(size) && humanizeBinaryBytes(size);
   const architecture = _.get(imageStreamTag, 'image.dockerImageMetadata.Architecture');
 
   return <div className="co-m-pane__body">
diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
index d6c3f4c4c34..95b8890c26c 100644
--- a/frontend/public/components/namespace.jsx
+++ b/frontend/public/components/namespace.jsx
@@ -9,10 +9,10 @@ import { NamespaceModel, ProjectModel, SecretModel } from '../models';
 import { k8sGet } from '../module/k8s';
 import { formatNamespacedRouteForResource, UIActions } from '../ui/ui-actions';
 import { ColHead, DetailsPage, List, ListHeader, ListPage, ResourceRow } from './factory';
-import { ActionsMenu, Kebab, Dropdown, Firehose, LabelList, LoadingInline, navFactory, ResourceKebab, SectionHeading, ResourceIcon, ResourceLink, ResourceSummary, humanizeMem, MsgBox, StatusIcon, ExternalLink } from './utils';
+import { ActionsMenu, Kebab, Dropdown, Firehose, LabelList, LoadingInline, navFactory, ResourceKebab, SectionHeading, ResourceIcon, ResourceLink, ResourceSummary, humanizeBinaryBytes, MsgBox, StatusIcon, ExternalLink, humanizeCpuCores, humanizeDecimalBytes } from './utils';
 import { createNamespaceModal, createProjectModal, deleteNamespaceModal, configureNamespacePullSecretModal } from './modals';
 import { RoleBindingsPage } from './RBAC';
-import { Bar, Line, requirePrometheus } from './graphs';
+import { Bar, Area, requirePrometheus } from './graphs';
 import { OC_DOWNLOAD_LINK, ALL_NAMESPACES_KEY, KEYBOARD_SHORTCUTS, NAMESPACE_LOCAL_STORAGE_KEY } from '../const';
 import { FLAGS, featureReducerName, flagPending, setFlag, connectToFlags } from '../features';
 import { openshiftHelpBase } from './utils/documentation';
@@ -157,7 +157,7 @@ export const PullSecret = (props) => {
 
 export const NamespaceLineCharts = ({ns}) => <div className="row">
   <div className="col-sm-6 col-xs-12">
-    <Line title="CPU Usage" namespace={ns.metadata.name} query={[
+    <Area title="CPU Usage" humanizeValue={humanizeCpuCores} namespace={ns.metadata.name} query={[
       {
         name: 'Used',
         query: `namespace:container_cpu_usage:sum{namespace='${ns.metadata.name}'}`,
@@ -165,7 +165,7 @@ export const NamespaceLineCharts = ({ns}) => <div className="row">
     ]} />
   </div>
   <div className="col-sm-6 col-xs-12">
-    <Line title="Memory Usage" namespace={ns.metadata.name} query={[
+    <Area title="Memory Usage" humanizeValue={humanizeDecimalBytes} namespace={ns.metadata.name} query={[
       {
         name: 'Used',
         query: `namespace:container_memory_usage_bytes:sum{namespace='${ns.metadata.name}'}`,
@@ -179,7 +179,7 @@ export const TopPodsBarChart = ({ns}) => (
     title="Memory Usage by Pod (Top 10)"
     namespace={ns.metadata.name}
     query={`sort(topk(10, sum by (pod_name)(container_memory_usage_bytes{container_name!="POD",container_name!="",pod_name!="", namespace="${ns.metadata.name}"})))`}
-    humanize={humanizeMem}
+    humanize={humanizeBinaryBytes}
     metric="pod_name" />
 );
 
diff --git a/frontend/public/components/node.tsx b/frontend/public/components/node.tsx
index 39270988f7c..91e3faee2b2 100644
--- a/frontend/public/components/node.tsx
+++ b/frontend/public/components/node.tsx
@@ -8,8 +8,8 @@ import { ResourceEventStream } from './events';
 import { ColHead, DetailsPage, List, ListHeader, ListPage, ResourceRow } from './factory';
 import { configureUnschedulableModal } from './modals';
 import { PodsPage } from './pod';
-import { Kebab, navFactory, LabelList, ResourceKebab, SectionHeading, ResourceLink, Timestamp, units, cloudProviderNames, cloudProviderID, pluralize, StatusIcon } from './utils';
-import { Line, requirePrometheus } from './graphs';
+import { Kebab, navFactory, LabelList, ResourceKebab, SectionHeading, ResourceLink, Timestamp, units, cloudProviderNames, cloudProviderID, pluralize, StatusIcon, humanizeDecimalBytes, humanizeCpuCores } from './utils';
+import { Area, requirePrometheus } from './graphs';
 import { MachineModel, NodeModel } from '../models';
 import { CamelCaseWrap } from './utils/camel-case-wrap';
 
@@ -114,22 +114,22 @@ const NodeGraphs = requirePrometheus(({node}) => {
   return <React.Fragment>
     <div className="row">
       <div className="col-md-4">
-        <Line title="Memory Usage" query={ipQuery && `node_memory_Active_bytes${ipQuery}`} />
+        <Area title="Memory Usage" humanizeValue={humanizeDecimalBytes} query={ipQuery && `node_memory_Active_bytes${ipQuery}`} />
       </div>
       <div className="col-md-4">
-        <Line title="CPU Usage" query={ipQuery && `instance:node_cpu:rate:sum${ipQuery}`} />
+        <Area title="CPU Usage" humanizeValue={humanizeCpuCores} query={ipQuery && `instance:node_cpu:rate:sum${ipQuery}`} />
       </div>
       <div className="col-md-4">
-        <Line title="Number of Pods" query={ipQuery && `kubelet_running_pod_count${ipQuery}`} />
+        <Area title="Number of Pods" query={ipQuery && `kubelet_running_pod_count${ipQuery}`} />
       </div>
       <div className="col-md-4">
-        <Line title="Network In" query={ipQuery && `instance:node_network_receive_bytes:rate:sum${ipQuery}`} />
+        <Area title="Network In" humanizeValue={humanizeDecimalBytes} query={ipQuery && `instance:node_network_receive_bytes:rate:sum${ipQuery}`} />
       </div>
       <div className="col-md-4">
-        <Line title="Network Out" query={ipQuery && `instance:node_network_transmit_bytes:rate:sum${ipQuery}`} />
+        <Area title="Network Out" humanizeValue={humanizeDecimalBytes} query={ipQuery && `instance:node_network_transmit_bytes:rate:sum${ipQuery}`} />
       </div>
       <div className="col-md-4">
-        <Line title="Filesystem" query={ipQuery && `instance:node_filesystem_usage:sum${ipQuery}`} />
+        <Area title="Filesystem" humanizeValue={humanizeDecimalBytes} query={ipQuery && `instance:node_filesystem_usage:sum${ipQuery}`} />
       </div>
     </div>
 
diff --git a/frontend/public/components/pod.tsx b/frontend/public/components/pod.tsx
index 64de7359ab2..c7d10bccf58 100644
--- a/frontend/public/components/pod.tsx
+++ b/frontend/public/components/pod.tsx
@@ -24,9 +24,11 @@ import {
   Timestamp,
   navFactory,
   units,
+  humanizeCpuCores,
+  humanizeDecimalBytes,
 } from './utils';
 import { PodLogs } from './pod-logs';
-import { Line, requirePrometheus } from './graphs';
+import { requirePrometheus, Area } from './graphs';
 import { breadcrumbsForOwnerRefs } from './utils/breadcrumbs';
 import { formatDuration } from './utils/datetime';
 import { CamelCaseWrap } from './utils/camel-case-wrap';
@@ -129,13 +131,13 @@ export const PodContainerTable: React.FC<PodContainerTableProps> = ({heading, co
 const PodGraphs = requirePrometheus(({pod}) => <React.Fragment>
   <div className="row">
     <div className="col-md-4">
-      <Line title="Memory Usage" namespace={pod.metadata.namespace} query={`pod_name:container_memory_usage_bytes:sum{pod_name='${pod.metadata.name}',namespace='${pod.metadata.namespace}'}`} />
+      <Area title="Memory Usage" humanizeValue={humanizeDecimalBytes} namespace={pod.metadata.namespace} query={`pod_name:container_memory_usage_bytes:sum{pod_name='${pod.metadata.name}',namespace='${pod.metadata.namespace}'}`} />
     </div>
     <div className="col-md-4">
-      <Line title="CPU Usage" namespace={pod.metadata.namespace} query={`pod_name:container_cpu_usage:sum{pod_name='${pod.metadata.name}',namespace='${pod.metadata.namespace}'}`} />
+      <Area title="CPU Usage" humanizeValue={humanizeCpuCores} namespace={pod.metadata.namespace} query={`pod_name:container_cpu_usage:sum{pod_name='${pod.metadata.name}',namespace='${pod.metadata.namespace}'}`} />
     </div>
     <div className="col-md-4">
-      <Line title="Filesystem" namespace={pod.metadata.namespace} query={`pod_name:container_fs_usage_bytes:sum{pod_name='${pod.metadata.name}',namespace='${pod.metadata.namespace}'}`} />
+      <Area title="Filesystem" humanizeValue={humanizeDecimalBytes} namespace={pod.metadata.namespace} query={`pod_name:container_fs_usage_bytes:sum{pod_name='${pod.metadata.name}',namespace='${pod.metadata.namespace}'}`} />
     </div>
   </div>
 
diff --git a/frontend/public/components/utils/datetime.ts b/frontend/public/components/utils/datetime.ts
index 5befd3c4045..f25a480dd46 100644
--- a/frontend/public/components/utils/datetime.ts
+++ b/frontend/public/components/utils/datetime.ts
@@ -150,3 +150,11 @@ export const parsePrometheusDuration = (duration: string): number => {
     return 0;
   }
 };
+
+const zeroPad = (number: number) => number < 10 ? `0${number}` : number;
+
+export const twentyFourHourTime = (date: Date): string => {
+  const hours = zeroPad(date.getHours());
+  const minutes = zeroPad(date.getMinutes());
+  return `${hours}:${minutes}`;
+};
diff --git a/frontend/public/components/utils/units.js b/frontend/public/components/utils/units.js
index ad38cb66e62..6353766297f 100644
--- a/frontend/public/components/utils/units.js
+++ b/frontend/public/components/utils/units.js
@@ -142,8 +142,10 @@ const humanize = units.humanize = (value, typeName, useRound = false) => {
   };
 };
 
-export const humanizeMem = v => humanize(v, 'binaryBytes', true).string;
+export const humanizeBinaryBytes = v => humanize(v, 'binaryBytes', true).string;
+export const humanizeDecimalBytes = v => humanize(v, 'decimalBytes', true).string;
 export const humanizeNumber = v => humanize(v, 'numeric', true).string;
+export const humanizeCpuCores = v => (v < 1 && v > 0) ? `${round(v*1000)}m` : round(v);
 
 units.dehumanize = (value, typeName) => {
   const type = getType(typeName);
diff --git a/frontend/public/components/utils/use-ref-width.ts b/frontend/public/components/utils/use-ref-width.ts
new file mode 100644
index 00000000000..f9bd6ed6ff0
--- /dev/null
+++ b/frontend/public/components/utils/use-ref-width.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useSafetyFirst } from '../safety-first';
+
+export const useRefWidth = () => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useSafetyFirst(0);
+
+  React.useEffect(() => {
+    const handleResize = () => setWidth(ref.current.clientWidth);
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('nav_toggle', handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('nav_toggle', handleResize);
+    };
+  }, [setWidth]);
+
+  return [ref, width] as [React.Ref<HTMLDivElement>, number];
+};
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a11c9249178..61161ab6a59 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -139,6 +139,18 @@
   version "1.0.219"
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-1.0.219.tgz#3fb57ca7ec88437d78cd84f6e9563979f1081469"
 
+"@patternfly/react-charts@^3.4.5":
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-3.4.5.tgz#351ca539906cf27d48d660e2d5616608e4ebc121"
+  integrity sha512-eDlq/9pM3OYO6mkKnBQe+wWOpe4J4Sbl1VsGCwdwGt0L95fsqhhFILamx2ukJltDFEjY0hbRbSyBC3Znog0lpQ==
+  dependencies:
+    "@patternfly/react-styles" "^3.2.1"
+  optionalDependencies:
+    "@types/victory" "^31.0.15"
+    hoist-non-react-statics "^3.3.0"
+    victory "^32.2.0"
+    victory-core "^32.2.0"
+
 "@patternfly/react-core@2.4.1":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-2.4.1.tgz#3f2fedb160ed9451be5126b906bb8ec493146540"
@@ -173,6 +185,24 @@
     relative "^3.0.2"
     resolve-from "^4.0.0"
 
+"@patternfly/react-styles@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-3.2.1.tgz#4107996f8467c56a84b4418dba0b14f39a748031"
+  integrity sha512-CgqcabmH9ECEgkTmFge2/bqTQSX18Rh+68UGU3x3bjyH5KX9HShAkNkronAHi9U8RAIWx1fcaQ8OqrpusgMsUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0-beta.48"
+    camel-case "^3.0.0"
+    css "^2.2.3"
+    cssom "^0.3.4"
+    cssstyle "^0.3.1"
+    emotion "^9.2.9"
+    emotion-server "^9.2.9"
+    fbjs-scripts "^0.8.3"
+    fs-extra "^6.0.1"
+    jsdom "^11.11.0"
+    relative "^3.0.2"
+    resolve-from "^4.0.0"
+
 "@patternfly/react-tokens@^2.0.6":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-2.0.6.tgz#40f42a1e176541053478e5c462e22f5412bf2356"
@@ -554,6 +584,13 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/victory@^31.0.15":
+  version "31.0.17"
+  resolved "https://registry.yarnpkg.com/@types/victory/-/victory-31.0.17.tgz#5ae62bdcccc16b43dfeca37726f0b8e745a20a17"
+  integrity sha512-ikslDkwGlKY1PMu1Lc9jgpfwjL9PxV7Wb8IEaRaQ/UHaDAQBmq5moAoFsc7n+wvXpfKL5x/rOeytXnCOkCbGnQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/webpack@4.x":
   version "4.4.27"
   resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.4.27.tgz#8bb9429185977a6b3b9e6e6132f561066aa7e7c2"
@@ -3596,9 +3633,10 @@ d3-array@1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
 
-d3-array@^1.2.1:
+d3-array@^1.2.0, d3-array@^1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
 
 d3-collection@1:
   version "1.0.4"
@@ -3616,6 +3654,11 @@ d3-dispatch@1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"
 
+d3-ease@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.5.tgz#8ce59276d81241b1b72042d6af2d40e76d936ffb"
+  integrity sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ==
+
 d3-force@^1.0.6:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.0.tgz#cebf3c694f1078fcc3d4daf8e567b2fbd70d4ea3"
@@ -3625,6 +3668,11 @@ d3-force@^1.0.6:
     d3-quadtree "1"
     d3-timer "1"
 
+d3-format@1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.2.tgz#6a96b5e31bcb98122a30863f7d92365c00603562"
+  integrity sha512-Z18Dprj96ExragQ0DeGi+SYPQ7pPfRMtUXtsg/ChVIKNBCzjO8XYJvRTC1usblx52lqge56V5ect+frYTQc8WQ==
+
 d3-hierarchy@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz#7a6317bd3ed24e324641b6f1e76e978836b008cc"
@@ -3635,9 +3683,17 @@ d3-interpolate@1:
   dependencies:
     d3-color "1"
 
+d3-interpolate@^1.1.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.3.2.tgz#417d3ebdeb4bc4efcc8fd4361c55e4040211fd68"
+  integrity sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==
+  dependencies:
+    d3-color "1"
+
 d3-path@1:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.7.tgz#8de7cd693a75ac0b5480d3abaccd94793e58aae8"
+  integrity sha512-q0cW1RpvA5c5ma2rch62mX8AYaiLX0+bdaSM2wxSU9tXjU4DNvkx9qiUvjkuWCj3p22UO/hlPivujqMiR9PDzA==
 
 d3-quadtree@1:
   version "1.0.3"
@@ -3652,16 +3708,52 @@ d3-sankey-circular@0.33.0:
     d3-shape "^1.2.0"
     elementary-circuits-directed-graph "^1.0.4"
 
-d3-shape@^1.2.0:
+d3-scale@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d"
+  integrity sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-color "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-shape@^1.0.0, d3-shape@^1.2.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.5.tgz#e81aea5940f59f0a79cfccac012232a8987c6033"
+  integrity sha512-VKazVR3phgD+MUCldapHD7P9kcrvPcexeX/PkMJmkUov4JM8IxsSg1DvbYoYich9AtdTsa5nNk2++ImPiDiSxg==
   dependencies:
     d3-path "1"
 
+d3-time-format@2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.3.tgz#ae06f8e0126a9d60d6364eac5b1533ae1bac826b"
+  integrity sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==
+  dependencies:
+    d3-time "1"
+
+d3-time@1:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.11.tgz#1d831a3e25cd189eb256c17770a666368762bbce"
+  integrity sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw==
+
 d3-timer@1:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"
 
+d3-timer@^1.0.0:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.9.tgz#f7bb8c0d597d792ff7131e1c24a36dd471a471ba"
+  integrity sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg==
+
+d3-voronoi@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
+  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
+
 d3@^3.5.12, d3@~3.5.0, d3@~3.5.17:
   version "3.5.17"
   resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
@@ -6333,6 +6425,13 @@ hoist-non-react-statics@^2.1.1, hoist-non-react-statics@^2.3.1:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
+  integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
+  dependencies:
+    react-is "^16.7.0"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -10588,6 +10687,11 @@ react-dom@16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-fast-compare@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fontawesome@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/react-fontawesome/-/react-fontawesome-1.6.1.tgz#eddce17e7dc731aa09fd4a186688a61793a16c5c"
@@ -10607,16 +10711,16 @@ react-is@^16.3.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"
 
+react-is@^16.7.0, react-is@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
 react-is@^16.8.1:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
-react-is@^16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
-  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
-
 react-jsonschema-form@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-jsonschema-form/-/react-jsonschema-form-1.0.4.tgz#e63a3ebffcf3987d0bfe8e05e2fae738fa5f6f19"
@@ -13505,6 +13609,286 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+victory-area@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-area/-/victory-area-32.2.2.tgz#e8c04dd02429e65b59b9cf296108e84a6e8f13a8"
+  integrity sha512-bpuNlDS5ii6jTsanlcXKz3YeMSG6UxTAuBxAOSXv97NMnv09AybpHwz9RKUDcywO8KgFKTMrmsnZZRM3FjSYDg==
+  dependencies:
+    d3-shape "^1.2.0"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-axis@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-axis/-/victory-axis-32.2.2.tgz#b493259a9c8913a5757ed583ae88fb0d0de8d8c4"
+  integrity sha512-WGcW+6j7OBOvsrQ7LO1tJfTTX/e/NRPCdqVnh7ehGlNq1JWeqsxznzd1nTxSue2zutfDVNea0Ur3Gtx40lb14g==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-bar@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-bar/-/victory-bar-32.2.2.tgz#ea012a25568d17240214ff679e75e412821a90d0"
+  integrity sha512-Ux3CWkbcmhZA69gwuiyke4EPlbALc2LamabWV4/82LpEysCExaw9aGRomEWST572pqcPoVxKxygckWj7YQ9RcQ==
+  dependencies:
+    d3-shape "^1.2.0"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-box-plot@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-box-plot/-/victory-box-plot-32.2.2.tgz#fd65d7a51977e30c4488608803c2bda9698afe15"
+  integrity sha512-/rXge76h7d1w0kRraf28nVQ1PrsUFqI1KGtPOvkI4C3JxDQC8z0t+JMfvjLlBVN3jxDiw17KTewA52ciRfrEAw==
+  dependencies:
+    d3-array "^1.2.0"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-brush-container@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-brush-container/-/victory-brush-container-32.2.2.tgz#d7f9e9d70a06cd382e5ae78d2f59023a103310ac"
+  integrity sha512-fqJB6jyPWV6Cn6JeEict3xgY7j5JN51N20maaMIMI1oyC+2VYLH5Cb9GtBw+X7gLiesGIIEWRXXy61+GHHBaxQ==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-brush-line@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-brush-line/-/victory-brush-line-32.2.2.tgz#fdba821839ab5b9616bebca271cce7428b9ce602"
+  integrity sha512-TA4xrXwdQ2iS8HiDxCAA6YXUcBPhQ76tkdATnHF8f2N98mF56m4J9kmAmJRJOew8bhwLwToxAK3QSlRO/sDWtw==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-candlestick@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-candlestick/-/victory-candlestick-32.2.2.tgz#eb92acd7be96616136c05fba658d9c44247e7f03"
+  integrity sha512-JNjCK2GjQV6/HBeTQlpCok4aIr3eqyIEUJQwSb+8PMfN6xA3SbRGnsxclhyiukoEAnvik46Ktkqkj9XUohdxiw==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-chart@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-chart/-/victory-chart-32.2.2.tgz#f3e695f7aa14c38d36fe5addf433871d2ff5374e"
+  integrity sha512-iVpuuQiWkGmLClU1b7zwM2ieLtBWWnKYJrSWmZ7Ks2/UjGmDdUeKQu752T9bB5KwOZviW6wYjrgZbNGFOisVLQ==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    react-fast-compare "^2.0.0"
+    victory-axis "^32.2.2"
+    victory-core "^32.2.2"
+    victory-polar-axis "^32.2.2"
+    victory-shared-events "^32.2.2"
+
+victory-core@^32.2.0, victory-core@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-core/-/victory-core-32.2.2.tgz#d771f17a9b1978497866c5aa95b384efce014b1e"
+  integrity sha512-zVfJtxCT6xvrCMQvM9XfSXtG1TTozca3jWcR6YF8rX59AGvAsugFltabsDZBTJFh/jXhu4iUuNy64akI6rH1aw==
+  dependencies:
+    d3-ease "^1.0.0"
+    d3-interpolate "^1.1.1"
+    d3-scale "^1.0.0"
+    d3-shape "^1.2.0"
+    d3-timer "^1.0.0"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    react-fast-compare "^2.0.0"
+
+victory-create-container@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-create-container/-/victory-create-container-32.2.2.tgz#11877ac4cea757de99fd4442934b4059e096542f"
+  integrity sha512-xzgEdCuvR/Dkdewrf3u1DekIsZHfs42duNXvdTnj18sDjAKsxVyqowrKruM+OEwLO/h41FMOlHQYVD1Ir6l3vQ==
+  dependencies:
+    lodash "^4.17.5"
+    victory-brush-container "^32.2.2"
+    victory-core "^32.2.2"
+    victory-cursor-container "^32.2.2"
+    victory-selection-container "^32.2.2"
+    victory-voronoi-container "^32.2.2"
+    victory-zoom-container "^32.2.2"
+
+victory-cursor-container@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-cursor-container/-/victory-cursor-container-32.2.2.tgz#2d996b7495afe595fb621f311a51d8e6574e90d6"
+  integrity sha512-twjkyKU76xvS8DiG66L2Tp4qJ9k1KpeabtT7dsd/USUdj4D2my1ohs2JjmYZ0XnVbOUC3kOlg5/n8as1qORWug==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-errorbar@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-errorbar/-/victory-errorbar-32.2.2.tgz#525fe15a2c96ff1f60c441f3818983805ba8ba7b"
+  integrity sha512-pFPlSw9y8Ci3085BJ8brY/4A2ZRSkW4Y7sr92e8mI/iNAiNNja3/V/qUb+Bw3Te5AlZun+4M/hkmkCa7tXPgLg==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-group@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-group/-/victory-group-32.2.2.tgz#20af1d466fac48c568f84c564341f1dcbf6f98eb"
+  integrity sha512-xQWTbXzAptAle68s9k3WvnIEflDWlWbCxfXsKGV2/k9sMaInq7jEmQLj9P7iMpP84Tr7zKIhZ36r3VeiMYRwEw==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    react-fast-compare "^2.0.0"
+    victory-core "^32.2.2"
+
+victory-legend@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-legend/-/victory-legend-32.2.2.tgz#43e66ac211d16f7a73449a0a4f72d0b9fa71ca53"
+  integrity sha512-/+EIhIvQ9/CEtDbb0vZvngWxK6mc204Oro3UBkgqczd9X1rasWMcvgOk+XSdSEcQk9l7c51Pjx9fu8RL7W51Jw==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-line@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-line/-/victory-line-32.2.2.tgz#5e07d273736097e4cd84d5ba1bb167e96f27f46e"
+  integrity sha512-EQGeZWZK+WgGLEPN7P9BTMQ3yBkauu1AutEVexPq7NUFsvJjZSRIZ2LpRHsmSDQP+FMfW68cR+1CXM0maO8Jhg==
+  dependencies:
+    d3-shape "^1.2.0"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-pie@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-pie/-/victory-pie-32.2.2.tgz#dc0bec2a1b99c81ae2aba2ead15581424b054160"
+  integrity sha512-2e3KggUJmZQJzFkUc1M9DnCjBcTKkGAkTtaiS6oWSexZ6gqw11W/4AVLksdUyMBv6eReFfTXs3OrJRhqjY063A==
+  dependencies:
+    d3-shape "^1.0.0"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-polar-axis@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-polar-axis/-/victory-polar-axis-32.2.2.tgz#d49728521b09f73cc3e6baeb1cd768f25a5eab9d"
+  integrity sha512-8BvAk3ssHg4FHlRmMaGoQQ0C9LvkjAkaxjElYH85yfcb78xuGNUHtUF2JjgIUHGIEVPRrTQDs35bxOeKJt+lVw==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-scatter@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-scatter/-/victory-scatter-32.2.2.tgz#1f22ec560bab3afcec5b2fadf8eff02e9d616cd8"
+  integrity sha512-ljly+cOgYAc91SBRVGrXWI5No86TGwQJqIEElsNKidc5C2zA8oOzBrhAQ6Q3cSaEtVtYXYd0KksfFQC/8u5DcA==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-selection-container@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-selection-container/-/victory-selection-container-32.2.2.tgz#c4ee99879b63cd3238c512848fd13b0866b5f56c"
+  integrity sha512-Bt51htwa8jsMET7ldwGfmtqyuMAwfJ3HeNdZfjU5dt8vEiVdso8KcTu7ARijWfnyaK1siklrWkm+nkIB8Zxp8g==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-shared-events@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-shared-events/-/victory-shared-events-32.2.2.tgz#85c974e112fe96662fb6acc4b30cad0ed380ac58"
+  integrity sha512-H3D3mzApK0VO2sC+hQSX10K9X/ofvEOF+FvBIX1RXeWjMb+9gOLJaESLcOVJ8jNRtacMPuF82FPiGK4jMqX/Jg==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    react-fast-compare "^2.0.0"
+    victory-core "^32.2.2"
+
+victory-stack@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-stack/-/victory-stack-32.2.2.tgz#dc0c5104322a8dbc9063d70aac9e01695c57cf7d"
+  integrity sha512-6g/TbbudohvMIhGTh/LltINcyFpm5bSVp7rSueqlpK/v/mhoEA6loDqZhNb5XurwvDd4A7eMN6yaKp80GF2aBw==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    react-fast-compare "^2.0.0"
+    victory-core "^32.2.2"
+
+victory-tooltip@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-tooltip/-/victory-tooltip-32.2.2.tgz#07647b05620fee3c8e52f538da65f3a89664e49d"
+  integrity sha512-wiNuCkXIiaK78biYShmkO4bbN2wbkUmV4fHFdueIDdOuK7TKhY4c+H9xbjhEYuEYkRYmth7hWFOsP2y8I5W9Sw==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-voronoi-container@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-voronoi-container/-/victory-voronoi-container-32.2.2.tgz#ff0d2875946c1cdbfb99a6af04bb93fcf3ffd912"
+  integrity sha512-zLOnAo2LJ4zMr7V/RtLLDTnv5g5WsDqmQzdkOkEHh6dXcn0nMtz/amaAmyQkOZ8lXwYidlPmnHfnQUQvn/kc2Q==
+  dependencies:
+    d3-voronoi "^1.1.2"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+    victory-tooltip "^32.2.2"
+
+victory-voronoi@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-voronoi/-/victory-voronoi-32.2.2.tgz#8f3018401712ef56b178eee6b4490638763399e2"
+  integrity sha512-XiJ3xtvvy/UVnMrXsNz1arhIWv1/o1fsSETY35fNX7JfQecinyFjnMRudKYS0jlDolwyZolYjGlqCIizxzUREA==
+  dependencies:
+    d3-voronoi "^1.1.2"
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory-zoom-container@^32.2.2:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory-zoom-container/-/victory-zoom-container-32.2.2.tgz#4404aef3bf9fdc34668994055dd26f93a4cf9c5c"
+  integrity sha512-bkoFs+CmU6vpgMyJAfSUbE8fTgPTuvVWFDdLa7PtEXZV2ShLH/jBfxVYNF7f6WhakPMIBTCqY8EjbJkUnAR13A==
+  dependencies:
+    lodash "^4.17.5"
+    prop-types "^15.5.8"
+    victory-core "^32.2.2"
+
+victory@^32.2.0:
+  version "32.2.2"
+  resolved "https://registry.yarnpkg.com/victory/-/victory-32.2.2.tgz#c1df4dfe7444032ac77f379b5ee3aa767c4ae789"
+  integrity sha512-nWwbNBmq4owBIrxy07lCzWBVc1c3vkQwcCJN61cRp1maNVQ4a/SXmPVjKzy/wR5rcIv/voR/OkZMJe0o3ysVEg==
+  dependencies:
+    victory-area "^32.2.2"
+    victory-axis "^32.2.2"
+    victory-bar "^32.2.2"
+    victory-box-plot "^32.2.2"
+    victory-brush-container "^32.2.2"
+    victory-brush-line "^32.2.2"
+    victory-candlestick "^32.2.2"
+    victory-chart "^32.2.2"
+    victory-core "^32.2.2"
+    victory-create-container "^32.2.2"
+    victory-cursor-container "^32.2.2"
+    victory-errorbar "^32.2.2"
+    victory-group "^32.2.2"
+    victory-legend "^32.2.2"
+    victory-line "^32.2.2"
+    victory-pie "^32.2.2"
+    victory-polar-axis "^32.2.2"
+    victory-scatter "^32.2.2"
+    victory-selection-container "^32.2.2"
+    victory-shared-events "^32.2.2"
+    victory-stack "^32.2.2"
+    victory-tooltip "^32.2.2"
+    victory-voronoi "^32.2.2"
+    victory-voronoi-container "^32.2.2"
+    victory-zoom-container "^32.2.2"
+
 vinyl-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-2.0.0.tgz#a7ebf5ffbefda1b7d18d140fcb07b223efb6751a"