Comments (7)
mrbodoia
commented on May 21, 2024
1
Looks good to me. Thanks!
from react-native-svg-charts.
JesperLekland
commented on May 21, 2024
Hi @mrbodoia! I'll take a look and see what I can do. Could you perhaps illustrate your problem with a screenshot?
from react-native-svg-charts.
mrbodoia
commented on May 21, 2024
Sure! Here is a screenshot of what I get when I run the code directly from the example, which contains four data points:
This corresponds to the following code:
class StackedAreaExample extends React.PureComponent {
render() {
const data = [
{
month: new Date(2015, 0, 1),
apples: 3840,
bananas: 1920,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 1, 1),
apples: 1600,
bananas: 1440,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 2, 1),
apples: 640,
bananas: 960,
cherries: 3640,
dates: 400,
},
{
month: new Date(2015, 3, 1),
apples: 3320,
bananas: 480,
cherries: 640,
dates: 400,
},
]
const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]
const keys = [ 'apples', 'bananas', 'cherries', 'dates' ]
return (
<StackedAreaChart
style={ { height: 200, paddingVertical: 16 } }
data={ data }
keys={ keys }
colors={ colors }
curve={ shape.curveNatural }
showGrid={ false }
/>
)
}
}
And here is what I get when I run a modified version of the code that has six data points rather than four:
The corresponding code is as follows:
class StackedAreaExample extends React.PureComponent {
render() {
const data = [
{
month: new Date(2015, 0, 1),
apples: 3840,
bananas: 1920,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 1, 1),
apples: 1600,
bananas: 1440,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 2, 1),
apples: 640,
bananas: 960,
cherries: 3640,
dates: 400,
},
{
month: new Date(2015, 3, 1),
apples: 3320,
bananas: 480,
cherries: 640,
dates: 400,
},
{
month: new Date(2015, 3, 1),
apples: 2320,
bananas: 980,
cherries: 740,
dates: 100,
},
{
month: new Date(2015, 3, 1),
apples: 1560,
bananas: 230,
cherries: 1200,
dates: 450,
},
]
const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]
const keys = [ 'apples', 'bananas', 'cherries', 'dates' ]
return (
<StackedAreaChart
style={ { height: 200, paddingVertical: 16 } }
data={ data }
keys={ keys }
colors={ colors }
curve={ shape.curveNatural }
showGrid={ false }
/>
)
}
}
As you can see, the graph looks exactly the same in both cases. Unless I'm completely misunderstanding the syntax of the library, those two extra data points should have been rendered as part of the StackedAreaChart.
You can reproduce the error by just copying the code from the StackedAreaChart example and then adding more data points. Also, if I remove data points (to try and graph three rather than four), I get TypeError: undefined is not an object (evaluating 'd[0]'). You can verify this by removing the last data point from the example code.
As I mentioned, I believe this is because stacked-area-chart.js is using the keys list in some places where it should be using data instead, but I wasn't able to fully diagnose the problem.
from react-native-svg-charts.
mrbodoia
commented on May 21, 2024
Okay I made some modifications to stacked-area-chart.js and I think I may have fixed the problem. The chart now renders properly for both three and six data points.
Here is the diff of the changes that I made:
Maxs-MacBook-Pro:src mrbodoia$ diff new-stacked-area-chart.js stacked-area-chart.js
87c87
< .domain([ 0, data.length - 1 ])
---
> .domain([ 0, keys.length - 1 ])
96c96
< (data.map((_, index) => serie[ index ]))
---
> (keys.map((_, index) => serie[ index ]))
143c143
< return data.map((key, index) => {
---
> return keys.map((key, index) => {
You're obviously more familiar with the codebase so perhaps you can verify that these changes solve the problem and don't break anything else.
from react-native-svg-charts.
JesperLekland
commented on May 21, 2024
Great job! I'll go ahead and verify the changes during the day. If you would like to you are more than welcome to create a PR and become an official contributor :)
from react-native-svg-charts.
JesperLekland
commented on May 21, 2024
Verified 🥇 Opened PR #38. Will merge if you don't oppose
from react-native-svg-charts.
JesperLekland
commented on May 21, 2024
Released in v.2.2.2. Thank you for reporting the issue and helping with the fix 🥇
from react-native-svg-charts.
Related Issues (20)
- Svg Text for Bar Chart can't be vertical
- can we create this type of chart?
- [Feature] Combination of bar and line chart
- create funnel chart from svg
- Library broken on RN 0.69 HOT 3
- What is the type of 'Common arguments for child component'?
- Custom Horizontal Lines
- Gap appearing under the area chart
- [Feature] display draggable tooltip on points HOT 1
- Annoying warnings because of props littering HOT 1
- Pie chart onClick is not working properly HOT 2
- [Feature] - Pressable pies on pie chart HOT 1
- ERROR Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager.
- [Feature] Is there the way we have shadow effect on PieChart ?
- [Feature] Pie charts text center position style
- [Question] - How can I add a top and bottom bar to my linechart?
- why not showing flatList and lineChart
- [Feature] Bump an react-native-svg peer dependency to the more recent HOT 2
- graph is slow with 500+ data points HOT 1
- INCOMPATIBILIDADE react-native-svg E react-native-svg-charts HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-svg-charts.