How to rotate label and justify to axis?

My SFCartesianChart labels are specified by the user and can be long, so I'd like to rotate the labels inside the bars. This works great when the chart is transposed, but when not transposed, the only way I see to rotate the text is with labelRotation at 90 or 270, which gives the result below. 


Below is my code for the bottom chart. Is there a way to rotate the label and keep it tight to the axis? I experimented with the properties labelAlignment, placeLabelsNearAxis, and others, but they weren't doing what I needed?

SfCartesianChart(
      plotAreaBorderWidth: 0,
      title: ChartTitle(text: 'Land area of various cities (sq.km)'),
      primaryXAxis: CategoryAxis(
        labelStyle: const TextStyle(color: Colors.black),
        axisLine: AxisLine(width: 0),
        labelPosition: ChartDataLabelPosition.inside,
        majorTickLines: MajorTickLines(width: 0),
        majorGridLines: MajorGridLines(width: 0),
        labelRotation: 270,
        placeLabelsNearAxisLine: false,
      ),
      palette: const [
        Colors.orange,
      ],
      primaryYAxis: NumericAxis(isVisible: false, minimum: 0, maximum: 9000),
      series: _getRoundedColumnSeries(),
      isTransposed: false,
      tooltipBehavior:
          TooltipBehavior(enable: true, canShowMarker: false, format: 'point.x : point.y sq.km', header: ''),
    )

EDIT
After posting, it occurs to me the above behavior is ideal for labelPosition: ChartDataLabelPosition.outside and that using .inside is incompatible with labelRotation?


4 Replies

SK Sriram Kiran Senthilkumar Syncfusion Team December 7, 2020 12:39 PM UTC

Hi Richard, 
  
Greetings from Syncfusion. We have analyzed your scenario with the provided information at our end and, we would like to share some information regarding the axis label rendering behaviour in our chart widget. Currently, the axis labels width is calculated based on the maximum label width of all available axis labels of an axis. For example, in your case, as the “New York is a nice place” label has the larger width of all axis labels and, thus the chart renders all the axis labels with the largest axis label width. Due to this only the axis labels are not placed closely near the axis line as they are rendered in larger width. This is the default behaviour. However, currently, we are working on a new feature related to this regarding providing support to set a maximum width for the axis labels in the chart and, we highly think that this feature will be helpful in your cases. We have already logged a feature request regarding this in our feedback portal. We have planned to include this feature in our upcoming Vol 4 main release which is expected to be rolled out by the end of this month. We will update you once the release gets rolled out and we appreciate your patience until then. Also, you can track the status of the feature using the below feedback link. 

Please get in touch with us if you still have further concerns on this. 
  
Regards, 
Sriram Kiran 



RC Richard Coutts December 7, 2020 03:30 PM UTC

Perfect. Thank you!!


SK Sriram Kiran Senthilkumar Syncfusion Team December 8, 2020 10:25 AM UTC

Hi Richard, 
  
Most welcome. As mentioned earlier, we will update you here once the release gets rolled out and we appreciate your patience until then. 
  
Regards, 
Sriram Kiran 



SK Sriram Kiran Senthilkumar Syncfusion Team December 21, 2020 10:59 AM UTC

Hi Richard, 
  
Thanks for your patience. The feature regarding providing support to set a maximum width for the axis labels in the chart is now rolled out in our vol 4 main release. Using this feature, you can be able to control the maximum axis label width and the space occupied by the axis labels. To use this feature, kindly upgrade the chart widget package to the latest version below. 
 
Also, to mention that, when the axis labels are rotated using label rotation feature, there are some scenarios or cases where you cannot control the axis label’s width and occupied space and we are already working on resolving those issues at our end, and these improvements will be available in any of our upcoming releases. We appreciate your patience until then. 
Please get in touch with if you would require further assistance. 
  
Regards, 
Sriram Kiran 


Loader.
Up arrow icon