Can't Apply SVG Gradients to Chart SVG Elements

I’ve been trying and failing to apply what should be a simple styling of lines, areas, bars, and pie slices using SVG gradients and I can’t figure out why it isn’t working.

Attempting to use either pre-existing SVG gradients or dynamically created SVG gradients through the Chartist API, the chart fills or strokes go transparent. Can anyone tell me what is wrong?

My code is as follows:

CSS

.ct-chart.blue-grad {
    .ct-series-a {
        .ct-point, .ct-line, .ct-bar, .ct-slice-donut   { stroke: url(#gradient); }
        .ct-slice-pie, .ct-area                         { fill: url(#gradient); }
    }
}

Preexisting SVG

<svg>
    <defs>
        <linearGradient id="gradient">
            <stop offset="0" stop-color="red"/>
            <stop offset="1" stop-color="blue"/
        </linearGradient>
    </defs>
</svg>

Create Gradients on Draw

var gradientsAdded;
gradientsAdded = false;
// I've tried doing this listening at the 'created' event, as well
$chart.on('draw', function(data) {
  var _stops, defs, gradient, i, len, stop;
  if (gradientsAdded === false) {
    defs = new Chartist.Svg('defs');
    gradient = defs.elem('linearGradient', {'id': 'gradient'});
    _stops = [
      {offset: 0, stopColor: '#00d5bd'}, 
      {offset: 100, stopColor: '#24c1ed'}
    ];
    for (i = 0, len = _stops.length; i < len; i++) {
      stop = _stops[i];
      stop = gradient.elem('stop', {'offset': stop.offset, 'stop-color': stop.stopColor });
    }
    data.element.append(defs, true);
    gradientsAdded = true;
  }
});

[gionkunz]

Hi @AJeezy9

Actually I’ve found out that it’s not a bug but rather a specification. Still, to me it looks like a design issue in the SVG specification as the behaviour is unexpected for the user.

Check http://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBox at the bottom. It says:

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

Which means for us as SVG users, that straight lines won’t have a bounding box and therefor won’t generate bounding box coordinates for the gradient mapping process. If you ask me, there should be a bounding box with one component (height or width) being 0 and mapping processes need to take this into account. But maybe Mr. SVG @longsonr can give some background why the spec is like that 😃

You have a couple of options for your gradients on straight lines like they exist on the bar chart. You could either switch to gradientUnits="userSpaceOnUse" on your gradient and try to achieve a gradient mapping in user space (although you’ll have a hard time with that I guess and probably require one gradient per line). Or, as a very simple workaround, make your straight lines not straight anymore 😃 But just a tiny little bit, just a few ticks above the precision limit within the browser.

In this example, I use the draw event to modify the bars so that they are not 100% straight anymore (you wont notice as its probably an angle ~< 0.001deg) and the created event in order to create the gradient definition. Gradient assignment is in the CSS panel. http://jsbin.com/kedeta/edit?css,js,output

[hitautodestruct]

Pointing out the gist of @gionkunz helpful fix.

For anyone having this issue the basic idea is to offset the bar just a tiny bit so that the browser renders a bounding box thus allowing for a gradient on the line using stroke.

Add the js below and then apply your gradient to the stroke JS

// Offset x1 a tiny amount so that the straight stroke gets a bounding box
// Straight lines don't get a bounding box 
// Last remark on -> http://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBox
chart.on('draw', function(ctx) {
  if(ctx.type === 'bar') {
    ctx.element.attr({
      x1: ctx.x1 + 0.001
    });
  }
});