I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work.
Here is the code snippet I have for adding shadows:
<script>
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementsByClassName("marks")[0];
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.shadowColor = 'black';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
// ctx.fill();
}
}, false);
</script>
This is how the complete HTML structure looks like -
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dfbe8eaeca0e1e4f9e8cdb9a3b5a3bc">[email protected]</a>"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-projection-extended@2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 400
}
},
"data": {
"url": "https://vega.github.io/vega-datasets/data/cars.json"
},
"encoding": {
"color": {
"field": "Origin",
"type": "nominal"
},
"x": {
"field": "Horsepower",
"type": "quantitative"
},
"y": {
"field": "Miles_per_Gallon",
"type": "quantitative"
}
},
"mark": "point"
};
var opt = {"renderer": "canvas", "actions": false};
vegaEmbed("#vis", spec, opt);
</script>
<span class="update_time">Updated at 2020-02-24 12:10</span>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementsByClassName("marks")[0];
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.shadowColor = 'black';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
// ctx.fill();
}
}, false);
</script>
</html>What adjustments do I need to make in the script to add a shadow effect below one side of the chart?