SVG marker symbol sizing by height and width instead of radius
I have a project where I needed to add mean diamonds to a boxplot, and I have a working prototype where the height and width of the marker symbol are used instead of the radius. The marker height needs to stretch or shrink based on a data value instead of being fixed by a radius value. Below is a shim that I wrote that modifies the Series markerAttribs function. Can you take a look at this function and find a way to integrate it into a future release?
Thanks,
Jeremy
//Taken (and altered) from highcharts.src.js (v5.0.7) line 17497
Highcharts.Series.prototype.markerAttribs = function (point, state) {
var seriesMarkerOptions = this.options.marker,
seriesStateOptions,
pointMarkerOptions = point.marker || {},
pointStateOptions,
radius = Highcharts.pick(pointMarkerOptions.radius, seriesMarkerOptions.radius),
height = Highcharts.pick(pointMarkerOptions.height, seriesMarkerOptions.height),
width = Highcharts.pick(pointMarkerOptions.width, seriesMarkerOptions.width),
attribs;
// Handle hover and select states
if (state) {
seriesStateOptions = seriesMarkerOptions.states[state];
pointStateOptions = pointMarkerOptions.states &&
pointMarkerOptions.states[state];
radius = Highcharts.pick(
pointStateOptions && pointStateOptions.radius,
seriesStateOptions && seriesStateOptions.radius,
radius + (seriesStateOptions && seriesStateOptions.radiusPlus || 0)
);
}
if (point.hasImage) {
radius = 0; // and subsequently width and height is not set
}
attribs = {
x: Math.floor(point.plotX) - radius, // Math.floor for #1843
y: point.plotY - radius
};
//use height and width for SVG instead of radius
if (!point.hasImage && height && width) {
attribs.x = Math.floor(point.plotX) - width/2;
attribs.y = point.plotY - height/2;
attribs.width = width;
attribs.height = height;
}
else if (radius) {
attribs.width = attribs.height = 2 * radius;
}
return attribs;
};
-
Jeremy Francis commented
Here is an example of the custom SVG symbol used for the mean diamonds.
Highcharts.SVGRenderer.prototype.symbols['diamond2'] = function (x,y,w,h) { return ['M',x,y+h/2,'L',x+w/2,y,'L',x+w,y+h/2,'L',x+w/2,y+h,'L',x,y+h/2,'L',x+w,y+h/2]; }