1. Home
  2. Forum
  3. Flutter
  4. Area Chart

Area Chart

1) On the area chart is there a way to change the direction of the gradient? Mine is going horizontally rather than vertically.

2) I don't want to show a zero value on my y-axis. Is there a way to omit this?

3) The values on the y-axis don't spread the full axis; instead they stop about 3/4 of the way up. My desired outcome is to evenly spread the values, with a y-value (slightly greater than the highest y-value in my data set) placed at the very top of the chart. How do I execute this?
                         --- I fixed this issue for #3, no need for this one, I still need solutions for #1 and #2---

4) For this one please refer to the screenshot (one that you posted) https://www.syncfusion.com/forums/154846/how-to-disable-a-trackball-for-a-specific-series
          Now with this chart my y-axis has opposedPosition set to true, so I actually like that the graphed data points and area doesn't come all the way over to touch the axis (gives it a cleaner look). On the opposite side, however, I would like the graphed data points and area to reach all the way over. Right now, it looks as if there is a padding on the inside of the chart to the left and right. I only want it to the left. Is there a way to accomplish this?


5) Please refer to the screenshot below. I want to be able to replicate the volume bars at the bottom of my current area chart and show them at the same scale in the same position. For further information: when price was at 383.52 volume was at 359,050 

5 Replies 1 reply marked as answer
AR Arun Raji Syncfusion Team July 14, 2020 08:24 AM UTC

Hi Yannic, 
 
We have analyzed all your queries and given the responses below. 
 
1. On the area chart is there a way to change the direction of the gradient? Mine is going horizontally rather than vertically. 
 
Yes, we can change the gradient directions like horizontal and vertical. It can be achieved by using begin and end alignments of linear gradients or to apply the transform of linear gradients. Please refer the below code snippet and GitHub link of horizontal and vertical gradients for area chart. 
 
Code snippet -  
final List<Color> color = <Color>[]; 
color.add(Colors.blue[50]); 
color.add(Colors.blue[200]); 
color.add(Colors.blue); 
 
final List<double> stops = <double>[]; 
stops.add(0.0); 
stops.add(0.5); 
stops.add(1.0); 
 
final LinearGradient gradients =  // Now, you can apply this to gradient API in area series 
  LinearGradient( 
    colors: color, stops: stops, 
    transform: GradientRotation(90.toDouble() * 3.14 / 270) 
    // begin: Alignment.bottomCenter, end: Alignment.topCenter 
  ); 
 
 
 
2. I don't want to show a zero value on my y-axis. Is there a way to omit this? 

Yes, we can omit the zero value on y-axis by two ways. One is if you have set the minimum value of primaryYAxis is 1, then the axis start from 1. Another way is to omit the zero value by using dataLabelRender event, you can replace the empty string for zero value. Please refer the below code snippet and UG link, it will be more helpful to understand this.  

Code snippet -  
void axisLabelRenderEvent(AxisLabelRenderArgs args) { 
  if (args.orientation == AxisOrientation.vertical) { 
    if (args.value == 0) 
      args.text = ' '; 
  } 
} 
OR Use this below –  
primaryYAxis: NumericAxis(minimum: 1) 


3. The values on the y-axis don't spread the full axis; instead they stop about 3/4 of the way up. My desired outcome is to evenly spread the values, with a y-value (slightly greater than the highest y-value in my data set) placed at the very top of the chart. How do I execute this? 

In this query, we can customized the y-axis value depends on data points by using rangePadding API in primaryYAxis. In this API we can achieve more options for y axis like round, normal, auto etc., These are all applicable in ChartRangePadding as enum. Please refer the below code snippet and UG link to know more information about this. 

Code snippet -  
primaryYAxis: NumericAxis( 
rangePadding: ChartRangePadding.auto 
), 
 

4. Now with this chart my y-axis has opposedPosition set to true, so I actually like that the graphed data points and area doesn't come all the way over to touch the axis (gives it a cleaner look). On the opposite side, however, I would like the graphed data points and area to reach all the way over. Right now, it looks as if there is a padding on the inside of the chart to the left and right. I only want it to the left. Is there a way to accomplish this? 

Here, we can achieve the above scenario by using multiple axes concept. Please find the below code snippet to meet your scenario. In this snippet we have add a column series with another y axis and same x axis for both series. Let us know if you any concern on this. Please refer the multiple axes concept to achieve this scenario, the sample link given below. 
 
Code snippet –  
child: SfCartesianChart( 
    axes: <ChartAxis>[ 
      NumericAxis( 
        minimum: 0, 
        maximum: 50, 
        name: 'yAxis1', 
        majorGridLines: MajorGridLines(color: Colors.transparent), 
        opposedPosition: true, 
        labelStyle: const TextStyle(color: Colors.black), 
        title: AxisTitle( 
            text: 'Secondary Y Axis', 
            textStyle: const TextStyle(color: Colors.black))) 
    ], 
    primaryXAxis: DateTimeAxis( 
        name: 'xAxis1', isInversed: true), 
    primaryYAxis: NumericAxis(rangePadding: ChartRangePadding.auto), 
    zoomPanBehavior: 
        ZoomPanBehavior(enablePanning: true, enablePinching: true), 
    enableSideBySideSeriesPlacement: false, 
    series: <ChartSeries<SalesData, DateTime>>[ 
      AreaSeries<SalesData, DateTime>( 
        dataSource: <SalesData>[ 
          SalesData(DateTime(2019, 6, 16), 12), 
          SalesData(DateTime(2019, 6, 17), 11), 
          SalesData(DateTime(2019, 6, 18), 24), 
          SalesData(DateTime(2019, 6, 19), 23), 
          SalesData(DateTime(2019, 6, 20), 14), 
          SalesData(DateTime(2019, 6, 21), 15), 
        ], 
        animationDuration: 0, 
        xValueMapper: (SalesData sales, _) => sales.year, 
        yValueMapper: (SalesData sales, _) => sales.sales, 
      ), 
      ColumnSeries<SalesData, DateTime>( 
        xAxisName: 'xAxis1', 
        yAxisName: 'yAxis1', 
        dataSource: <SalesData>[ 
          SalesData(DateTime(2019, 6, 16), 6), 
          SalesData(DateTime(2019, 6, 17), 4), 
          SalesData(DateTime(2019, 6, 18), 8), 
          SalesData(DateTime(2019, 6, 19), 5), 
          SalesData(DateTime(2019, 6, 20), 9), 
          SalesData(DateTime(2019, 6, 21), 3), 
        ], 
        animationDuration: 0, 
        xValueMapper: (SalesData sales, _) => sales.year, 
        yValueMapper: (SalesData sales, _) => sales.sales, 
      ), 
    ]), 
 
 
5. Please refer to the screenshot below. I want to be able to replicate the volume bars at the bottom of my current area chart and show them at the same scale in the same position. For further information: when price was at 383.52 volume was at 359,050  
 
Currently the reported scenario is not applicable in our chart. We will consider this as improvement from our side and we will let you know once the improvement has done at our side. Until then you can refer the below feedback link to get more information about this scenario. You can put a comment on this if you have any concern.  
 

Let us know If you have any other concern. 

Thanks, 
Arun  


Marked as answer
YF Yannic Francis July 14, 2020 06:01 PM UTC

Thanks Arun, for your response and your help!

1) With some minor tweaks to the code you provided, I was able to get my desired outcome (changed transform: GradientRotation(90.toDouble() * 3.14 / 270) to transform: GradientRotation(540.toDouble() * 3.14 / 270))

2) I misstated my desired outcome here. I don't necessarily want to omit '0' exclusively. I want to omit the bottom-most number from the y-axis while still showing the rest of the values on the y-axis so it can look like:


rather than:
(here, if I could display this same chart without showing '200mm' this would be ideal. The '200mm' and '1925' look crowded)

3) I've already fixed this issue, thank you!

4) With the code you provided my problem still persisted. The actual plotted chart appears to have padding to the left and right; I only want padding to the right (to give some space between the plotted area chart and values on the opposedPosition: true, y-axis)
             
                                      Undesired:                                                                                                            Desired:
                      
(please note that my y-axis would be on the opposite side in this example chart)

5) Thank you! Please let me know when you have added this feature!

SK Sriram Kiran Senthilkumar Syncfusion Team July 15, 2020 03:22 PM UTC

Hi Yannic, 
 
We have analyzed all your queries and provided the responses below. 
  
For Query #1 (Regarding gradient rotation): 
Thanks for the revert. We are happy to hear that desired output is obtained at your end. 
  
For Query #2 (To omit the bottom-most number from the y-axis while still showing the rest of the values on the y-axis): 
In order to omit the bottom-most number from the y-axis while still showing the rest of the values on the y-axis as shown in the provided screenshot, you can use the axisLabelRender event itself to achieve it. Please refer the code snippet below to achieve the requested scenario. 
bool isFirstLabel; 
 
@override 
Widget build(BuildContext context) { 
  isFirstLabel = true; 
  return Scaffold( 
      body: SfCartesianChart( 
        onAxisLabelRender: (AxisLabelRenderArgs args) { 
                if (args.axisName == 'primaryYAxis'  &&  isFirstLabel) { 
 
                  args.text = ' '; 
                  isFirstLabel = false; 
 
                } 
         }, 
         // Your configurations 
      ) 
    );  
 } 
 
 
We have also attached example sample below for your reference, 
  
Please check the sample and revert us if you still have concerns. 
  
For Query #3 (Regarding chart range padding issue): 
Most welcome. 
  
For Query #4 (To add padding only in the right side of the chart): 
We would like to share some information about padding behaviour in our chart widget. The padding that appears in the chart always applies to both the left and right side of the chart. It cannot be applied specifically to one side in the chart. Currently, this is the default behaviour and we are sorry of the inconvenience. 
  
For Query #5: 
As we have already planned the road map for our Vol 3 Main release, we cannot provide the exact timeline of when the reported feature will be released. We are sorry our inconvenience. 
As mentioned earlier, you can track feature request from below feedback link. 
  
Please get in touch with us if you require further assistance. 
  
Regards, 
Sriram Kiran 


YF Yannic Francis July 15, 2020 11:04 PM UTC

I've replied to your other posting, but thanks again Sriram! It worked for me. #4 no worries! #5 Got it, no pressure. I'll be on the lookout for it. I think it would be a nice feature to have for users that will use Syncfusion's charts for stock market price/volume displaying. 

SK Sriram Kiran Senthilkumar Syncfusion Team July 16, 2020 12:54 PM UTC

Hi Yannic, 

Thanks for the revert. We will consider your suggestion and plan to implement the requested feature sooner. 

Regards, 
Sriram Kiran 


Loader.
Up arrow icon