Se soluciona el problema de que existan varios RadialGauge en el mismo componente agregandoles un id único.

Se sube a version 1.0.10
Se sube a GitHub 1.0.10
Se sube a NPM 1.0.10

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'}}>
+      <div>
-        <h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
+
-        <RadialGauge />
+        <div style={{maxWidth: '600px', marginTop: '25px'}}>
+          <h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
+          <RadialGauge />
+        </div>
+
       </div>
     )
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "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) { 
@@ -12,7 +14,10 @@ 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