Customization Line chart (SfCartesianChart)

[Nick141620]

Currently Graph display like this.

i have achived like this

How to display graph like this the y axis value display in top of the line and when xaxis in 0 value at that time draw line other line is dashed

`Widget viewGraph( BuildContext context, List market, List nasMarket, List spMarket, Color color, Color nasColor, Color spColor, bool isIndividual, String duration, {bool isSingle = false, bool isFromDetail = false, bool isCrypto = false, bool isHideYAxis = true}) { var minimumValue = findMinimumTotalAmount(isIndividual ? market.isNotEmptyOrNull ? market : spMarket.isNotEmptyOrNull ? spMarket : nasMarket : nasMarket);

var maximumValue = findMaximumTotalAmount(isIndividual ? market.isNotEmptyOrNull ? market : spMarket.isNotEmptyOrNull ? spMarket : nasMarket : nasMarket);

if (!isCrypto && duration == "1D") { if (market.isNotEmptyOrNull) { market.addAll(generateDataWithInterval(market)); } if (nasMarket.isNotEmptyOrNull) { nasMarket.addAll(generateDataWithInterval(nasMarket)); } if (spMarket.isNotEmptyOrNull) { spMarket.addAll(generateDataWithInterval(spMarket)); } } if (isIndividual == false) { if (market.length < 1 && nasMarket.length < 1 && spMarket.length < 1) { isFromDetail = true; isHideYAxis = false; } else { isHideYAxis = true; } } else { if (market.length < 1 && nasMarket.length < 1 && spMarket.length < 1) { isFromDetail = true; isHideYAxis = false; } else { isHideYAxis = true; } }

return Container( height: Dim.dim_250.h, width: MediaQuery.of(context).size.width - Dim.dim_80.w, //width: MediaQuery.of(context).size.width - Dim.dim_20.w, child: SfCartesianChart( crosshairBehavior: CrosshairBehavior( enable: true, activationMode: ActivationMode.singleTap, lineDashArray: [2, 2], ), tooltipBehavior: TooltipBehavior( enable: false, ), trackballBehavior: TrackballBehavior( enable: false, tooltipDisplayMode: isIndividual ? TrackballDisplayMode.floatAllPoints : TrackballDisplayMode.groupAllPoints, lineDashArray: [2, 2], ), zoomPanBehavior: ZoomPanBehavior( enablePanning: true, ), primaryXAxis: CategoryAxis(

//  autoScrollingDeltaType: DateTimeIntervalType.hours,
// maximumLabels: 100,
//  labelStyle: !isIndividual?TextStyle(color: Colors.transparent):null,

isVisible: isFromDetail ? false : true,
autoScrollingMode: AutoScrollingMode.start,
//  labelIntersectAction: AxisLabelIntersectAction.trim,
// autoScrollingDelta: 120,
isInversed: isSingle,
majorTickLines: MajorTickLines(width: 0),
axisLine: AxisLine(color: kDividerColor, dashArray: <double>[2, 2]),
// interval: 8,
// interval: duration=="5D" || duration=="1D"?5:null,

// interval: duration == "1D" ? duration == "5D" ? duration == "1M" : 1: 8: 24,
// (foo==1)? something1():(foo==2)? something2(): something3();
interval: (duration == "1D")
    ? 12
    : (duration == "5D")
        ? 8
        : (duration == "1M")
            ? 5
            : (duration == "6M" || duration == "1Y")
                ? 30
                : null,
majorGridLines: MajorGridLines(
  width: 1,
  dashArray: <double>[2, 2],
  color: Colors.transparent,
),
axisLabelFormatter: (AxisLabelRenderDetails args) {
  late String text;
  late TextStyle textStyle = TextStyle();
  text = duration == "5D" || duration == "1D"
      ? args.text.length > 13
          ? xStyle(duration, args.text)
          : ""
      : args.text.length > 8
          ? xStyle(duration, args.text)
          : "";
  return ChartAxisLabel(text, textStyle);
}),

plotAreaBorderWidth: 0, primaryYAxis: NumericAxis( numberFormat: NumberFormat.decimalPattern(), minimum: (isSingle || isIndividual) ? minimumValue == null ? null : (minimumValue ?? 0).toDouble() : null, maximum: (isSingle || isIndividual) ? maximumValue == null ? null : (maximumValue ?? 0).toDouble() : null, isVisible: isHideYAxis, opposedPosition: isSingle, labelFormat: isIndividual ? '\${value}' : '{value}%', // labelStyle: !isIndividual?TextStyle(color: Colors.transparent):null, // desiredIntervals: 3, // interval: duration=="5D" || duration=="1D"?5:null, decimalPlaces: isIndividual ? 1 : 1, axisLine: AxisLine(color: Colors.transparent, dashArray: [5, 5]), majorTickLines: MajorTickLines(width: 0), majorGridLines: MajorGridLines( width: 1, dashArray: [2, 2], color: kDividerColor, )), series: isIndividual ? individual( market.isNotEmpty ? market : spMarket.isNotEmpty ? spMarket : nasMarket, market.isNotEmpty ? color : spMarket.isNotEmpty ? spColor : nasColor, isFromDetail) : performance( market, nasMarket, spMarket, color, nasColor, spColor)), ); } List performance( List dowMarket, List spyMarket, List nasMarket, Color dowColor, Color spyColor, Color nasColor) { List series = [];

series.add( SplineSeries<MarketData, String>( animationDuration: 0, dataSource: dowMarket, color: dowColor, // emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.drop), xValueMapper: (MarketData data, ) { return data.date!; }, yValueMapper: (MarketData data, ) => data.percentageChange == 12434443355555 ? null : data.percentageChange), );

series.add( SplineSeries<MarketData, String>( animationDuration: 0, dataSource: nasMarket, color: nasColor, // emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.drop), xValueMapper: (MarketData data, ) { return data.date!; }, yValueMapper: (MarketData data, ) => data.percentageChange == 12434443355555 ? null : data.percentageChange), );

series.add( SplineSeries<MarketData, String>( animationDuration: 0, dataSource: spyMarket, color: spyColor, xValueMapper: (MarketData data, ) { return data.date!; }, yValueMapper: (MarketData data, ) => data.percentageChange == 12434443355555 ? null : data.percentageChange), );

return series; }`

Please help we are stuck long time. is it possible

[PreethikaSelvam]

Hi @Nick141620,

Query 1: Need to display the y axis label at the top of the axis line.

To meet your requirement, we recommend using the labelPosition property as "inside" and the labelAlignment property as "end" in the primaryYAxis. However, the edge axis labels are displayed based on the minimum and maximum values of the data points, so according to this case, the start and end axis label of the y-axis will hide. To address this case, we have already logged a new feature request for it in our feedback portal. You can also track the status of the feature with the feedback below.

FR Link: Provide support to enable or disable the axis edge labels

Query 2: When x axis in 0 value at that time draw line other line is dashed.

Currently, we do not have support to customize the individual axis gridlines. However, we have already considered your requirement as a new feature and logged a feature request for it in our feedback portal. You can also track the status of the feature with the feedback below.

FR Link: Provide support to customize the individual axis gridlines

We will prioritize the features of every release based on demand and priority. So, these both features will be available in any of our upcoming releases.

Regards,

Preethika Selvam.