I'm using syncfusion_flutter_charts in Flutter for displaying charts.
How to add Box shadow in this chart?
I tried using shaders but was still not able to add a box shadow to a graph.
Below is the code
List<ColumnSeries<ChartSampleData, String>> _getDefaultColumnSeries() {
return <ColumnSeries<ChartSampleData, String>>[
ColumnSeries<ChartSampleData, String>(
dataSource: <ChartSampleData>[
ChartSampleData(x: 'Jan', y: 200000),
ChartSampleData(x: 'Feb', y: 100000),
ChartSampleData(x: 'March', y: 50000),
ChartSampleData(x: 'April', y: 0),
ChartSampleData(x: 'May', y: 20000),
ChartSampleData(x: 'June', y: 0),
],
xValueMapper: (ChartSampleData sales, _) => sales.x,
yValueMapper: (ChartSampleData sales, _) => sales.y,
dataLabelSettings: const DataLabelSettings(
textStyle: TextStyle(fontSize: 10),
),
color: AppColors.bottomNavColor,
borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
onCreateShader: (ShaderDetails chartShaderDetails) {
final shader = program!.fragmentShader();
shader.setFloat(0, chartShaderDetails.rect.width);
shader.setFloat(1, chartShaderDetails.rect.height);
return shader;
},
)
];
}
graph_shader.frag
#include <flutter/runtime_effect.glsl>
precision mediump float;
uniform vec2 resolution;
out vec4 fragColor;
void main(){
vec2 position = FlutterFragCoord().xy / resolution.xy;
position.x -= resolution.x / resolution.y;
vec3 color = vec3(0);
fragColor = vec4(color, .7);
}

