diff --git a/static_src/elements/issue-list/mr-chart-page/mr-chart-page.js b/static_src/elements/issue-list/mr-chart-page/mr-chart-page.js
new file mode 100644
index 0000000..06ff7a4
--- /dev/null
+++ b/static_src/elements/issue-list/mr-chart-page/mr-chart-page.js
@@ -0,0 +1,100 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+import {connectStore} from 'reducers/base.js';
+import * as projectV0 from 'reducers/projectV0.js';
+import * as sitewide from 'reducers/sitewide.js';
+import '../mr-mode-selector/mr-mode-selector.js';
+import '../mr-chart/mr-chart.js';
+
+/**
+ * <mr-chart-page>
+ *
+ * Chart page view containing mr-mode-selector and mr-chart.
+ * @extends {LitElement}
+ */
+export class MrChartPage extends connectStore(LitElement) {
+  /** @override */
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0.5em 8px;
+      }
+      h2 {
+        font-size: 1.2em;
+        margin: 0 0 0.5em;
+      }
+      .list-controls {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 100%;
+        padding: 0.5em 0;
+        height: 32px;
+      }
+      .help {
+        padding: 1em;
+        background-color: rgb(227, 242, 253);
+        width: 44em;
+        font-size: 92%;
+        margin: 5px;
+        padding: 6px;
+        border-radius: 6px;
+      }
+      .monospace {
+        font-family: monospace;
+      }
+    `;
+  }
+
+  /** @override */
+  render() {
+    return html`
+      <div class="list-controls">
+        <mr-mode-selector
+          .projectName=${this._projectName}
+          .queryParams=${this._queryParams}
+          .value=${'chart'}
+        ></mr-mode-selector>
+      </div>
+      <mr-chart
+        .projectName=${this._projectName}
+        .queryParams=${this._queryParams}
+      ></mr-chart>
+
+      <div>
+        <div class="help">
+          <h2>Supported query parameters:</h2>
+          <span class="monospace">
+            cc, component, hotlist, label, owner, reporter, status
+          </span>
+          <br /><br />
+          <a href="https://bugs.chromium.org/p/monorail/issues/entry?labels=Feature-Charts">
+            Please file feedback here.
+          </a>
+        </div>
+      </div>
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      _projectName: {type: String},
+      /** @private {Object} */
+      _queryParams: {type: Object},
+    };
+  }
+
+  /** @override */
+  stateChanged(state) {
+    this._projectName = projectV0.viewedProjectName(state);
+    this._queryParams = sitewide.queryParams(state);
+  }
+};
+customElements.define('mr-chart-page', MrChartPage);