Column chart with same date and different items (Example shown below)

[VP]

Hi,

I am unable to figure out which column chart to use with same date and different entry on x axis as shown in example below:

I tried few charts but it is consolidating the same date into a single line but I expect it to be unique entry as shown below:

Please help.

-VP

[Dharanidharan Dharmasivam]

Hi VP, 

 

Thanks for your interest in the Syncfusion Chart widget. We have analyzed your query, in the datetime axis if you specify the same date, and since datetime axis is linear, it will be rendered by consolidating the given data. 

However, your requirement can be achieved using the category axis. Here you can give the same data for the x-axis and specify arrangeByIndex property of the category axis to true. So that all the data will be visible based on your expectations. Find the code snippet below to achieve this. 

 

 

SfCartesianChart( 

            primaryXAxis: CategoryAxis( 

              arrangeByIndex: true 

            ), 

), 

 

 

Screenshot: 

 

 

In the above screenshot, first three data points are same, and all have rendered. 

 

The sample for reference can be found below. 

https://www.syncfusion.com/downloads/support/forum/150724/ze/sample-1606422833  

 

Hope this helps. 

 

Thanks, 

Dharani. 

[Dharanidharan Dharmasivam]

Hi VP, 

 

Kindly find the screenshot for the below sample. 

 

 

Thanks, 

Dharani. 

[VP]

Thanks for the quick response and sharing sample. I was able to get the unique bar for same date with different value but I am still not able to put a different (or same symbol) on top of bar. It is showing the value only as of now. If I have 20-30 data entries, then I am wondering if this would still look good and if the bar size will get squeezed and only clicking on the bar would show the label name and value.

Thanks again.

-VP

[VP]

Moreover, plz check the x-axis and the tooltip data. It seems x axis is not completed aligned with data and has to be shifted left by one column.

Plz check the pic below for example:

[Dharanidharan Dharmasivam]

Hi VP, 

  

     We have gone through your queries and you can achieve the solution by the following code snippets. 

  

     1.  How to set different or same values above the column? 

            

           You can give customized texts above the column using the dataLabelMapper property. 

  

  

SfCartesianChart( 

         series: ColumnSeries<OrdinalSales, String>( 

         dataSource: [OrdinalSales('2020-1-14', 32, 'First') ], 

        dataLabelMapper: (OrdinalSales sales, _) => sales.text, 

      ) 

    ) 

  

class OrdinalSales { 

  OrdinalSales(this.year, this.bar1, [this.text]); 

  final String year; 

  final num bar1; 

  final String text; 

} 

  

  

      2.  How to achieve that clicking on the bar would show the label name and value? 

             

            By default, header and marker will be displayed for cartesian types series. IF you wish to show only x and y labels, then set canShowMarker property of tooltipBehavior as false to hide marker in the tooltip and set  empty string to the header property to hide the header.  

  

  For more information on the tooltip, click here. 

          

  

SfCartesianChart( 

       tooltipBehavior: TooltipBehavior( 

          // To hide the marker 

          canShowMarker: false, 

         //To hide the header 

             header: ' ' 

     ) 

  ) 

  

  

  

  

     3.  How to rotate axis labels with proper alignment? 

    

            Specify the angle to labelRotation property of the axis to rotate the axis labels as below. 

  

         

  

SfCartesianChart( 

       primaryXAxis: CategoryAxis( 

        labelRotation:  -45 

     ), 

  ) 

  

  

  

      4.  How to rotate the data label angle as you need? 

           

                Specify the angle as depicted below to rotate the data labels. 

  

        

  

SfCartesianChart( 

     dataLabelSettings: DataLabelSettings( 

      isVisible: true, 

      angle: 270, 

     ), 

  ) 

  

Find the sample for above scenarios from below. 

https://www.syncfusion.com/downloads/support/forum/150724/ze/forum_150724-954441057  

 

Thanks, 

Dharani. 

[VP]

Thanks Dharini for quick reply.

I was able to get the label and also adjusted the interval and angle for date for proper alignment. However, labels towards the end are somehow getting placed on top of wrong bar, getting misaligned and also not shown in few cases as shown in example below :

I am not sure if showing grid is causing this issue or something else.

I am also wondering if this is the correct choice of graph to use in such situations where I could have 40-60 entries within a month and number of data entries is a variable.

-VP

[Dharanidharan Dharmasivam]

Hi VP, 

Thanks for revert. We would like to let you know that, when the data labels got intersect, then we will hide the data label. That is why some of the data labels might not have rendered. And if the data label goes out of the plot area, we have moved the data labels inside the plot area. As of now, we are having an issue with this and this has been fixed which is under testing phase. This issue fix will be available for vol 4 sp1 release which is expected to be out at the end of January 2020.  

Also, if there are number of data you can use a line or spline series type chart. For more information on the available chart types, find the user guide below. Based on your requirement you can prefer any the chart types. 

https://help.syncfusion.com/flutter/chart/cartesian-chart-types  

Hope this helps. 

Thanks, 

Dharani. 

[Dharanidharan Dharmasivam]

Hi VP, 

 

Thanks for being patience. The issue regarding the data label positioning has been fixed and the release (v17.4.46) has been rolled out with the above fix. Kindly upgrade your chart widget package from below to resolve the issue. 

 

https://pub.dev/packages/syncfusion_flutter_charts/versions/17.4.46  

Thanks 

Dharani.