Set custom color for highcharts-halo in styled mode

Question

I am using Highcharts 6.0.1 in styled mode and trying to set a custom color for a specific point and the correspondent halo.

I need to be able to dynamically append a class name to some of the points in the series. These points need to be displayed in a different color, thus overriding the default series colors (.highcharts-color-i).

I managed to override the color of a specific the point, as the point object accepts an optional className which can then be used to style the color of the slice in the pie chart.

The css rule for the halo though, is set to inherit the color of the correspondent .highcharts-color-i and since it is not a child element of the point it cannot inherit the custom class name.

Here is a code snippet. You can see that when hovering over the grey slice, the halo is using the default color.

Highcharts.chart('container', {
    title: {
        text: 'Pie point CSS'
    },
    tooltip: {
     pointFormat: '<b>{point.percentage:.1f}%</b>'
    },
    series: [{
        type: 'pie',
        keys: ['name', 'y', 'className'],
        data: [
            ['Point1', 29.9,],
            ['Point2', 14.5],
            ['Point3', 11.5],
            ['Point4', 54.5, 'custom-style'],
        ],
    }]
});

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
	height: 400px;
	max-width: 800px;
	min-width: 320px;
	margin: 0 auto;
}
.highcharts-tooltip {
  stroke: gray;
}
.highcharts-pie-series .highcharts-point {
	stroke: #EDE;
	stroke-width: 2px;
}
.highcharts-pie-series .highcharts-data-label-connector {
	stroke: silver;
	stroke-dasharray: 2, 2;
	stroke-width: 2px;
}

.highcharts-pie-series .highcharts-point.custom-style,
.highcharts-pie-series .highcharts-data-label-connector.custom-style {
	stroke: lightgray;
	stroke-dasharray: white;
	stroke-width: 1px;
  fill:lightgray;
}

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

you can use solution from this post. by changing size of halo to zero — Deep 3015
Thanks for the link. Yeah that could work, although I'm keen on using the default halo element and keep the style configuration separated from the chart settings. — Nickeat
It follows as you mentioned and since it not a child element of the point it cannot inherit the custom class name. in your post. So I think only way is to update .highcharts-color-i class to get desired effect — Deep 3015

Kamil Kulig Kamil Kulig · Accepted Answer · 2017-11-06T12:33:34

Halo is a property of a series (not a point - only one halo can exist per series). In DOM tree it's on the same level as the rest of the points.

You can use point's mouseOver event for setting the color of the halo:

  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            var point = this,
              className = point.className;
            if (className) {
              point.series.halo.attr({
                class: 'highcharts-halo custom-style'
              });
            }
          }
        }
      }
    }
  }

.highcharts-halo.custom-style selector is used for styling via CSS.

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

API reference:

Set custom color for highcharts-halo in styled mode

1 Answers