Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add box shadow for highchart chart?

I want to have the following style on my chart border

border-radius: 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e1e1e1;

There is shadow property for the chart but it doesn't seem to work, can someone point out my mistake?

Thanks

Here is the jsfiddle

Edit: I want it to look like this

enter image description here

like image 891
Jal Avatar asked Oct 23 '25 14:10

Jal


2 Answers

Change shadow, offsetX and offsetY to a number instead of string:

Highcharts.chart('container', {
    chart: {
        shadow: {
            color: 'rgba(0, 0, 0, 0.1)',
            offsetX: 1,
            offsetY: 1,
            opacity: '0.1',
            width: 10
        }
    }
});

Updated Fiddle

like image 145
ceferrari Avatar answered Oct 26 '25 04:10

ceferrari


Why not just apply it to the container? Here is the Jsfiddle

#container {
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #e1e1e1;
}
like image 27
Billy Fischbach Avatar answered Oct 26 '25 04:10

Billy Fischbach



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!