Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts : Change opacity of a column chart

I need change opacity of column in stack chart when using highchart. Because i need transparent

<script type="text/javascript">
    $(function () {
        $('#trend').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Weight Oscillation Projection'
            },
            xAxis: {
                categories: ['1st Week', '2nd Week', '3rd Week', '4th Week', '5th Week', '6th Week']
            },
            yAxis: {
                title: {
                    text: 'Weight (Kg)'
                },
                stackLabels: {
                    enabled: false,                    
                }
            },
            legend: {
                enabled: false,  
            },
            tooltip: {
                enabled: false,
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,                        
                    }
                },                    
            },
            series: [{
                name: 'Jane',
                data: [2, 2, 3, 2, 1],                   
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5],
                color: '#fff',
                style: {opacity: 0.0}  
            }]
        });
    });    
</script>

I know series -> data object has not property for change style. How can we do such things?

like image 303
Dinuka Thilanga Avatar asked Jun 04 '14 11:06

Dinuka Thilanga


1 Answers

Use the rgba format to change the opacity.

Example:

color: 'rgba(255, 255, 255, 0.50)'

Reference

  • Highcharts Docs chart design and style

Semi-transparent colors in Highcharts are given in the rgba format rgba(255,255,255,1). The last parameter is the alpha or opacity that ranges from 0, fully transparent, to 1, fully opaque. Because of this, there are no separate opacity options in the Highcharts API.

like image 54
R3tep Avatar answered Oct 13 '22 00:10

R3tep