[Web][Html]: Blurry in RotatedBox

[OnesWYong]

When RotatedBox is used in combination with SfCartesianChart, the chart is blurred in html rendering mode. Replacing canvaskit can solve this problem. is there any other way

In the latest flutter version, the problem still exists.

Flutter version：

Flutter 2.10.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5464c5bac7 (3 months ago) • 2022-04-18 09:55:37 -0700
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: RotatedBox(
          quarterTurns: 1,
          child: ColoredBox(
            color: Colors.cyan[50],
            child: Column(
              children: [
                SizedBox(height: 20),
                Expanded(
                  child: SfCartesianChart(
                    plotAreaBorderWidth: 0,
                    title: ChartTitle(text: 'Age distribution by country'),
                    /// To specify the selection mode for chart.
                    selectionType: _mode,
                    selectionGesture: ActivationMode.singleTap,
                    enableMultiSelection: _enableMultiSelect,
                    primaryXAxis: CategoryAxis(
                        title: AxisTitle(text: 'Countries'),
                        majorGridLines: const MajorGridLines(width: 0),
                        edgeLabelPlacement: EdgeLabelPlacement.shift),
                    primaryYAxis: NumericAxis(
                        axisLine: const AxisLine(width: 0),
                        majorTickLines: const MajorTickLines(size: 0)),
                    series: _getDefaultSelectionSeries(),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

[Yuvaraj-Gajaraj]

Hi @OnesWYong,

Greetings from Syncfusion. We have checked the code snippet and tried to reproduce the reported issue and found that you are using the RotatedBox to rotate the chart, the chart gets blurred when the rotated box quarter turns value is 1 and 3 renders correctly in the quarter turns value 2 and 0. So, we have looked into this as of now, we suggest you use the isTransposed property in the chart it will help you to rotate the chart. We have also attached the UG link below for your reference.

UG: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#transpose-the-series

Regards, Yuvaraj.

[lyf571321556]

same issue 😁

[OnesWYong]

Hi @OnesWYong,

Greetings from Syncfusion. We have checked the code snippet and tried to reproduce the reported issue and found that you are using the RotatedBox to rotate the chart, the chart gets blurred when the rotated box quarter turns value is 1 and 3 renders correctly in the quarter turns value 2 and 0. So, we have looked into this as of now, we suggest you use the isTransposed property in the chart it will help you to rotate the chart. We have also attached the UG link below for your reference.

UG: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#transpose-the-series

Regards, Yuvaraj.

Can I fix this by modifying the component code. I've noticed that RepaintBoundary causes blurring. Are there other reasons for blurring?

[OnesWYong]

Hi @OnesWYong,

Greetings from Syncfusion. We have checked the code snippet and tried to reproduce the reported issue and found that you are using the RotatedBox to rotate the chart, the chart gets blurred when the rotated box quarter turns value is 1 and 3 renders correctly in the quarter turns value 2 and 0. So, we have looked into this as of now, we suggest you use the isTransposed property in the chart it will help you to rotate the chart. We have also attached the UG link below for your reference.

UG: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#transpose-the-series

Regards, Yuvaraj.

@Yuvaraj-Gajaraj thank you very much. I tried to use isTransposed and set the labelRotation to 90, the text spacing is too large, is there any way to solve it?

[natrayansf]

Hi @OnesWYong,

Greetings from Syncfusion,

We have validated your query and you can achieve your requirement of ‘reducing the space between the axis line and axis label’ by setting the axis tick line size to 0. Please refer to the code snippet.

SfCartesianChart (
                primaryXAxis: CategoryAxis(
                     majorTickLines: MajorTickLines (size: 0),
                )
)

For more details, please refer to the following user guide. UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#tick-lines-customization

Screenshot:

Please check with the above solution and get back to us if you need further assistance.

Regards, Natrayan.