CODEWITHSUNDEEP
csssvghighcharts
Curtis
Curtis

Reputation: 13

Border is partially hidden on hover in Highcharts column and pie charts

When I hover over segment of a stacked bar or pie chart I want the segment to have a black border all of the way around. However, for stacked column and pie charts in particular one side of the hovered-over segment retains the white border separating it from the next segment:

incomplete bar segment border

Are there Highcharts settings or CSS styles to enable the border to be shown all of the way around the segment when hovering over that segment?

Chart settings and JSFiddle links:

column chart: http://jsfiddle.net/nyh22g2e/1/

column chart settings:

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  plotOptions: {
    series: {
      states: {
        hover: {
          brightness: 0,
          borderColor: 'black',
          halo: false,
        }
      }
    }
  },

  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]
  }]
});

pie chart: http://jsfiddle.net/djpjtmzg/

pie chart settings:

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  plotOptions: {
    series: {
      states: {
        hover: {
          brightness: 0,
          borderColor: 'black',
          halo: false,
        }
      }
    }
  },

  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]
  }]
});

Upvotes: 0

Views: 1199

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

Some parts of the border are not visible because they're being overlapped by the "regular" border of other columns. Setting borderWidth to 0 in non-hover state seems to solve this issue:

plotOptions: {
    series: {
        stacking: 'normal',
        borderWidth: 0, // regular border disabled
        states: {
            hover: {
                brightness: 0,
                borderColor: 'black',
                borderWidth: 1 // enable border on hover
            }
        }
    }
}

Live demo: http://jsfiddle.net/kkulig/1kh7kvqq/

API reference: https://api.highcharts.com/highcharts/plotOptions.column.borderWidth

Edit

I noticed that better solution for this problem appeared on Highcharts forum: https://forum.highcharts.com/highcharts-usage/stacked-bar-and-pie-border-on-hover-t39961/

It uses mouseOver event to increase the zIndex of the hovered element.

Bottom border issue:

Removing "clip-path" SVG attribute for the hovered series fixes the problem:

  events: {
    mouseOver: function() {
      this.update({
        zIndex: 1
      });
      this.group.attr({
        "clip-path": ""
      });
    }
  },

Live demo: http://jsfiddle.net/kkulig/p9cqzs3f/

Upvotes: 0

Related Questions