Remove closed market \ gaps in x values

[natioskar]

Hello there :) First of all thank you very much for this amazing library your project looks awesome.

I'm having an issue using this library for an other kind of finance data, like stocks that has a time that the market is closed. (unlike crypto currencies 😄 )

For example - How the graph for a stock with closed market period should look like -

how it looks like with react-native-animated-charts (same raw data) -

At the moment is there a way to prevent this behavior? I would really like to work with this lib for it amazing performance improvements over all other charts libraries.

I hope my issue is clear and feel free to ask me for more information Thanks

[rinoarmadiaz]

hi man, you can try to generate the X as index itself, because this ChartPath logic are calculating width value from X data.

if you're using X value based on the array index itself, you'll get consistent chart graph.

here's an example of my implementation :

 let convertedChartData: ChartDataModel = [];
        let convertedChartXData: ChartXDataModel = [];
        const historicalData = response?.data.data;
        if ((historicalData?.length ?? 0) > 0) {
          historicalData?.forEach((item, index) => {
            const closingPrice = item.c ? item.c : 0;
            convertedChartData.push({
              x: index,
              y: closingPrice * idrCurrencyRate,
            });
            convertedChartXData.push({
              x: (item.t ?? 0) * 1000,
            });
          });
        }

as you can see i have 2 variables to store the chart, 1 (convertedChartData) is used for populating the chart, the other one (convertedChartXData) this one will be used for our ChartInfo to display the correct date based on user selected index.

hope it helps :)