Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts area fillOpacity do not work when changing the color

I want an area chart with opacity 0.1. If I do not specify the color, everything works fine:

plotOptions: {
    series: {
        fillOpacity: 0.1
    }
}
series: [{
   name: '1',
   data: [1,2,3],
   type: 'area'
}

But when I change the color, the opacity is ignored:

plotOptions: {
    series: {
        fillOpacity: 0.1
    }
}
series: [{
   name: '2',
   data: [0,1,2],
   type: 'area'
   color: 'red'
}

See http://jsfiddle.net/4HkXf/

like image 306
mirelon Avatar asked Jun 10 '13 10:06

mirelon


3 Answers

fillOpacity: 0.1,
color: "rgb(0,0,0)"

seems to work on all browsers

fillOpacity: 0.1,
color: "#000"

does not work on all browsers

color: "rgba(0,0,0,0.1)"

does not work on all browsers

like image 76
Senaphet Avatar answered Nov 17 '22 11:11

Senaphet


I resolved it by removing fillOpacity, and instead specifying opacity as part of the color using rbga:

series: [{
    name: 'Buy / Sell ',
    data: data.shares_change,
    type: 'column',
    color: 'rgba(0,128,0,0.4)', // #080
    negativeColor: 'rgba(128,0,0,0.4)', // #800
    pointWidth: 8
}]
like image 26
Mike K Avatar answered Nov 17 '22 10:11

Mike K


Please use color as hex i.e "#ff0000" instead of 'red'.

http://jsfiddle.net/4HkXf/3/

like image 17
Sebastian Bochan Avatar answered Nov 17 '22 11:11

Sebastian Bochan