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. Image for the cookie policy date

Get the correct offset

Hi,

I'm using candleseries, the primaryYAxis opposedPosition is true.

If offset x=0 is the left side of the graph, how can I determine the end offset x = ? (right side of the graph).


3 Replies 1 reply marked as answer

AJ Anshul Jain February 7, 2023 08:04 AM UTC

The end offset x can be determined by the size of your data set and the width of your graph. You can calculate it as follows:


x = (number of data points - 1) * (width of one data point)


Keep in mind that the width of one data point may depend on the zoom level or other display options you have set for your graph.



BI Bar Ilan February 7, 2023 03:49 PM UTC

How to calculate the width of data point?



LA Lavanya Anaimuthu Syncfusion Team February 8, 2023 11:57 AM UTC

Hi Bar Ilan,


Your requirement can be achieved with the help of the onActualRangeChanged and onRendererCreated callbacks, which are available in the chart and chart series, respectively. Get the corresponding series controller details in the chart series onRendererCreated callback and find the offset of the x axis minimum and maximum values by converting the axis visible range minimum and maximum values to pixel points using the ChartSeriesController in the onActualRangeChanged callback. Please refer to the following code snippet.



child: SfCartesianChart(

              onActualRangeChanged: (args) {

                if (args.orientation == AxisOrientation.horizontal) {

                  // You can get the x axis maximum value pixel point here. This is the x axis right side pixel value. So, opposed y-axis started from this position.

                  double visibleMax = seriesController

                      .pointToPixel(CartesianChartPoint(args.visibleMax, 0))

                      .dx;

                  // You can get the x axis minimum value pixel point here.

                  double visibleMin = seriesController

                      .pointToPixel(CartesianChartPoint(args.visibleMin, 0))

                      .dx;

                  // You can get the x axis width here.

                  double xAxisWidth = visibleMax - visibleMin;

                }

              },

              series: <ChartSeries<_SalesData, double>>[

                LineSeries<_SalesData, double>(

                  dataSource: data,

                  xValueMapper: (_SalesData sales, _) => sales.sales,

                  yValueMapper: (_SalesData sales, _) => sales.size,

                  onRendererCreated: (controller) {

                    seriesController = controller;

                  },

                )

              ],

              ….

            )


We have attached a sample for your reference.


Regards,

Lavanya A.


Attachment: f180390_b3555e7b.zip

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon