0

I have a stacked bar chart where I am applying custom borders after the chart has loaded i.e.

},function(chart){
    chart.series[1].data[0].graphic.attr({'stroke':'yellow','stroke-width': 2})
    chart.series[1].data[1].graphic.attr({'stroke':'yellow','stroke-width': 2})

This works fine, except for the fact that the left border stroke doesn't show the full width i.e.

enter image description here

These are my plotOptions:

    plotOptions: {
        series: {           
            states: {
                hover: {
                    enabled: false
                    }
            },          
            stacking: 'normal',
            pointPadding: 0.1,
            borderWidth: 0,
            lineWidth: 0,   
            dataLabels: {
                enabled: true,
                formatter: function() { return this.series.index==0 ? "<div style='color:#000000;'>"+this.y + "</div>" : this.y ; },
                useHTML: true,
                connectorWidth: 1,
                style: {
                    fontSize: "14px",
                    color: '#FFFFFF',
                    fontWeight: 'normal'
                }
            }
        }
    },

Additionally, even though I have disabled the hover effect (as you can see in the plotOptions above), when you mouse over the highlighted bar, the yellow border changes to white:

AFTER HOVERING enter image description here

Any pointers to resolving either of these issues would be appreciated.

richnwilson
  • 67
  • 7
  • 1
    Regarding the border being covered, I think this is a general SVG problem. One of the two rectangles has to be drawn "on top" (last), and borders around SVG rectangles cannot be controlled in terms of inside/outside. So lets say you bring your 20 rect in front then you'd have the same problem with the 9 rect. See: http://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn – Halvor Holsten Strand Apr 29 '16 at 18:40

2 Answers2

1

FIXED - Hover Issue I was able to use plotOptions: {series: { enableMouseTracking :false}}} to disable all mouse interaction. This solved the hover effect of changing border back to white.

If you need to retain mouse interaction, just enable the default border color to be your highlighted one i.e. plotOptions: { bar: { borderColor: "yellow"}}

richnwilson
  • 67
  • 7
0

FIXED - SVG Border issue on Stacked charts It's a bit of a hack but I used some jQuery in the post chart creation function to remove 1px from the height of the bar and add 1px to the y value, for the affected stacked bar i.e.

$(".highcharts-series:gt(0) rect").each(function(index,value) {
        $(this).attr("height",$(this).attr("height")-1);
        $(this).attr("y",parseInt($(this).attr("y"))+1);
richnwilson
  • 67
  • 7