How to add Box Shadow to Graph using syncfusion_flutter_charts in Flutter?

152 views Asked by At

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

Current code output enter image description here

Want output like this Graph with Box Shadow

0

There are 0 answers