Extended Highcharts Boxplot to include mean line - how to remove extra line on resize?

Question

I've extended the 'drawPoints' prototype in order to add a mean line to the boxplot, following the docs and this fiddle.

(function (H) {

    H.seriesTypes.boxplot.prototype.pointArrayMap = ['low', 'q1', 'median', 'q3', 'high', 'mean'];

    H.seriesTypes.boxplot.prototype.toYData = function (point) {
        return [point.low, point.q1, point.median, point.q3, point.high, point.mean];
    };

    H.wrap(H.seriesTypes.boxplot.prototype, 'drawPoints', function (p) {
        p.call(this);
        var chart = this.chart,
            r = chart.renderer,
            xAxis = this.xAxis,
            yAxis = this.yAxis,
            x, y;

        H.each(this.points, function (p, i) {
            x = p.shapeArgs.x;
            y = p.meanPlot;

            if (p.meanPlotX) {
                p.meanPlotX.attr({
                    d: ['M', x, y, 'L', x + p.shapeArgs.width, y]
                });
            } else {
                p.meanPlotX = r.path(['M', x, y, 'L', x + p.shapeArgs.width, y]).attr({
                    stroke: 'black',
                        'stroke-width': 2
                }).add(p.series.group);
            }

        });
    });

})(Highcharts)

However, the mean line is not removed and redrawn when the window is resized (or other event that triggers redraw).

How do I ensure that the extra line is added correctly in my customisation so that it is removed correctly on resize and other events?

What do you mean by "removing"? I don't quite understand what exactly do you want to achieve. The only thing I've noticed with your code that your inline styles are not working and your chart is not responsive - that's why resizing isn't doing anything. — raf18seb, Oct 15 '18 at 16:20
The fiddle isn't my code, just something I found to help me get this far. By 'removed' I mean the extra lines I'm adding (e.g. the mean line) are drawn multiple times each time the chart is modified, whereas the other standard boxplot items (e.g. median line, max, min and IQR) are removed and then redrawn. The boxplot inherits from line, which has 'removed' and 'destroyed' functions in the line prototype. I've tried extending these without any luck. Hence the question. Let me know if you want further clarification on the ask. — steswinbank, Oct 16 '18 at 18:21
sorry but I still don't know what exactly your issue looks like. Let me explain the way I understand you. You try to render a new black line inside every point, right? And when you redraw the chart (e. g. while resizing the window) you'd like to redraw points and redraw new line again (the black one)? And this is exactly what is happening: http://recordit.co/tj3IHyk2Cn Maybe I misunderstood you? What exactly is your "mean line"? — raf18seb, Oct 17 '18 at 12:09

score 0 · Answer 1 · answered Nov 20 '18 at 16:43

It looks like your custom code works fine in most cases of chart modification. I noticed the main problem when trying to remove some point: http://jsfiddle.net/BlackLabel/n6dcez2h/

You should add the generated line to p.graphic:

        H.each(this.points, function (p, i) {
            x = p.shapeArgs.x;
            y = p.meanPlot;

            if (p.meanPlotX) {
                p.meanPlotX.attr({
                    d: ['M', x, y, 'L', x + p.shapeArgs.width, y]
                });
            } else {
                p.meanPlotX = r.path(['M', x, y, 'L', x + p.shapeArgs.width, y]).attr({
                    stroke: 'black',
                        'stroke-width': 2
                }).add(p.graphic); // not p.series.group
            }
        });

Live demo: http://jsfiddle.net/BlackLabel/137q4xmb/

Extended Highcharts Boxplot to include mean line - how to remove extra line on resize?

1 Answers1