Merge pull request #157 from kumarharsh/feat/scatter

Support 'scatter' charts out-of-the-box

Author: jerairrest

.editorconfig

@@ -5,10 +5,14 @@ root = true
 [*]
 end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = false
+trim_trailing_whitespace = true
 insert_final_newline = true
-indent_style = tab
+indent_style = space
 
 [*.json]
 indent_style = space
 indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+indent_style = tab

README.md

@@ -167,6 +167,10 @@ componentWillMount() {
 }
 ```
 
+### Scatter Charts
+
+If you're using Chart.js 2.6 and below, add the `showLines: false` property to your chart options. This was later [added](https://github.com/chartjs/Chart.js/commit/7fa60523599a56255cde78a49e848166bd233c6e) in the default config, so users of later versions would not need to do this extra step.
+
 ### Events
 
 #### onElementsClick || getElementsAtEvent (function)

example/src/components/scatter.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {Scatter} from 'react-chartjs-2';
+
+const data = {
+  labels: ['Scatter'],
+  datasets: [
+    {
+      label: 'My First dataset',
+      fill: false,
+      backgroundColor: 'rgba(75,192,192,0.4)',
+      pointBorderColor: 'rgba(75,192,192,1)',
+      pointBackgroundColor: '#fff',
+      pointBorderWidth: 1,
+      pointHoverRadius: 5,
+      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
+      pointHoverBorderColor: 'rgba(220,220,220,1)',
+      pointHoverBorderWidth: 2,
+      pointRadius: 1,
+      pointHitRadius: 10,
+      data: [
+        { x: 65, y: 75 },
+        { x: 59, y: 49 },
+        { x: 80, y: 90 },
+        { x: 81, y: 29 },
+        { x: 56, y: 36 },
+        { x: 55, y: 25 },
+        { x: 40, y: 18 },
+      ]
+    }
+  ]
+};
+
+export default React.createClass({
+  displayName: 'ScatterExample',
+
+  render() {
+    return (
+      <div>
+        <h2>Scatter Example</h2>
+        <Scatter data={data} />
+      </div>
+    );
+  }
+});

example/src/example.js

@@ -10,6 +10,7 @@ import HorizontalBarExample from './components/horizontalBar';
 import RadarExample from './components/radar';
 import PolarExample from './components/polar';
 import BubbleExample from './components/bubble';
+import ScatterExample from './components/scatter';
 import MixedDataExample from './components/mix';
 import RandomizedDataLineExample from './components/randomizedLine';
 import CrazyDataLineExample from './components/crazyLine';
@@ -37,6 +38,8 @@ class App extends React.Component {
 				<hr />
 				<BubbleExample />
 				<hr />
+				<ScatterExample />
+				<hr />
 				<MixedDataExample />
 				<hr />
 				<RandomizedDataLineExample />

src/index.js

@@ -6,7 +6,7 @@ import isEqual from 'lodash.isequal';
 
 class ChartComponent extends React.Component {
   static getLabelAsKey = d => d.label;
-  
+
   static propTypes = {
     data: PropTypes.oneOfType([
     	PropTypes.object,
@@ -21,7 +21,7 @@ class ChartComponent extends React.Component {
     options: PropTypes.object,
     plugins: PropTypes.arrayOf(PropTypes.object),
     redraw: PropTypes.bool,
-    type: PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea', 'bubble']),
+    type: PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea', 'bubble', 'scatter']),
     width: PropTypes.number,
     datasetKeyProvider: PropTypes.func
   }
@@ -332,5 +332,17 @@ export class Bubble extends React.Component {
   }
 }
 
+export class Scatter extends React.Component {
+  render() {
+    return (
+      <ChartComponent
+        {...this.props}
+        ref={ref => this.chart_instance = ref && ref.chart_instance}
+        type='scatter'
+      />
+    );
+  }
+}
+
 export const defaults = Chart.defaults;
 export {Chart};