3.x Migration

example/src/components/bar.js

@@ -27,9 +27,7 @@ export default React.createClass({
           data={data}
           width={100}
           height={50}
-          options={{
-            maintainAspectRatio: false
-          }}
+          options={{}}
         />
       </div>
     );

example/src/components/bubble.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import {Bubble} from 'react-chartjs-2';
 
+var randomScalingFactor = function() {
+  return Math.round(Math.random() * 100);
+};
+
 const data = {
   labels: ['January'],
   datasets: [
@@ -23,19 +27,60 @@ const data = {
       pointHoverBorderWidth: 2,
       pointRadius: 1,
       pointHitRadius: 10,
-      data: [{x:10,y:20,r:5}]
+      data: [{
+        x: randomScalingFactor(),
+        y: randomScalingFactor(),
+        r: Math.abs(randomScalingFactor()) / 5,
+      }, {
+        x: randomScalingFactor(),
+        y: randomScalingFactor(),
+        r: Math.abs(randomScalingFactor()) / 5,
+      }, {
+        x: randomScalingFactor(),
+        y: randomScalingFactor(),
+        r: Math.abs(randomScalingFactor()) / 5,
+      }, {
+        x: randomScalingFactor(),
+        y: randomScalingFactor(),
+        r: Math.abs(randomScalingFactor()) / 5,
+      }, {
+        x: randomScalingFactor(),
+        y: randomScalingFactor(),
+        r: Math.abs(randomScalingFactor()) / 5,
+      }, {
+        x: randomScalingFactor(),
+        y: randomScalingFactor(),
+        r: Math.abs(randomScalingFactor()) / 5,
+      }, {
+        x: randomScalingFactor(),
+        y: randomScalingFactor(),
+        r: Math.abs(randomScalingFactor()) / 5,
+      }]
     }
   ]
 };
 
+const options = {
+  responsive: true,
+    plugins: {
+    title: {
+      display: true,
+        text: 'Chart.js Bubble Chart'
+    },
+    tooltip: {
+      mode: 'point'
+    }
+  }
+}
+
 export default React.createClass({
   displayName: 'BubbleExample',
 
   render() {
     return (
       <div>
         <h2>Bubble Example</h2>
-        <Bubble data={data} />
+        <Bubble data={data} options={options} />
       </div>
     );
   }

example/src/components/horizontalBar.js

@@ -16,14 +16,36 @@ const data = {
   ]
 };
 
+const options = {
+  indexAxis: 'y',
+  // Elements options apply to all of the options unless overridden in a dataset
+  // In this case, we are setting the border of each horizontal bar to be 2px wide
+  elements: {
+    bar: {
+      borderWidth: 2,
+    }
+  },
+  responsive: true,
+  plugins: {
+    legend: {
+      display: true,
+      position: 'top',
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Horizontal Bar Chart'
+    }
+  }
+}
+
 export default React.createClass({
   displayName: 'BarExample',
 
   render() {
     return (
       <div>
         <h2>Horizontal Bar Example</h2>
-        <HorizontalBar data={data} />
+        <HorizontalBar data={data} options={options} />
       </div>
     );
   }

example/src/components/legend-options.js

@@ -71,4 +71,4 @@ export default React.createClass({
       </div>
     );
   }
-})
+})

example/src/components/mix.js

@@ -80,9 +80,9 @@ const options = {
 };
 
 const plugins = [{
-    afterDraw: (chartInstance, easing) => {
-        const ctx = chartInstance.chart.ctx;
-        ctx.fillText("This text drawn by a plugin", 100, 100);
+    afterDraw: (chart, easing) => {
+      const ctx = chart.ctx;
+      ctx.fillText("This text drawn by a plugin", 100, 100);
     }
 }];
 

example/src/components/polar.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import {Polar} from 'react-chartjs-2';
 
+var randomScalingFactor = function() {
+  return Math.round(Math.random() * 100);
+};
+
 const data = {
   datasets: [{
     data: [
-      11,
-      16,
-      7,
-      3,
-      14
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
     ],
     backgroundColor: [
       '#FF6384',

example/src/components/scatter.js

@@ -15,17 +15,9 @@ const data = {
       pointHoverBackgroundColor: 'rgba(75,192,192,1)',
       pointHoverBorderColor: 'rgba(220,220,220,1)',
       pointHoverBorderWidth: 2,
-      pointRadius: 1,
+      pointRadius: 5,
       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 },
-      ]
+      data: generateData()
     }
   ]
 };
@@ -42,3 +34,17 @@ export default React.createClass({
     );
   }
 });
+
+function generateData() {
+  var randomScalingFactor = function() {
+    return Math.round(Math.random() * 100);
+  };
+  var data = [];
+  for (var i = 0; i < 7; i++) {
+    data.push({
+      x: randomScalingFactor(),
+      y: randomScalingFactor()
+    });
+  }
+  return data;
+}

package.json

@@ -39,7 +39,7 @@
     "brfs": "^2.0.2",
     "canvas": "^2.6.1",
     "chai": "^4.2.0",
-    "chart.js": "2.6.0",
+    "chart.js": "^3.0.0-beta.6",
     "cross-env": "^7.0.2",
     "css-loader": "^3.6.0",
     "debug": "^4.1.1",
@@ -59,14 +59,16 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.22.1",
     "rollup-plugin-generate-html-template": "^1.7.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-serve": "^1.0.4",
     "rollup-plugin-uglify": "^6.0.4",
     "serve": "^11.3.2",
     "sinon": "^9.0.2",
     "webpack": "^4.43.0",
     "webpack-dev-server": "^3.11.0"
   },
   "peerDependencies": {
-    "chart.js": "^2.3",
+    "chart.js": "^3.0.0-beta.6",
     "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
   },
@@ -82,7 +84,7 @@
     "build:umd": "cross-env BABEL_ENV=rollup NODE_ENV=development rollup -c -o dist/react-chartjs-2.js",
     "build:umd:min": "cross-env BABEL_ENV=rollup NODE_ENV=production rollup -c -o dist/react-chartjs-2.min.js",
     "build": "npm run clean && npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min",
-    "examples": "rollup -c example/rollup.config.js",
+    "examples": "rollup -w -c example/rollup.config.js",
     "examples:clean": "rimraf example/dist",
     "examples:deploy": "npm run examples:clean && npm run examples && gh-pages -d example/dist",
     "start": "npm run examples",