Hey,

Within the LineChart is there any way for the 'spacing' field to automatically be set to the value that would have each data point spaced equally along the width you provide?

My use case is that the number of data points I use will be dynamic so without doing a secondary calculation I won't know what the spacing should be.

Cheers, Josh

hello team, at first i would like to thank you for this great package. Tooltip component is viewed off screen when multiple columns for bar charts. and how can i change the scrollbar color with custom color not only balck,white and default thank you in advance

Feature Request:

Not urgent but if we can set a type prop for the data line props i.e

showStrip,
dataPointText,
textShiftX,

Even better if we can also have the Y-axis counterpart.

Why is this a good idea?

• A lot of graphs sometimes decrease straight from the onset, so if you use vertical lines to display that "highest" data point it wont be visible since it may get overlapped by the y-axis (if the highest is at index = 0)

• Also if you use a horizontally scrolling graph, having a horizontalLine means you will be able to see where the highest data point no matter how much you scroll to the left/right.

• also, the dashed/dotted/solid type prop idea is also useful because it allows us to distinguish between which custom data points we're showing. for example my background lines for the graph are solid, however I would like to display the highest in dotted (horizontal) and the lowest value in dashed.

Just some ideas for expanding this in the future, not really urgent. (would be great if we could have the option to set our own graph container border, right now it's default only the bottom and right of the graph (unless I have messed things up) / border radius etc..

Would be great if we could render our own text component for Y-axis, similarly to how we can for x-axis. Then we could personalize and style our own text strings completely, including it's container.

Failing that, if we can set the elevation, to "above"/"below" or 0/1 for x/y axis labels.

tldr: I want the ability to display my text labels above the curve and overlay.

Just some ideas for you @Abhinandan-Kushwaha

It would be smarter to start your donut/pieChart from the center top (0 degrees) instead of the current (90 degrees)

The reason for this is because usually in most donut charts, they are displayed in descending order, meaning that the right hand side of the entire donut graph, will most of the time only show one label (< 90 degress)

And since most people output their labels LTR (Left to right is the standard), this would mean that the most clusterd position usually will be the right hand side of the donut chart.

This can be avoided in most cases however if you start at (0 degrees)

Look at this image to further understand my point:

As you can see my data is in descending order, light blue is biggest (starting at 90*), then dark blue then purple. Unfortunately this means that the smaller labels are congested since they are all rightToLeft and therefore cut off from the screen entirely.

This could be avoided if the're final posiiton was somewhere near the top (the case if you start at 0degrees)

Usually for (LTR) we want as least labels as possible on the right (avoid overflow issues like we see above).

Let me know if this at all makes any sense to you, and if not I can expand my point. (should be a simple edit that I think is better as the default (I can't see any use-cases for starting at 90degrees instead)

Also, zIndex of the labels should always be higher than the slices, I can't see a usecase where you would want to hide the label if it overlaps onto another (because it's starting point is always visible)

Describe the bug I'm unable to design the chart exactly like this.

Expected result:

Some snippets on how to achieved result exactly like this might be help.

Thank you.

I am trying to give more margin from the top to the x-axis labels, but still can't, I tried to use labelComponent with marginTop, but it seems that the labels container have fixed height because the text start to look trimmed from the bottom, any idea how to handle this?

Was hoping to use showVerticalLine to render on specific data points while looking similar to the chart prop showVerticalLines where the lines are the height of the chart.

Using showVerticalLine however only goes to the height of the data point.

Hi,

Just wondering if it's possible to get rid of the redundant space at the top of the bar chart - highlighted the background in red to show the space at the top:

Thanks

.

Describe the bug Prop to make different datas of Pie chart clickable, such that when we click some specific data it should shown up or animated like it's somewhat lifted outwards.

To Reproduce Steps to reproduce the behavior:

1. Go to pi chart
2. Click on some data from it
3. Clicked data should be animated like it's lifted upward

Expected behavior Clickable datas on the pie chart and animations to be added on the onPress of datas, in mobile application.

Screenshots If applicable, add screenshots to help explain your problem.

• Device: all iPhone and android devices
• Version of the library being used [1.2.18]

@Abhinandan-Kushwaha

I really want to implement functionality similar to the delta investment app, where we can holdPress on the graph, and then we can scroll through the datapoints, without removing our focus from the graph.

Look at the video below

Delta Investment App

https://user-images.githubusercontent.com/17049683/160614368-40cdc65a-4a26-444f-8292-ac7956ff6613.mp4

I want to achieve something similar and I've gotten as far as onPress, however I am having trouble handling the onScroll functionality with the focus still maintained on the graph.

My attempt thus far (you can see there is no scroll functionality, it's just onPress on each of the several data points)

https://user-images.githubusercontent.com/17049683/160614583-e1d7b383-1299-44b7-b5f3-fa87afcb9195.mp4

Describe the bug For a line chart, I noticed that I have to touch then move my fingers for the pointerConfig to take affect. I am wondering if it's possible to provide immediate feedback with the pointerConfig on touch start instead of on move?

To Reproduce Steps to reproduce the behavior:

1. Take any of the demo chart and verify the pointer config data only shows after touch move and not on touch start.

• Device: Iphone 11 pro max
• OS: latest
• Version of the library being used [e.g. 1.2.17]

Describe the bug

• Have a line chart inside a scroll view
• pressIn on a line chart with pointerConfig defined
• While pressed in, move the finger down and notice the scrollview scrolls down.

The issue sounds similar to #175

Expected behavior I'm hoping once the user presses in on the line chart, moving the finger while pressed will not cause the scroll view to scroll down. Atm, the pointerConfig doesn't operate as expected in this situation due to the scrolling conflict.

I'm trying to find a workaround but nothing in the exposed API allows it as far as I can tell.

• When I use adjustToWidth line chart shows white space like this
• How can I make a chart look like this: https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/demos/scrollLine.gif
• I'm using chart version ^1.2.41
• this is my line chart code: <LineChart areaChart data={chartData} width={width * 0.85} curved adjustToWidth disableScroll initialSpacing={0} hideDataPoints scrollToEnd scrollAnimation={false} color={hexToRgbA(color.primary, 0.7)} thickness={1.5} startFillColor={hexToRgbA(color.primary, 0.1)} endFillColor={hexToRgbA(color.background, 0.1)} startOpacity={0.2} endOpacity={0.1} noOfSections={4} stepValue={highestNav / 4} maxValue={highestNav} minValue={minNav} showXAxisIndices xAxisIndicesColor={color.palette.deepGray} xAxisIndicesHeight={1} xAxisIndicesWidth={7} yAxisThickness={1} xAxisColor={color.palette.deepGray} hideRules hideOrigin yAxisColor={color.palette.deepGray} yAxisTextStyle={{ color: color.palette.lightBlack, right: s(-70), position: "absolute", }} yAxisSide="right" yAxisLabelWidth={s(50)} yAxisLabelContainerStyle={{ zIndex: -1 }} verticalLinesUptoDataPoint getPointerProps= {(pointerProps)=>{ if (pointerProps.pointerIndex > 0){ setScrollAble(false) return } setScrollAble(true) }} pointerConfig={{ pointerStripColor: color.palette.deepGray, pointerStripWidth: 2, pointerColor: color.primary, radius: 4, pointerLabelWidth: s(100), pointerLabelHeight: 90, // set to false => can not scroll when enable scrollEnable activatePointersOnLongPress: false, autoAdjustPointerLabelPosition: true, pointerLabelComponent: items => { return ( <View style={styles.toolkit}> <AppText style={{ fontSize: ms(14), textAlign: "center" }}> {items[0].date} <View style={ALIGN_CENTER}> <AppText style={FONT_BOLD_12}> {numberWithCommas(items[0].value)} VNĐ ) }, }} />

Hi! How can I change the Y axis direction? I need minValue={120} maxValue={0} and show something like this. The Y axis must grow down. Is there any prop I can use?