Candles are gone - not visible when using timestamps or big values for x field in dataset.

[darimuhittinhey]

Expected Behavior

Candles on graph has to be visible.

Actual Behavior

Candles are gone.

Screenshots

Expected (used 1,2,3,4,5 for x values):

Actual (used timestamps for x values):

Data and config

"dependencies": {
    "@types/react-native-charts-wrapper": "^0.5.5",
    "react": "18.2.0",
    "react-native": "0.72.0",
    "react-native-charts-wrapper": "^0.5.11"
  },

import {Dimensions, View, processColor} from 'react-native';
import React from 'react';
import {CandleStickChart} from 'react-native-charts-wrapper';

const App = () => {
  return (
    <View>
      <CandleStickChart
        data={{
          dataSets: [
            {
              values: [
                {
                  x: new Date(2021, 1, 1).getTime(),
                  // x: 1,
                  close: 83.46,
                  shadowH: 83.57,
                  shadowL: 83.3,
                  open: 83.53,
                },
                {
                  x: new Date(2021, 1, 2).getTime(),
                  // x: 2,
                  shadowH: 84.1,
                  shadowL: 83.5,
                  open: 84.1,
                  close: 83.72,
                },
                {
                  x: new Date(2021, 1, 3).getTime(),
                  // x: 3,
                  shadowH: 85,
                  shadowL: 84.3,
                  open: 84.36,
                  close: 84.8,
                },
                {
                  x: new Date(2021, 1, 4).getTime(),
                  // x: 4,
                  shadowH: 84,
                  shadowL: 83.2,
                  open: 83.87,
                  close: 83.61,
                },
                {
                  x: new Date(2021, 1, 5).getTime(),
                  // x: 5,
                  shadowH: 83.7,
                  shadowL: 83,
                  open: 83.67,
                  close: 83.62,
                },
              ],
              label: 'Data Set 1',
              config: {
                shadowColorSameAsCandle: true,
                increasingColor: processColor('green'),
                decreasingColor: processColor('red'),
                increasingPaintStyle: 'FILL',
                decreasingPaintStyle: 'FILL',
              },
            },
          ],
        }}
        xAxis={{
          valueFormatter: 'date',
          valueFormatterPattern: 'dd MMM',
        }}
        style={{
          height: 350,
          width: Dimensions.get('screen').width * 0.9,
          shadowColor: '#000',
        }}
      />
    </View>
  );
};

export default App;

Steps to Reproduce the Problem

Create a new project, add react-native-charts-wrapper package then use timestamps or big values for x values.

Specifications

• Version: 0.5.11
• Platform: Both IOS & Android

Explanation

When i use smaller values like 1,2,3,4,5 for x values in dataset its ok but when i use timestamps or big values for x candles are not more visible.

[wuxudong]

Candles are still there, but they are too thin. Using new Date(2021, 1, 1).getTime()` is not a good idea, because x values are too sparse.

x: new Date(2021, 1, 5).getTime() / 86400000 timeUnit: 'DAYS' should work, you can also check Example/app/StockChartScreen.js

[darimuhittinhey]

Candles are still there, but they are too thin. Using new Date(2021, 1, 1).getTime()` is not a good idea, because x values are too sparse.

x: new Date(2021, 1, 5).getTime() / 86400000 timeUnit: 'DAYS' should work, you can also check Example/app/StockChartScreen.js

Thank you so much for your help. This approach solved the issue. But it's still a problem candles are too thin when giving values that they far away from each other.

But we can close the issue.