We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150724 Jan 17,2020 06:18 AM UTC Feb 3,2020 10:23 AM UTC Flutter 8
loading
Tags: SfCartesianChart
VP
Asked On January 17, 2020 06:18 AM UTC

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 [Syncfusion]
Replied On January 20, 2020 07:12 AM UTC

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. 
 
Hope this helps. 
 
Thanks, 
Dharani. 


Dharanidharan Dharmasivam [Syncfusion]
Replied On January 20, 2020 07:22 AM UTC

Hi VP, 
 
Kindly find the screenshot for the below sample. 
 
 
Thanks, 
Dharani. 


VP
Replied On January 20, 2020 10:46 PM UTC

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
Replied On January 20, 2020 11:34 PM UTC

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 [Syncfusion]
Replied On January 21, 2020 06:15 PM UTC

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. 
 
Thanks, 
Dharani. 


VP
Replied On January 21, 2020 11:39 PM UTC

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 [Syncfusion]
Replied On January 22, 2020 05:51 PM UTC

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. 
Hope this helps. 

Thanks, 
Dharani. 


Dharanidharan Dharmasivam [Syncfusion]
Replied On February 3, 2020 10:23 AM UTC

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. 
 

Thanks 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon