Se arregla el problema con el package-lock.json de example.

Se sube a version 1.0.13
Se sube a GitHub 1.0.13
Se sube a NPM 1.0.13

example/package.json

@@ -5,11 +5,11 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "chartjs-2-react": "file:..",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "chartjs-2-react": "file:.."
+    "react-scripts": "^1.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/App.js

@@ -5,9 +5,13 @@ import { RadialGauge } from 'chartjs-2-react'
 export default class App extends Component {
   render () {
     return (
-      <div style={{maxWidth: '600px', marginTop: '25px'}}>
-        <h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
-        <RadialGauge />
+      <div>
+
+        <div style={{maxWidth: '600px', marginTop: '25px'}}>
+          <h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
+          <RadialGauge />
+        </div>
+
       </div>
     )
   }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.0.0",
+  "version": "1.0.10",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.0.9",
+  "version": "1.0.13",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",

src/RadialGauge.jsx

@@ -4,6 +4,8 @@ import Chart from 'chart.js';
 
 import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
 
+import ID from './Service/ID.js'
+
 class RadialGauge extends Component {
 
   constructor(props) { 
@@ -11,8 +13,11 @@ class RadialGauge extends Component {
 
     let porcentaje = Math.round(Math.random() * 100),
         porcentajeTexto = `${porcentaje} %`
+        
+    let id = this.props.id ? this.props.id : ID()
 
     this.state = {
+      id,
       chart: null,
       porcentaje,
       porcentajeTexto
@@ -22,7 +27,7 @@ class RadialGauge extends Component {
 
   componentDidMount() {
 
-    var ctx = document.getElementById('chart').getContext('2d');
+    var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
 
       var config = {
         type: 'radialGauge',
@@ -110,10 +115,10 @@ class RadialGauge extends Component {
 
       this.state.chart.update();
 
-      return <canvas id="chart" />
+      return <canvas id={`${this.state.id}`} />
 
     } else { 
-      return <canvas id="chart" />
+      return <canvas id={`${this.state.id}`} />
     }
   }
 }

src/Service/ID.js

@@ -0,0 +1,25 @@
+// Generate unique IDs for use as pseudo-private/protected names.
+// Similar in concept to
+// <http://wiki.ecmascript.org/doku.php?id=strawman:names>.
+//
+// The goals of this function are twofold:
+// 
+// * Provide a way to generate a string guaranteed to be unique when compared
+//   to other strings generated by this function.
+// * Make the string complex enough that it is highly unlikely to be
+//   accidentally duplicated by hand (this is key if you're using `ID`
+//   as a private/protected name on an object).
+//
+// Use:
+//
+//     var privateName = ID();
+//     var o = { 'public': 'foo' };
+//     o[privateName] = 'bar';
+var ID = function () {
+  // Math.random should be unique because of its seeding algorithm.
+  // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+  // after the decimal.
+  return '_' + Math.random().toString(36).substr(2, 9);
+};
+
+export default ID