CODEWITHSUNDEEP
highcharts
Nickeat
Nickeat

Reputation: 1040

Set custom color for highcharts-halo in styled mode

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>

Upvotes: 1

Views: 1071

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

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:

Upvotes: 2

Related Questions