react-native-chart-kit | Line Chart , Bezier Line Chart | Frontend Framework library

Snack I am trying to filter a bar chart according to dates I select from a daterange picker.

Snack I have a bar chart application with filters. I have included a side menu in the app. I need for the bar chart to display on the main screen and filters to display in the side menu. Currently, my bar chart is overlayering the side menu, like this-

I am not sure how to organize content on the main screen or the side menu. Maybe I am using the wrong package? The filters interact with the bar graph, that's why they can't be written out in different functions.

If viewing the snack, Clicking anywhere on the screen opens the side menu.

Snack I have created a bar chart in react native that enables users to make months selection and the chart renders according to their selection. However, what I have done so far is only changing the months labels on the x-axis. I am having issues implementing user selection on the bar graph itself. See below- The way variable datasets is defined, is the way how it was in the official documentation. Colors has to be defined for each bar line. I am thinking if somehow a for loop can be included there, according to the number of labels, the months filter would perhaps work. I am using applyDateFilter() to adjust labels in the chart.

Snack I have created a bar chart in react native that takes user input and adjusts accordingly. For instance, If user inputs Less Than 10, only bar components less than the user entered value show up. If user enters greater than 10, user entered value greater than 10 show up. The issue here is that the component instance is not rerendering post user selections. If I select less than 10 once, I cannot select less than 20 again the second time around. Bar component containing the value 20 is not simply there. Is there any way to make this barchart rerender everytime a user inputs a new value and selects a new less than/greater than picker option?

I am testing the package react-native-chart-kit, I follow the tutorial just to see how it could look like but I can't get it work correctly. I tried with piechart and barchart also but still the same mistake. Could you guide me to check what's wrong with :

Current Implementation:

This is a Chart using react-native-svg library with a tool-tip added to it. I want to make the color of the line into a gradient rather than a single color

Code:

Background: I am trying to add a tooltip to a react-native-svg chart following this tutorial. The link to the tutorial: Link

Current Code Implementation:

I am using https://www.npmjs.com/package/react-native-chart-kit and am trying to make a chart to match the following design spec:

I can get most of the options to work with the code attached at the end of this question, however I can't seem to figure out how to remove the opacity of each individual bar, so it ends up looking like this:

I've been poring through the source code and playing with props and styles to no avail.. any help would be greatly appreciated!

i know this is a common problem but the error i am seeing is different here's the error