Customize chart with shade from one bar to another bar.

Hi,

I'm trying to create the below chart in the Flutter. I tried using multiple/combo charts but couldn't achieve it.
Hope someone here could help me. If possible with a sample code. 



Thank you,
Murali K


3 Replies

YG Yuvaraj Gajaraj Syncfusion Team January 4, 2022 02:29 PM UTC

Hi Murali, 
 
Greetings from Syncfusion. We have analyzed your query and we have achieved your requirement by creating the sample with combination of column and area series to show the shadow for the column series. We have added the column series after the area series, so that the column series get rendered above the area series and then set the opacity of the area series to 0.2. We have attached the screen shot and sample below for your reference. 
 
Screen shot: 
  
  
  
We hope it will help you to achieve your requirement. 
 
Regards, 
Yuvaraj. 



MU murali replied to Yuvaraj Gajaraj January 5, 2022 09:24 AM UTC

Hi Yuvaraj,

Thank you for taking the time and creating a sample. I also tried in a similar way.

I wanted to shade the region between the 2 columns. (end of one column to start of the next column)

Is it possible?



YG Yuvaraj Gajaraj Syncfusion Team January 6, 2022 02:07 PM UTC

Hi Murali, 
 
We have analyzed your requirement and we would like to let you know that the shadow to the column series can be only achieved by using the area series, as of now we don’t have a support to render a shadow for column series to connect the top right edge point of the one column to top left edge of next column, so we request to use area series if it accepts your requirements. 
 
Regards, 
Yuvaraj.

Loader.
Up arrow icon