docs(examples): better styling of bar chart

colinmeinke · Mar 12, 2016 · ca0f954 · ca0f954
1 parent 07f068b
commit ca0f954
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/examples/barChart/App.js b/examples/barChart/App.js
@@ -49,7 +49,7 @@ const App = createClass({
 
   render () {
     return (
-      <section>
+      <section className="content">
         <select onChange={ this.onChange }>
           { days.map(( day, i ) => (
             <option key={ i } value={ i }>{ day.title }</option>
@@ -58,6 +58,7 @@ const App = createClass({
         <BarChart
           chartClassName="chart"
           bars={ this.state.day.bars }
+          preserveAspectRatio="xMinYMid meet"
         />
       </section>
     );

diff --git a/examples/barChart/Page.js b/examples/barChart/Page.js
@@ -8,10 +8,18 @@ const Page = ({ app }) => (
   <html lang="en">
     <head>
       <style>{ `
-        select,
-        .chart {
-          margin-top: 20px;
-          padding: 10px 10px 10px 0;
+        html,
+        body,
+        .app,
+        .content {
+          height: 100%;
+          margin: 0;
+        }
+
+        select {
+          position: absolute;
+          right: 10px;
+          top: 10px;
         }
 
         select {
@@ -20,6 +28,10 @@ const Page = ({ app }) => (
 
         .chart {
           background-color: rgb(240,240,240);
+          box-sizing: border-box;
+          height: 100%;
+          padding: 40px 10px 10px 0;
+          width: 100%;
         }
 
         .chart:after {