Bar graph added.

node_modules/vega-scenegraph/src/util/canvas/gradient.js

@@ -0,0 +1,59 @@
+import value from '../value';
+import {canvas} from 'vega-canvas';
+
+function addStops(gradient, stops) {
+  const n = stops.length;
+  for (let i=0; i<n; ++i) {
+    gradient.addColorStop(stops[i].offset, stops[i].color);
+  }
+  return gradient;
+}
+
+export default function(context, spec, bounds) {
+  const w = bounds.width(),
+        h = bounds.height();
+  let gradient;
+
+
+  if (spec.gradient === 'radial') {
+    gradient = context.createRadialGradient(
+      bounds.x1 + value(spec.x1, 0.5) * w,
+      bounds.y1 + value(spec.y1, 0.5) * h,
+      Math.max(w, h) * value(spec.r1, 0),
+      bounds.x1 + value(spec.x2, 0.5) * w,
+      bounds.y1 + value(spec.y2, 0.5) * h,
+      Math.max(w, h) * value(spec.r2, 0.5)
+    );
+  } else { // linear gradient
+    const x1 = value(spec.x1, 0),
+          y1 = value(spec.y1, 0),
+          x2 = value(spec.x2, 1),
+          y2 = value(spec.y2, 0);
+
+    if (x1 === x2 || y1 === y2 || w === h) {
+      // axis aligned: use normal gradient
+      gradient = context.createLinearGradient(
+        bounds.x1 + x1 * w,
+        bounds.y1 + y1 * h,
+        bounds.x1 + x2 * w,
+        bounds.y1 + y2 * h
+      );
+    } else {
+      // not axis aligned: render gradient into a pattern (#2365)
+      // this allows us to use normalized bounding box coordinates
+      const image = canvas(Math.ceil(w), Math.ceil(h)),
+            ictx = image.getContext('2d');
+
+      ictx.scale(w, h);
+      ictx.fillStyle = addStops(
+        ictx.createLinearGradient(x1, y1, x2, y2),
+        spec.stops
+      );
+      ictx.fillRect(0, 0, w, h);
+
+      return context.createPattern(image, 'no-repeat');
+    }
+  }
+
+  return addStops(gradient, spec.stops);
+}