diff --git a/README.md b/README.md index ef3d2cdfc..3bffcadea 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Then open [`localhost:6006`](http://localhost:6006) in a browser. ## Installation via NPM ```bash -npm install react-chartjs-2 chart.js --save +npm install --save react-chartjs-2 chart.js ``` @@ -50,7 +50,7 @@ npm install react-chartjs-2 chart.js --save Check example/src/components/* for usage. ```js -import {Doughnut} from 'react-chartjs-2'; +import { Doughnut } from 'react-chartjs-2'; ``` @@ -74,12 +74,10 @@ In order for Chart.js to obey the custom size you need to set `maintainAspectRat ```js ``` @@ -87,17 +85,14 @@ In order for Chart.js to obey the custom size you need to set `maintainAspectRat Chart.js instance can be accessed by placing a ref to the element as: ```js - chartReference = {}; componentDidMount() { - console.log(this.chartReference); // returns a Chart.js instance reference + console.log(this.chartReference); // returns a Chart.js instance reference } render() { - return ( - this.chartReference = reference } data={data} /> - ) + return ( this.chartReference = reference } data={data} />) } ``` @@ -109,20 +104,18 @@ This approach is useful when you want to keep your components pure. ```js render() { - const data = (canvas) => { - const ctx = canvas.getContext("2d") - const gradient = ctx.createLinearGradient(0,0,100,0); - ... - return { - ... - backgroundColor: gradient - ... - } - } - - return ( - - ) + const data = (canvas) => { + const ctx = canvas.getContext("2d") + const gradient = ctx.createLinearGradient(0,0,100,0); + ... + return { + ... + backgroundColor: gradient + ... + } + } + + return () } ``` @@ -145,12 +138,12 @@ import merge from 'lodash.merge'; // import { merge } from 'lodash'; merge(defaults, { - global: { - animation: false, - line: { - borderColor: '#F85F73', - }, - }, + global: { + animation: false, + line: { + borderColor: '#F85F73', + }, + }, }); ``` @@ -162,11 +155,11 @@ You can access the internal Chart.js object to register plugins or extend charts import { Chart } from 'react-chartjs-2'; componentWillMount() { - Chart.pluginService.register({ - afterDraw: function (chart, easing) { - // Plugin code. - } - }); + Chart.pluginService.register({ + afterDraw: function (chart, easing) { + // Plugin code. + } + }); } ``` @@ -182,9 +175,9 @@ A function to be called when mouse clicked on chart elememts, will return all el ```js { - onElementsClick: (elems) => {}, - getElementsAtEvent: (elems) => {}, - // `elems` is an array of chartElements + onElementsClick: (elems) => {}, + getElementsAtEvent: (elems) => {}, + // `elems` is an array of chartElements } ``` @@ -194,7 +187,7 @@ Calling getElementAtEvent(event) on your Chart instance passing an argument of a ```js { - getElementAtEvent: (elems) => {}, + getElementAtEvent: (elems) => {}, // => returns the first element at the event point. } ``` @@ -205,8 +198,8 @@ Looks for the element under the event point, then returns all elements from that ```js { - getDatasetAtEvent: (dataset) => {} - // `dataset` is an array of chartElements + getDatasetAtEvent: (dataset) => {} + // `dataset` is an array of chartElements } ``` @@ -226,6 +219,6 @@ To build, watch and serve the examples (which will also watch the component sour ## License -MIT Licensed +[MIT Licensed](/LICENSE.md) Copyright (c) 2017 Jeremy Ayerst