Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Category Axis Label Ticks not visible #100

Closed
benjamin-swain opened this issue Apr 4, 2020 · 4 comments
Closed

Category Axis Label Ticks not visible #100

benjamin-swain opened this issue Apr 4, 2020 · 4 comments

Comments

@benjamin-swain
Copy link

Below you can see that the majorTickLines are not visible for most of x-axis. How do I make all the tick lines appear (even if there is not room to display the label below the tick)?

image

Code:

SfCartesianChart(
              plotAreaBorderWidth: 0,
              borderWidth: 0,
              margin: EdgeInsets.only(left: 0, right: 0, top: 10, bottom: 5),
              zoomPanBehavior: ZoomPanBehavior(
                enablePanning: true,
              ),
                ),
              primaryXAxis: CategoryAxis(
                visibleMaximum: dataContainer['categoriesPlotSeries'].last.dataSource.length <= 7 ? null : 6.5,
                plotOffset: 10,
                isInversed: true,
                edgeLabelPlacement: EdgeLabelPlacement.shift,
                labelIntersectAction: AxisLabelIntersectAction.wrap,
                majorGridLines: MajorGridLines(width: 0),
                labelStyle: ChartTextStyle(color: xLabelColor, fontWeight: FontWeight.w500, fontSize: labelSize),
                axisLine: AxisLine(width: 0),
              ),
              primaryYAxis: NumericAxis(
                minimum: 0,
                maximum: 100,
                interval: 25,
                rangePadding: ChartRangePadding.none,
                axisLine: AxisLine(width: 0),
                majorTickLines: MajorTickLines(size: 0),
                labelStyle: ChartTextStyle(color: yLabelColor, fontWeight: FontWeight.w500, fontSize: labelSize),
                labelPosition: ChartDataLabelPosition.outside,
                majorGridLines: MajorGridLines(color: horizGridColor, width: horizGridWidth),
              ),
              series: dataContainer['categoriesPlotSeries'],
              tooltipBehavior:
                  TooltipBehavior(enable: true, format: 'series.name', header: ''),
            )
@dharanidharandharmasivam
Copy link
Contributor

Hi @opalr ,

Greetings from Syncfusion. We would like to let you know that, the axis range will be calculated based on the data source, axis size in case of the range is not specified. Based on the axis values respective tick lines will be shown. In your case, you can specify the interval of the CategoryAxis as one and we would like to let you know that, by default in the category axis, the labelPlacement will be betweenTicks, you can also specify this to onTicks, so that all the axis labels and ticks will be visible. Find the code snippet below to achieve this scenario and this can be changed based on your requirement.

SfCartesianChart(
        primaryXAxis: CategoryAxis(
          interval: 1,
          labelPlacement: LabelPlacement.onTicks,
        ),
        // Other configuration
      )

The sample for reference can be found below.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/category-751169080

For more information on axis customization, find the user guide form below.
https://help.syncfusion.com/flutter/chart/axis-customization

Thanks,
Dharani

@benjamin-swain
Copy link
Author

benjamin-swain commented Apr 8, 2020

That fixed the label placement, but now the right side of the plot is cut off. Is there a way to add some padding to the right side so you can see the full bar, plus some space before the right edge?

I also hid the tick marks because I think it looks better this way. For some reason the labelIntersectionAction (overlap) started working after this change.

image

@dharanidharandharmasivam
Copy link
Contributor

Hi @opalr ,

Your requirement can be achieved using the rangePadding property of the axis. Here you can specify the rangePadding as additional to achieve your scenario. Find the code snippet below to achieve this

SfCartesianChart(
  primaryXAxis: CategoryAxis(
    rangePadding: ChartRangePadding.additional
  ),
)

Hope this helps.

Thanks,
Dharani.

@jpbigmotive
Copy link

@dharanidharandharmasivam Did you ever get this issue solved?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants