How can I customize highcharts with css?

Question

I am working on high charts and want to see if it is possible to add arrows on my pie chart. Here is my chart. Is it possible to add arrows on top of the chart, something like this?

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'My Pie Chart'
    },
    plotOptions: {
        pie: {
            colors: ['#3366FF'] // Blue color for all slices
        }
    },
    series: [{
        data: [
            { name: 'Slice 1', y: 25 },
            { name: 'Slice 2', y: 25 },
            { name: 'Slice 3', y: 25 },
            { name: 'Slice 4', y: 25 }
        ]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>  <div id="container"></div> 

Answer 1

You can use Highcharts.SVGRenderer class to add a custom icon on a chart. For example:

  chart: {
    events: {
      render: function() {
        const chart = this;
        const center = chart.series[0].center;
        const size = 50;

        if (!chart.customIcon) {
          chart.customIcon = chart.renderer.image('https://www.highcharts.com/samples/graphics/flag.svg', null, null, size, size)
            .attr({
              zIndex: 3
            })
            .add();
        }

        const customIcon = chart.customIcon.attr({
          x: center[0] + chart.plotLeft - size / 2,
          y: center[1] + chart.plotTop - size / 2
        });
      }
    }
  }

---

Live demo: https://jsfiddle.net/BlackLabel/9un06pao/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image