Implement Shadow Options (Color, Size)
This would allow us to control how the shadows look like, similar to photoshop drop shadow options.
-
umangberi commented
Shadow does not seem to be working with scatter chart unfortunately.
-
Curt commented
In case anyone stumbles upon this one, I've implemented support for inner and outer shadows in my own version of highcarts.
I replaced the shadow function near line 2689 in highcharts.src.js with this:
/**
* Add a shadow to the element. Must be done after the element is added to the DOM
* @param {Boolean|Object} shadowOptions Either a custom shadow object or boolean for default shadow
*/
shadow: function (shadowOptions, group, cutOff) {
// The following vars are used for custom shadows
var renderer = this.renderer,
filterObject,
shadowPosition,
shadowType;// The following vars are used for standard shadows
var shadows = [],
i,
shadow,
element = this.element,
strokeWidth,
// compensate for inverted plot area
transform = this.parentInverted ? '(-1,-1)' : '(1,1)';if (shadowOptions && shadowOptions.innerShadow) {
shadowPosition = {
operator: 'arithmetic',
in2: 'SourceAlpha',
k2: -1,
k3: 1,
result: 'shadowDiff'
};
shadowType = "innerShadow";
} else if (shadowOptions && shadowOptions.outerShadow) {
shadowPosition = {
operator: 'arithmetic',
in2: 'SourceAlpha',
k2: 1,
k3: -1,
result: 'shadowDiff'
};
shadowType = "outerShadow";
}
if (shadowPosition && shadowType) {
var shadowAttr = shadowOptions[shadowType];// Check if a shadow object with the same config object is created within this renderer
if (!shadowAttr.id || !shadows[shadowAttr.id]) {
if (isArray(shadowAttr)) {
shadowOptions[shadowType] = shadowAttr = {
x: shadowAttr[0] || 0,
y: shadowAttr[1] || 0,
blur: shadowAttr[2] || 0,
color: shadowAttr[3] || 'black',
opacity: shadowAttr[4] || 1
};
}
}// Set the id and create the element
shadowAttr.id = PREFIX + idCounter++;
shadows[shadowAttr.id] = filterObject = renderer.createElement('filter')
.attr({
'inkscape:label': 'Outer_Shadow',
'id': shadowAttr.id
})
.add(renderer.defs);renderer.createElement('feGaussianBlur')
.attr({
in: 'SourceAlpha',
stdDeviation: shadowAttr.blur,
result: 'blur'
})
.add(filterObject);renderer.createElement('feOffset')
.attr({
dy: shadowAttr.y,
dx: shadowAttr.x
}).add(filterObject);renderer.createElement('feComposite')
.attr(shadowPosition)
.add(filterObject);renderer.createElement('feFlood')
.attr({
'flood-color': shadowAttr.color,
'flood-opacity': shadowAttr.opacity
})
.add(filterObject);renderer.createElement('feComposite')
.attr({
in2: 'shadowDiff',
operator: 'in'
})
.add(filterObject)renderer.createElement('feComposite')
.attr({
in2: 'SourceGraphic',
operator: 'over'
})
.add(filterObject)// Apply the filter to the SVG object
this.css({ filter: 'url(' + renderer.url + '#' + shadowAttr.id + ')' });
} else if (shadowOptions) {
for (i = 1; i <= 3; i++) {
shadow = element.cloneNode(0);
strokeWidth = 7 - 2 * i;
attr(shadow, {
'isShadow': 'true',
'stroke': 'rgb(0, 0, 0)',
'stroke-opacity': 0.05 * i,
'stroke-width': strokeWidth,
'transform': 'translate' + transform,
'fill': NONE
});
if (cutOff) {
attr(shadow, 'height', mathMax(attr(shadow, 'height') - strokeWidth, 0));
shadow.cutHeight = strokeWidth;
}if (group) {
group.element.appendChild(shadow);
} else {
element.parentNode.insertBefore(shadow, element);
}shadows.push(shadow);
}this.shadows = shadows;
}return this;
}
}; -
whwnow commented
Strong support !!
-
Philippe commented
Nice to would be at least a style for
Stroke width
color
opacity -
Gabe commented
Agreed. In the jqPlot library, default shadows are much nicer than Highcarts (overall I still prefer Highcharts). They make the charts pop a bit more and bright colored lines stand out better on light backgrounds. I'd be happy with a better default shadow in addition to actual shadow options.
-
Theo commented
An important part of this is shadows for markers - at least for symbols if not for images. Flot has is and it makes Flot charts look terrific.