How to add box shadow for highchart chart?

Question

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

Are you trying to apply the styles to the chart container? What selector are you using for your style rule? — Joseph Marikle, Nov 17 '17 at 18:11
Check my updated answer. Just increase or descrease `width` value until you get the desired result. — ceferrari, Nov 17 '17 at 18:22

ceferrari · Accepted Answer · 2017-11-17T18:21:53.863

4

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

edited Nov 17 '17 at 18:21

answered Nov 17 '17 at 18:13

ceferrari

1,597
1
20
25

score 1 · Answer 2 · edited Nov 17 '17 at 19:20

1

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;
}

edited Nov 17 '17 at 19:20

Aaqib

9,942
4
21
30

answered Nov 17 '17 at 18:12

Billy Fischbach

191
1
9

How to add box shadow for highchart chart?

2 Answers2