Add mix type example

close #4

Author: gor181

example/src/components/mix.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import {Bar} from 'react-chartjs-2';
+
+const data = {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [{
+      label: 'Sales',
+      type:'line',
+      data: [51, 65, 40, 49, 60, 37, 40],
+      fill: false,
+      borderColor: '#EC932F',
+      backgroundColor: '#EC932F',
+      pointBorderColor: '#EC932F',
+      pointBackgroundColor: '#EC932F',
+      pointHoverBackgroundColor: '#EC932F',
+      pointHoverBorderColor: '#EC932F',
+      yAxisID: 'y-axis-2'
+    },{
+      type: 'bar',
+      label: 'Visitor',
+      data: [200, 185, 590, 621, 250, 400, 95],
+      fill: false,
+      backgroundColor: '#71B37C',
+      borderColor: '#71B37C',
+      hoverBackgroundColor: '#71B37C',
+      hoverBorderColor: '#71B37C',
+      yAxisID: 'y-axis-1'
+    }]
+};
+
+const options = {
+  responsive: true,
+  tooltips: {
+    mode: 'label'
+  },
+  elements: {
+    line: {
+      fill: false
+    }
+  },
+  scales: {
+    xAxes: [
+      {
+        display: true,
+        gridLines: {
+          display: false
+        },
+        labels: {
+          show: true
+        }
+      }
+    ],
+    yAxes: [
+      {
+        type: 'linear',
+        display: true,
+        position: 'left',
+        id: 'y-axis-1',
+        gridLines: {
+          display: false
+        },
+        labels: {
+          show: true
+        }
+      },
+      {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        id: 'y-axis-2',
+        gridLines: {
+          display: false
+        },
+        labels: {
+          show: true
+        }
+      }
+    ]
+  }
+};
+
+export default React.createClass({
+  displayName: 'MixExample',
+
+  render() {
+    return (
+      <div>
+        <h2>Mixed data Example</h2>
+        <Bar
+          data={data}
+          options={options}
+        />
+      </div>
+    );
+  }
+});

example/src/example.js

@@ -7,6 +7,7 @@ import LineExample from './components/line';
 import BarExample from './components/bar';
 import RadarExample from './components/radar';
 import PolarExample from './components/polar';
+import MixedDataExample from './components/mix';
 
 class App extends React.Component {
 	render() {
@@ -24,6 +25,8 @@ class App extends React.Component {
 				<RadarExample />
 				<hr />
 				<PolarExample />
+				<hr />
+				<MixedDataExample />
 			</div>
 		);
 	}