Charlie_Hammer
Posts: 11
Joined: Wed Oct 31, 2018 4:02 pm

How to set helo Opacity using CSS on pie-chart in Highcharts?

Tue Nov 27, 2018 5:58 am

How to set Opacity using CSS on pie-chart in Highcharts? I have set using fillOpacity, but its not working. Can any one help me with this?

Code: Select all

let chart = new Highcharts.Chart('container',
{
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
            fillOpacity: 0.5,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true,
                    color: 'rgba(150,100,50,0.1)'
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
Last edited by Charlie_Hammer on Tue Nov 27, 2018 1:52 pm, edited 1 time in total.

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: How to set Opacity using CSS on pie-chart in Highcharts?

Tue Nov 27, 2018 12:40 pm

Hi, Charlie_Hammer!

The property you are trying to use doesn't work with pie series. Instead of giving an opacity to entire series, you can set an opacity separately on every point.

jsFiddle: https://jsfiddle.net/BlackLabel/segjdryz/

Best regards!
Rafal Sebestjanski,
Highcharts Developer

Charlie_Hammer
Posts: 11
Joined: Wed Oct 31, 2018 4:02 pm

Re: How to set Opacity using CSS on pie-chart in Highcharts?

Tue Nov 27, 2018 1:52 pm

rafalS wrote:
Tue Nov 27, 2018 12:40 pm
Hi, Charlie_Hammer!

The property you are trying to use doesn't work with pie series. Instead of giving an opacity to entire series, you can set an opacity separately on every point.

jsFiddle: https://jsfiddle.net/BlackLabel/segjdryz/

Best regards!
My bad bro....I need to set Opacity on halo..sorry for that

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: How to set helo Opacity using CSS on pie-chart in Highcharts?

Tue Nov 27, 2018 1:58 pm

Oh, then you are looking for pie.states.hover.halo.opacity property: https://api.highcharts.com/highcharts/s ... hover.halo

Code: Select all

plotOptions: {
    pie: {
      allowPointSelect: true,
      fillOpacity: 0.5,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        color: '#000000',
        connectorColor: '#000000',
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      },
      states: {
      	hover: {
        	halo: {
          	opacity: 1
          }
        }
      }
    }
  },
jsFiddle: https://jsfiddle.net/BlackLabel/kc5yrta3/

Best regards!
Rafal Sebestjanski,
Highcharts Developer

Charlie_Hammer
Posts: 11
Joined: Wed Oct 31, 2018 4:02 pm

Re: How to set helo Opacity using CSS on pie-chart in Highcharts?

Tue Nov 27, 2018 2:17 pm

rafalS wrote:
Tue Nov 27, 2018 1:58 pm
Oh, then you are looking for pie.states.hover.halo.opacity property: https://api.highcharts.com/highcharts/s ... hover.halo

Code: Select all

plotOptions: {
    pie: {
      allowPointSelect: true,
      fillOpacity: 0.5,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        color: '#000000',
        connectorColor: '#000000',
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      },
      states: {
      	hover: {
        	halo: {
          	opacity: 1
          }
        }
      }
    }
  },
jsFiddle: https://jsfiddle.net/BlackLabel/kc5yrta3/

Best regards!
I just do the same..but opacity did'nt set...check out my code above...thats the problem

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: How to set helo Opacity using CSS on pie-chart in Highcharts?

Tue Nov 27, 2018 2:30 pm

Not plotOptions.pie.fillOpacity but plotOptions.pie.states.hover.halo.opacity

Code: Select all

states: {
      	hover: {
        	halo: {
          	opacity: 1
          }
        }
      }
Rafal Sebestjanski,
Highcharts Developer

Charlie_Hammer
Posts: 11
Joined: Wed Oct 31, 2018 4:02 pm

Re: How to set helo Opacity using CSS on pie-chart in Highcharts?

Tue Nov 27, 2018 2:55 pm

rafalS wrote:
Tue Nov 27, 2018 2:30 pm
Not plotOptions.pie.fillOpacity but plotOptions.pie.states.hover.halo.opacity

Code: Select all

states: {
      	hover: {
        	halo: {
          	opacity: 1
          }
        }
      }
I have tried it on my code but it's not working..But its working on codepen...Is their any other way to set helo opacity?

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: How to set helo Opacity using CSS on pie-chart in Highcharts?

Wed Nov 28, 2018 4:16 pm

Charlie,

What exactly is not working? I sent you a working jsFiddle. Am I missing something?
Rafal Sebestjanski,
Highcharts Developer

Return to “Highcharts Usage”