Highcharts 3.0 - Renderer is covering the export button

Question

I just upgraded an application to Highcharts 3.0, and it looks like the new export button is now covered by objects drawn using the chart renderer. This wasn't the case under 2.3.3.

Please see http://jsfiddle.net/YcJ6U/1/

Here's the code to produce the plot:

$(function () { $('#container').highcharts({

    chart: {
        events: {
            load: function(event) {
                drawBox(this);
            }
        }
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }],

    exporting: {
        buttons: {
            contextButton: {
                symbol: 'circle',
                symbolStrokeWidth: 1,
                symbolFill: '#bada55',
                symbolStroke: '#330033',
                align: 'left'
            }
        }
    }

}, function(chart) {
    //drawBox(chart)
});

function drawBox(chart) {
    chart.renderer.rect(25, 0, 100, 100, 5)
        .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow'               
        }).add();        
}

}); Can anyone provide a solution to this?

If you set the `renderers` zIndex to 3, you put it on top the button. Remove that line and problem solved.. — Mark, Apr 05 '13 at 16:27
You're right, that's what I get for copying and pasting. I updated the fiddle to demonstrate the behavior regardless of removing zIndex: http://jsfiddle.net/YcJ6U/1/ — Robert Aspinall, Apr 05 '13 at 17:02

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

Not sure when this changed but Highcharts is rendering both the button and the rect using SVG. Element stacking order is based on the order they were drawn. By drawing the rect onload, you are drawing it after the button. I believe the only way to fix this would be after the chart is drawn to bring the button back to the top:

chart.exportSVGElements[0].toFront()

Or go back to how it was in the initial link without the zIndex :)

Updated fiddle here.

edited May 23 '17 at 11:58

Community

1
1

answered Apr 05 '13 at 17:23

Mark

106,305
20
172
230

Awesome, bringing it to the front took care of it. I feel like this should probably be considered a bug (why would someone enable exporting just to draw a canvas element over it?). I also think the draw order shouldn't be affected by which method a user employs to perform actions on chart complete. Thanks again for your help! – Robert Aspinall Apr 05 '13 at 17:36

score 1 · Answer 2 · answered Oct 20 '15 at 15:19

1

that is maybe a z-index problem. in highcharts z-index represents by zIndex. you should try this

exporting: {
    buttons: {
        contextButton: {
            theme: {
                 zIndex: 10
             }
        }
    }
}

hey this is works. i checked it

answered Oct 20 '15 at 15:19

Anbu

490
6
20

1

Thanks. As of 2018, this is no longer documented by Highcharts, but worked well enough for me, too. – Micah Bales Jan 12 '18 at 19:15

score 0 · Answer 3 · answered Apr 04 '18 at 19:26

With highchart 6.0.4:

   exporting: {
                buttons: {
                    contextButton: {
                        theme: {
                            style: {
                                zIndex: 9999
                            }
                        }
                    }
                }
  }

Highcharts 3.0 - Renderer is covering the export button

3 Answers3