Add legend options examples

Author: ekscentrysytet

example/src/components/legend-handlers.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import {Pie} from 'react-chartjs-2';
+
+const data = {
+  labels: [
+    'Red',
+    'Green',
+    'Yellow'
+  ],
+  datasets: [{
+    data: [300, 50, 100],
+    backgroundColor: [
+    '#FF6384',
+    '#36A2EB',
+    '#FFCE56'
+    ],
+    hoverBackgroundColor: [
+    '#FF6384',
+    '#36A2EB',
+    '#FFCE56'
+    ]
+  }]
+};
+
+const legendOpts = {
+  onClick: (e, item) => alert(`Item with text ${item.text} and index ${item.index} clicked`),
+  onHover: (e, item) => alert(`Item with text ${item.text} and index ${item.index} hovered`),
+};
+
+export default React.createClass({
+  displayName: 'LegendExample',
+
+  getInitialState() {
+    return {
+      legend: legendOpts
+    }
+  },
+
+  applyLegendSettings() {
+    const { value } = this.legendOptsInput;
+
+    try {
+      const opts = JSON.parse(value);
+      this.setState({
+        legend: opts
+      });
+    } catch(e) {
+      alert(e.message);
+      throw Error(e);
+    }
+  },
+
+  render() {
+    return (
+      <div>
+        <h2>Legend Handlers Example</h2>
+        <p>Hover over label and click</p>
+        <Pie data={data} legend={this.state.legend} />
+      </div>
+    );
+  }
+})

example/src/components/legend-options.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import {Pie} from 'react-chartjs-2';
+
+const data = {
+  labels: [
+    'Red',
+    'Green',
+    'Yellow'
+  ],
+  datasets: [{
+    data: [300, 50, 100],
+    backgroundColor: [
+    '#FF6384',
+    '#36A2EB',
+    '#FFCE56'
+    ],
+    hoverBackgroundColor: [
+    '#FF6384',
+    '#36A2EB',
+    '#FFCE56'
+    ]
+  }]
+};
+
+const legendOpts = {
+  display: true,
+  position: 'top',
+  fullWidth: true,
+  reverse: false,
+  labels: {
+    fontColor: 'rgb(255, 99, 132)'
+  }
+};
+
+export default React.createClass({
+  displayName: 'LegendExample',
+
+  getInitialState() {
+    return {
+      legend: legendOpts
+    }
+  },
+
+  applyLegendSettings() {
+    const { value } = this.legendOptsInput;
+
+    try {
+      const opts = JSON.parse(value);
+      this.setState({
+        legend: opts
+      });
+    } catch(e) {
+      alert(e.message);
+      throw Error(e);
+    }
+  },
+
+  render() {
+    return (
+      <div>
+        <h2>Legend Options Example</h2>
+        <textarea
+          cols="40"
+          rows="15"
+          ref={input => { this.legendOptsInput = input; }}
+          defaultValue={JSON.stringify(this.state.legend, null, 2)}></textarea>
+        <div>
+          <button onClick={this.applyLegendSettings}>Apply legend settings</button>
+        </div>
+        <Pie data={data} legend={this.state.legend} redraw />
+      </div>
+    );
+  }
+})

example/src/example.js

@@ -13,6 +13,8 @@ import BubbleExample from './components/bubble';
 import MixedDataExample from './components/mix';
 import RandomizedDataLineExample from './components/randomizedLine';
 import CrazyDataLineExample from './components/crazyLine';
+import LegendOptionsExample from './components/legend-options'
+import LegendHandlersExample from './components/legend-handlers'
 
 class App extends React.Component {
 	render() {
@@ -42,6 +44,10 @@ class App extends React.Component {
 				<RandomizedDataLineExample />
 				<hr />
 				<CrazyDataLineExample />
+				<hr />
+				<LegendOptionsExample />
+				<hr />
+				<LegendHandlersExample />
 			</div>
 		);
 	}