[RadChart] After the app is resumed the series styling is not applied on iOS

[mhtghn]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Tell us about the problem

When displaying a chart and styling it using Palettes, it will style it correctly but as soon as the app goes suspended for a few time and is resumed the styling is not applied and the chart is displayed using default colors (as if there were no styling at all).

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI plugin version: "nativescript-ui-chart": "^7.0.0"
• CLI: 6.3.3
• Cross-platform modules: 6.3.0
• Runtime(s): "tns-ios": { "version": "6.3.0" }

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application that displays a chart styled (I'm using the Palettes styling, not sure about the others ways of styling) on iOS
2. The chart will display with the correct style
3. Press the Home button and wait for like 2 minutes (maybe less maybe more, 2 minutes in my case)
4. Resume the application
5. The chart style are the default ones

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

HTML

<RadCartesianChart tkExampleTitle tkToggleNavButton class="chart-content">
  <RadCartesianChartGrid tkCartesianGrid horizontalLinesVisible="true" verticalLinesVisible="false" horizontalStripLinesVisible="false" verticalStripLinesVisible="false">
  </RadCartesianChartGrid>
  <CategoricalAxis tkCartesianHorizontalAxis allowZoom="true" id="hAxis"  labelFitMode="Multiline" lineHidden="true">
  </CategoricalAxis>
  <LinearAxis tkCartesianVerticalAxis id="vAxis" lineHidden="true">
  </LinearAxis>
  <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true" (trackBallContentRequested)="onTrackBallContentRequested($event)">
  </Trackball>
  <BarSeries tkCartesianSeries seriesName="FirstSeries" paletteMode="Item" [items]="chartArray" categoryProperty="date" valueProperty="value">
  </BarSeries>
                            <Palette tkCartesianPalette seriesName="FirstSeries">
                                <PaletteEntry tkCartesianPaletteEntry strokeColor="#f37d3f" fillColor="#f37d3f"></PaletteEntry>
                                <PaletteEntry tkCartesianPaletteEntry strokeColor="#f37d3f" fillColor="#f37d3f"></PaletteEntry>
                                <PaletteEntry tkCartesianPaletteEntry strokeColor="#f37d3f" fillColor="#f37d3f"></PaletteEntry>
                                <PaletteEntry tkCartesianPaletteEntry strokeColor="#f37d3f" fillColor="#f37d3f"></PaletteEntry>
                                <PaletteEntry tkCartesianPaletteEntry strokeColor="#f37d3f" fillColor="#f37d3f"></PaletteEntry>
                                <PaletteEntry tkCartesianPaletteEntry strokeColor="#f37d3f" fillColor="#f37d3f"></PaletteEntry>
                                <PaletteEntry tkCartesianPaletteEntry strokeColor="#ea40aa" fillColor="#ea40aa"></PaletteEntry>
                            </Palette>
  <LineSeries tkCartesianSeries seriesName="SecondSeries" [items]="avgCons" categoryProperty="date" valueProperty="value">
  </LineSeries>
                            <Palette tkCartesianPalette seriesName="SecondSeries">
                                <PaletteEntry tkCartesianPaletteEntry strokeColor="#FFCF40"></PaletteEntry>
                            </Palette>
</RadCartesianChart>

[cjohn001]

Hello together, I run into the same issue. Has someone found a workaround for it? Thanks for your help. I would like to mention, that the issue does not appear for me when using the emulator. It can only be observed on a real device

[mhtghn]

Hi @cjohn001, the only workaround that I have is to redraw the chart everytime the page is loaded. Once you redraw the chart, it will use the styles you provided

You either can do that from Typescript using the @HostListener('loaded') decorator above the function that redraw the chart. Either from the HTML file using (loaded)="redrawFn()"

Hope that helps

[cjohn001]

Hello @mhtghn, thank you very much. Unfortunately, this is only a partial workaround, when the app resumes from background or gets active after screensaver was shown, it takes about half a second till load event is called. Hence, the wrong chart colors show up for about half a second before it is rerendered with the correct color palette. Looks like we have to wait till the bug here gets fixed.

[cjohn001]

Hello together, I am wondering, is there maybe a method how I can enforce the chart to redraw without updating the data of the chart? I am still searching for a decent workaround.

It seems like ios at least redraws the chart the first time the app comes back from the background. I am wondering if there is an option to refresh the lost pallete before the view is rendered? Just thinking about better workaround options then resetting the displayed data in order to force a redraw. Thanks for your help.