title: Highcharts - Getting a 3d effect with selected pie chart slices
body: <p>In highcharts, I'm trying to make so that when the user selects or hover over a slice of a pie chart, the slice makes the effect of getting up in the z axis (towards the user). I'm trying to accomplish this by setting a shadow filter through css and making the border of the slice wider (with the same color of the fill). However, the issue I face is that the slices can still be below other slices, so the selected slice and its shadow will go behind those slices thus still seeming to be under them. To further illustrate:</p>
  <p>Since red was added last, it looks good when selected - it's above the other pie slices.
  <a href="https://i.stack.imgur.com/NtCcM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NtCcM.png" alt="Looks good" /></a></p>
  <p>However, blue gets stuck behind the other slices when selected, because it was first in the array.
  <a href="https://i.stack.imgur.com/HAP6J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HAP6J.png" alt="Doesn't look good" /></a></p>
  <p>I know SVG will stack elements after their order in the DOM and not with a css property such as z-index, so one idea was to remove the selected point and then appending it again. This rearranges the whole pie however, so it's not an alternative.</p>
  <p>Is there any other solution for this I'm not thinking of?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', function() {
    const chart = Highcharts.chart('container', getChartOptions())
  })
  
  /** 
   * Gets the highchart options for the pie chart.
   * Each data point has event handlers added to them 
   * To set the correct border widths
   */
  function getChartOptions() {
    return {
      series: [{
        type: 'pie',
        innerSize: '80%',
        allowPointSelect: true,
        slicedOffset: 0,
        states: {
          // Remove default hover settings
          hover: {
            halo: null,
            brightness: 0,
          },
        },
        data: getMockData()
      }],
    };
  }
  
  /** 
   * Generates mock data for highcharts
   * Each data point has event handlers set up in the `events` property
   */
  function getMockData() {
    return [{
        color: '#aaf',
        borderColor: '#aaf',
        y: 4,
        events: getEventHandlers(),
      },
      {
        color: '#afa',
        borderColor: '#afa',
        y: 3,
        events: getEventHandlers(),
      },
      {
        color: '#faa',
        borderColor: '#faa',
        y: 8,
        events: getEventHandlers(),
      },
    ]
  }
  
  /** 
   * Event handlers for highchart data points. 
   * The border width of the slice is set to 20 for `select` and `mouseOver`
   * The border width of the slice is set to 0 for `unselect` and `mouseOut` (except when the event is selected, in which case `mouseOut` shouldn't do anything)
   */
  function getEventHandlers() {
    return {
      select: (obj) =&gt; {
        obj.target.update({
          borderWidth: 20
        });
      },
      unselect: (obj) =&gt; {
        obj.target.update({
          borderWidth: 0
        });
      },
      mouseOver: (obj) =&gt; {
        obj.target.update({
          borderWidth: 20
        });
      },
      mouseOut: (obj) =&gt; {
        if (!obj.target['selected']) {
          obj.target.update({
            borderWidth: 0
          });
        }
      },
    };
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* A drop shadow is the effect I want to accomplish, but it should be above the other slices. */
  .highcharts-pie-series .highcharts-point-hover,
  .highcharts-pie-series .highcharts-point-select {
    filter: drop-shadow(0 0 10px black);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;div id="container" style="width:100%; height:400px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>