"How to present NaN values on a chart?"

[cheng]

Hello,

 I want to present NaN values on a chart, but I'm having trouble doing so.

The error message says "UnsupportedError (Unsupported operation: Infinity or NaN toInt)".

 I want to express the situation where the machine is disconnected, so it has no value, not even equal to 0. 

The following is the code I tested.

SfCartesianChart(

zoomPanBehavior: ZoomPanBehavior(

enablePinching: true,

zoomMode: ZoomMode.x,

enablePanning: true),

trackballBehavior: TrackballBehavior(

lineType: TrackballLineType.vertical,

enable: true,

activationMode: ActivationMode.singleTap,

tooltipAlignment: ChartAlignment.near,

tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,

),

primaryXAxis: CategoryAxis(

tickPosition: TickPosition.inside,

labelStyle:

CustomTextTheme().getTextTheme(context).overline?.copyWith(

color: ColorTheme.surfaceDisabledEmphasis,

),

),

primaryYAxis: NumericAxis(

opposedPosition: true,

plotBands: [

lowerMaskLine != null

? PlotBand(

verticalTextPadding: '5%',

horizontalTextPadding: '5%',

start: lowerMaskLine,

end: lowerMaskLine! - 999999999999,

color: ColorTheme.error100,

opacity: 0.1,

)

: PlotBand(color: Colors.white, opacity: 0.0),

upperMaskLine != null

? PlotBand(

verticalTextPadding: '5%',

horizontalTextPadding: '5%',

start: upperMaskLine,

end: upperMaskLine! + 999999999999,

color: ColorTheme.error100,

opacity: 0.1,

)

: PlotBand(color: Colors.white, opacity: 0.0),

PlotBand(

start: lowerMaskLine,

end: upperMaskLine,

color: ColorTheme.success100,

opacity: 0.1),

upperMaskLine != null

? PlotBand(

verticalTextPadding: '5%',

horizontalTextPadding: '0%',

start: upperMaskLine,

end: upperMaskLine,

textStyle: CustomTextTheme()

.getTextTheme(context)

.bodyText2

?.copyWith(color: ColorTheme.error500),

borderColor: ColorTheme.error500,

borderWidth: 1.5)

: PlotBand(color: Colors.white, opacity: 0.0),

lowerMaskLine != null

? PlotBand(

verticalTextPadding: '-5%',

horizontalTextPadding: '0%',

start: lowerMaskLine,

end: lowerMaskLine,

verticalTextAlignment: TextAnchor.start,

textStyle: CustomTextTheme()

.getTextTheme(context)

.bodyText2

?.copyWith(color: ColorTheme.error500),

borderColor: ColorTheme.error500,

borderWidth: 1.5)

: PlotBand(color: Colors.white, opacity: 0.0),

],

labelStyle:

CustomTextTheme().getTextTheme(context).overline?.copyWith(

color: ColorTheme.surfaceDisabledEmphasis,

),

tickPosition: TickPosition.inside,

),

series: <ColumnSeries>[

ColumnSeries<ChartData, String>(

dataSource: [

ChartData('0', 6.0),

ChartData('1', 2.3),

ChartData('2', 5.3),

ChartData('3', 3.2),

ChartData('4', 3.5),

ChartData('5', 9.3),

ChartData('6', double.nan),

],

xValueMapper: (datum, index) => datum.x,

yValueMapper: (datum, index) => datum.y),

],

),

class ChartData {

ChartData(this.x, this.y);

final String x;

final double? y;

}

[Lokesh Palani]

Hi Cheng,

We have checked your code snippet and found that double.nan or infinity does not support charts. To meet your requirement, you can add null in the datapoints. We have made the necessary modifications to your code snippet according to your specifications, and we have shared it below. Please inform us if you require any additional assistance.

Code snippet:

series: <ColumnSeries>[

              ColumnSeries<ChartData, String>(

                  dataSource: [

                    ChartData('0', 6.0),

                    ChartData('1', 2.3),

                    ChartData('2', 5.3),

                    ChartData('3', 3.2),

                    ChartData('4', 3.5),

                    ChartData('5', 9.3),

                    ChartData('6', null),

                  ],

                  xValueMapper: (datum, index) => datum.x,

                  yValueMapper: (datum, index) => datum.y),

            ],

Regards,

Lokesh.