Markers not shown with areasplinerange plot #6736
Comments
Related UserVoice topic. It says for |
Yes I assume so. Hopefully you will consider implementing this. I think it would be a very enhancing enhancement :) |
Simple POC for both markers, which works like a plugin: http://jsfiddle.net/kezrmt9x/ (function(H) {
var origDrawPoints = H.Series.prototype.drawPoints,
defaultOptions = H.getOptions().plotOptions,
defaultMarkerOptions = defaultOptions.line.marker,
defaultHaloOptions = defaultOptions.area.states;
// Generate symbol:
H.seriesTypes.arearange.prototype.getSymbol = function() {
return this.getCyclic(
'symbol',
'circle',
this.chart.options.symbols
);
};
// Set options:
H.wrap(H.seriesTypes.arearange.prototype, 'init', function(proceed, chart, userOptions) {
var ret = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.options.marker = H.merge(defaultMarkerOptions, userOptions.marker || {});
this.options.states = H.merge(defaultHaloOptions, userOptions.states || {});
return ret;
});
// Render points:
H.wrap(H.seriesTypes.arearange.prototype, 'drawPoints', function(proceed) {
var len = this.points.length,
point,
i;
// Draw bottom points:
origDrawPoints.apply(this, Array.prototype.slice.call(arguments, 1));
i = 0;
while (i < len) {
point = this.points[i];
point.lowerGraphic = point.graphic;
point.graphic = point.upperGraphic;
point.plotY = point.plotHigh;
i++;
}
// Draw top points:
origDrawPoints.apply(this, Array.prototype.slice.call(arguments, 1));
i = 0;
while (i < len) {
point = this.points[i];
point.upperGraphic = point.graphic;
point.graphic = point.lowerGraphic;
point.plotY = point.plotLow;
i++;
}
});
// Update halo:
H.wrap(H.seriesTypes.arearange.prototype.pointClass.prototype, 'haloPath', function(proceed) {
var path = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (this.upperGraphic) {
this.plotY = this.plotHigh;
path = path.concat(
proceed.apply(this, Array.prototype.slice.call(arguments, 1))
);
this.plotY = this.plotLow;
}
return path;
});
// Destroy upper graphic:
H.wrap(H.seriesTypes.arearange.prototype.pointClass.prototype, 'destroy', function(proceed) {
if (this.upperGraphic) {
this.upperGraphic = this.upperGraphic.destroy();
}
return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
})(Highcharts); It's not a perfect solution (halo is clipped, there's no option to set different markers top vs bottom, etc.). |
@pawelfus nice work. I also note that, in my current design, I have points of a certain radius that expand on hover to a larger radius. With the new method of yours, this also isn't handled... see e.g. http://jsfiddle.net/ksubbk66/ Is there any reason why the |
Marker options is one of the |
@pawelfus I look forward to seeing this in the next version :) |
Examples:
|
Internal note:
|
Could markers be disabled by default for range series, to maintain the existing behaviour (non breaking) but with the option to enable? I think the inclusion of markers on range series is a big improvement. Thanks. |
I will leave it up to @TorsteinHonsi I think it's questionable what's more important: consistency between series types for defaults or keeping old design. Probably if this could be released as part of 5.1.0 then it should be fine. |
I prefer consistency between series types. I've simply disabled markers in one of the demos where I think it was disturbing. |
Will this be in the next |
It will be released with v5.0.13. |
Expected behaviour
I would expect markers to be shown with an
areasplinerange
plot just as they are with anareaspline
plot. Yes, therange
aspect of it makes it a slightly different animal, having two values associated with each point rather than just one, but I would still expect it to be possible to show markers for those two points, instead of just nothing. When displaying a shared tooltip over a chart having a mix ofareasplinerange
andareaspline
plot types, although values for both series appear in the tooltip, only the markers on theareaspline
plot react to hover events.... it just doesn't look right IMHO... therange
plot just looks "dead" in comparison to the animated non-range
plot.Actual behaviour
Markers are not shown with an
areasplinerange
plot.Live demo with steps to reproduce
http://jsfiddle.net/L2uo2898/
Affected browser(s)
All
The text was updated successfully, but these errors were encountered: