margelo / react-native-graph Goto Github PK
View Code? Open in Web Editor NEW📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia
Home Page: https://margelo.io
License: MIT License
react-native-graph's People
Contributors
Stargazers
Watchers
Forkers
akinncar johndpope janak-nirmal northroomza blackmatrix2007 gmemmy brothereum nandirb coinweb danghungtb26 songxiaoliang vladyslavniemtsev cmaycumber rafaelaugustos esthor eduardborges foyarash chrispader szymon20000 carloswalterbr annieeeee42 mduc-dev see2ever rajk360 dynamichny talal-tilted psalishol tminhtri92 alvin-tosh gtokman 3210jr milos-delibasic nodonisko thomas-coldwell kradsteragain orca-adria piccolidiago bored-yuns abrarfahim19 voznov chasek30 adityakmr7 sidferreira rheutz91 johnathanwhite timothymiller chronsyn vladanyes saieashwarks sipotat rising32 richardlindhout schavisa david951118 datterx herujest crawltech lewiscasewell plutusds peterthedeveloper matr1xcode katharine-river bluebird2000 ritadata pekne n3trunr mibo-platform toandn96 bewallyt jinxman25 budikxyz soco3 luizhgodoy stelchenko marquezfigueroa ameenaliu batsandeep erranddev danielbuva abinash018 with-atlas maszyq brugarolas ugurnarin keshavinvestsky jaskaran-5ingh cjh88888 sunrise1002 hengle gabimoncha yura0seredyuk daxaxelrodreact-native-graph's Issues
Does this component work on Expo SDK 45?
I tried running the basic example on my iOS device through Expo and it giving error "nativernskia module cannot be found". Is there something missing, I installed all the required packages listed.
Is gradientFillColors supported on Android?
As the title states, is gradientFillColors supported on Android? The prop does not appear to be affecting the chart.
<LineGraph style={{height: 80, width: '100%'}} points={placeholderData} animated={false} color={theme.colors.primary} gradientFillColors={['#7476df5D', '#7476df4D', '#7476df00']} lineThickness={2} />
Multiple lines in graph
This is not supporting multiple lines in a single chart.
Problem running example
Hi @mrousavy , tried to run the example that is in the repository, but I get the following error:
yarn run v1.22.4
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 984 file(s) to forward-jetify. Using 8 workers...
info JS server already running.
info Installing the app...
FAILURE: Build failed with an exception.
* Where:
Build file '/Users/Username/Desktop/react-native-graph/example/android/app/build.gradle' line: 151
* What went wrong:
A problem occurred evaluating project ':app'.
> Could not get unknown property 'nativeArchitectures' for BuildType_Decorated{name=debug, debuggable=true, testCoverageEnabled=false, jniDebuggable=false, pseudoLocalesEnabled=false, renderscriptDebuggable=false, renderscriptOptimLevel=3, minifyEnabled=false, zipAlignEnabled=true, signingConfig=SigningConfig_Decorated{name=debug, storeFile=/Users/Username/Desktop/react-native-graph/example/android/app/debug.keystore, storePassword=android, keyAlias=androiddebugkey, keyPassword=android, storeType=jks, v1SigningEnabled=true, v2SigningEnabled=true, enableV1Signing=null, enableV2Signing=null, enableV3Signing=null, enableV4Signing=null}, embedMicroApp=false, mBuildConfigFields={}, mResValues={react_native_dev_server_port=com.android.builder.internal.ClassFieldImpl@99240943, react_native_inspector_proxy_port=com.android.builder.internal.ClassFieldImpl@44d408ec}, mProguardFiles=[], mConsumerProguardFiles=[], mManifestPlaceholders={}} of type com.android.build.gradle.internal.dsl.BuildType.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 4s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* Where:
Build file '/Users/Username/Desktop/react-native-graph/example/android/app/build.gradle' line: 151
* What went wrong:
A problem occurred evaluating project ':app'.
> Could not get unknown property 'nativeArchitectures' for BuildType_Decorated{name=debug, debuggable=true, testCoverageEnabled=false, jniDebuggable=false, pseudoLocalesEnabled=false, renderscriptDebuggable=false, renderscriptOptimLevel=3, minifyEnabled=false, zipAlignEnabled=true, signingConfig=SigningConfig_Decorated{name=debug, storeFile=/Users/Username/Desktop/react-native-graph/example/android/app/debug.keystore, storePassword=android, keyAlias=androiddebugkey, keyPassword=android, storeType=jks, v1SigningEnabled=true, v2SigningEnabled=true, enableV1Signing=null, enableV2Signing=null, enableV3Signing=null, enableV4Signing=null}, embedMicroApp=false, mBuildConfigFields={}, mResValues={react_native_dev_server_port=com.android.builder.internal.ClassFieldImpl@99240943, react_native_inspector_proxy_port=com.android.builder.internal.ClassFieldImpl@44d408ec}, mProguardFiles=[], mConsumerProguardFiles=[], mManifestPlaceholders={}} of type com.android.build.gradle.internal.dsl.BuildType.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 4s
at makeError (/Users/Username/Desktop/react-native-graph/example/node_modules/execa/index.js:174:9)
at /Users/Username/Desktop/react-native-graph/example/node_modules/execa/index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runOnAllDevices (/Users/Username/Desktop/react-native-graph/example/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5)
at async Command.handleAction (/Users/Username/Desktop/react-native-graph/example/node_modules/@react-native-community/cli/build/index.js:192:9)
info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I had to change the gradle version from gradle-6.2-all to gradle-6.7.1-all, because before I got the following error:
yarn run v1.22.4
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 984 file(s) to forward-jetify. Using 8 workers...
info JS server already running.
info Installing the app...
FAILURE: Build failed with an exception.
* Where:
Build file '/Users/Username/Desktop/react-native-graph/example/android/app/build.gradle' line: 1
* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.internal.version-check']
> Minimum supported Gradle version is 6.7.1. Current version is 6.2. If using the gradle wrapper, try editing the distributionUrl in /Users/Username/Desktop/react-native-graph/example/android/gradle/wrapper/gradle-wrapper.properties to gradle-6.7.1-all.zip
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 5s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* Where:
Build file '/Users/Username/Desktop/react-native-graph/example/android/app/build.gradle' line: 1
* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.internal.version-check']
> Minimum supported Gradle version is 6.7.1. Current version is 6.2. If using the gradle wrapper, try editing the distributionUrl in /Users/Username/Desktop/react-native-graph/example/android/gradle/wrapper/gradle-wrapper.properties to gradle-6.7.1-all.zip
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 5s
at makeError (/Users/Username/Desktop/react-native-graph/example/node_modules/execa/index.js:174:9)
at /Users/Username/Desktop/react-native-graph/example/node_modules/execa/index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runOnAllDevices (/Users/Username/Desktop/react-native-graph/example/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5)
at async Command.handleAction (/Users/Username/Desktop/react-native-graph/example/node_modules/@react-native-community/cli/build/index.js:192:9)
info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
What am I doing wrong?
onPointSelected is very slow when I update a state
Hi,
I tried to update a state in my component, thanks to onPointSelected props, but when I swipe my finger on the line, the pointer is very very slow to update.
I guess it is because I set a state at each time setFingerX is called
Do you have an idea how to update my state ?
const [selectedGraphPoint, setSelectedGraphPoint] = useState<GraphPoint>({
value: 0,
date: new Date(),
});
return (<>
<TotalAmountCard amount={selectedGraphPoint.value} />
<LineGraph
points={points}
color={theme.colors.base.text.secondary}
style={styles.graphContainer}
enablePanGesture
animated
onPointSelected={setSelectedGraphPoint}
/>
</>)
useDerivedValue is deprecated in Skia
Shopify/react-native-skia@2f45037
useDerivedValue should be changed to useComputedValue.
Animated chart doesn't show if first date isn't UTF 0
After updating a package, I noticed that it doesn't show, checked the example, and it did. But after I changed graph data generation method with date: new Date(index + 1) instead of date: new Date(index), the example behave the same - don't show the graph.
Screen.Recording.2022-10-17.at.10.23.31.mov
Cant get the pan scrubbing to work even when setting animated to true and enablePanGesture to true
Cant get the pan scrubbing to work even when setting animated to true and enablePanGesture to true...When clicking and dragging on the app in ios sim nothing seems to be happening
Automated Release
What about automated releases?
Every commit to main branch can be a new version
Workflow:
name: release
on: push
jobs:
release:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 14.x
- run: yarn install
- run: yarn test
- run: yarn prepare
- name: Release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
run: npx semantic-release --branches mainTypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[3], "./AnimatedLineGraph").AnimatedLineGraph')
Graph show empty
Q: Adding Linear Gradient to fill Path area
Hi! I tried to implement LinearGradient to fill out all area under Path line.
Wanted to get something like this:
Do you know how it could be implemented with react-native-skia LinearGradient component?
I can't get the needed behaviour.. :(
Animation does not work with large data set and crashes on navigation back
Hi,
Been tinkering around with the library to integrate in my App, but couldn't get it to work with a dataset of 300 points.
The animation does not work when mutating the chartData and the App crashes when navigating back to previous screen.
I have made a minimal reproducible repo on GitHub https://github.com/neo773/react-native-graph-repro-bug
RPReplay_Final1685644065.MP4
Migration to 1.0.0 gives straight line
Hello! I've been using the lib with much success until the new 1.0.0 changes
My chart is drawing as a straightline as soon as there are more than 6 points
Here is how it looks with exactly 6 points:
const myPoints = [
{ value: 9.29, date: new Date(1675904400000) },
{ value: 8.98, date: new Date(1675990800000) },
{ value: 9.02, date: new Date(1676250000000) },
{ value: 9.15, date: new Date(1676336400000) },
{ value: 9.39, date: new Date(1676422800000) },
{ value: 9.08, date: new Date(1676509200000) },
]Which is fine, it goes up & down following the prices, that's what I expected.
Now if I add just one point (or more), I get this graph:
const myPoints = [
{ value: 9.29, date: new Date(1675904400000) },
{ value: 8.98, date: new Date(1675990800000) },
{ value: 9.02, date: new Date(1676250000000) },
{ value: 9.15, date: new Date(1676336400000) },
{ value: 9.39, date: new Date(1676422800000) },
{ value: 9.08, date: new Date(1676509200000) },
{ value: 8.27, date: new Date(1676941200000) },
]Am I doing something wrong?
Thank you very much
Will the library be supported?
Will the library be supported?
TypeError: undefined is not an object (evaluating 'maxValue.getTime')
Can't use the simplest example without getting this error
TypeError: undefined is not an object (evaluating 'maxValue.getTime')
import { LineGraph } from 'react-native-graph'
priceHistory = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
<LineGraph
points={temps}
animated={true}
color="#4484B2"
/>
Docs update?!
Hello guys! That's really nice lib. very usefull I think... But a lot of things missing in docs. Do you think to upgrade them or maybe you need some help?
Get X axis value
Thanks for this great library 👏. I have one question about TopAxisLabel / BottomAxisLabel
In the doc it states:
You can get the maximum and minimum values from your graph points array, and smoothly animate the labels on the X axis accordingly.
I'm wondering how we can translate the max and min values from the GraphPoints to the correct x-axis points? I.E if the max value of the graph is 1337, how can we find the corresponding X value for it?
Multicolor Line Graph Line
How might i go about creating a multicolor line with this library? Like this:
Thanks
Does this feature exist? Selection dot always jumps back to the end when releasing it
Current behaviour
Selection dot always jumps back to the end of the graph when I release it. It does NOT stay at its position where I release it.
Desired behaviour
Selection stays at its position when releasing it. (At least having a prop that can enable this functionality)
I checked the example app and the source code, and could not find a prop that enable this feature.
BarChart component?
First off I would like to thank the team for delivering this amazing library.
I was wondering do you have plans to implement a component. Many health conscious apps utilize this for displaying performance metrics or weekly comparisons for their calories, hours of sleep; etc.
Just thought it would be cool 🥹🙃
Thanks
Graph doesn't show or gestureConfig errors
const dataPoints = [{"date": 2023-01-21T17:45:00.000Z, "value": 122549.01960784315}, {"date": 2023-01-22T05:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-22T17:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-23T05:45:00.000Z, "value": 119760.47904191617}, {"date": 2023-01-23T17:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-24T05:45:00.000Z, "value": 121951.21951219514}, {"date": 2023-01-24T17:45:00.000Z, "value": 120481.92771084337}]
<LineGraph points={dataPoints} animated={false} color="#fff" />
The graph does not show when using like this.
If I turn animated to true I then get the following error TypeError: undefined is not an object (evaluating 'gestureConfig.toGestureArray').
Can anyone help? I just want to implement a graph similar to those listed in the docs.
TopAxisLabel/BottomAxisLabel how to position?
The README says you can use TopAxisLabel / BottomAxisLabel to show labels of min and max but how would we figure out the x position of the min and max and then position it next to the graph's highest/lowest?
Graph opacity is faded when animated = True
Pretty basic setup. Pan gesture isn't enabled
<Box height={350}>
<LineGraph
style={styles.chart}
points={dataPoints}
color={colors[accentColorTheme]}
lineThickness={2}
animated={true}
/>
</Box>
When animated={true}
When animated={false}
Migration reanimated 3 : makeShareableCloneRecursive crash
Hi, I've tried to migrate reanimated 3 without success:
I got the following error when the graph mounts:
makeShareableCloneRecursive Maximum Call Stack Size Exceeded
It seems to be related to how react-native-graph is using react-native-reanimated and more specifically the PanGesture.
See related here : software-mansion/react-native-reanimated#4177
Infinite loop with callbacks
Hello, thanks for the package!
Everything was good until I started rendering current point price and timestamp near the graph
The code like this
const [amountTitle, setAmountTitle] = useState(assetBalanceFormatted);
const [timestamp, setTimestamp] = useState<DateTime>();
//...
<Center>
<AssetIconText
currency={assetName}
subtitle={amountTitle ? amountTitle : assetBalanceFormatted}
/>
<Text fontWeight="500" color="text.secondary">
{timestamp
? timestamp.toFormat("d MMM yyyy HH:mm")
: `${t("main.value")}: ${fiatBalanceFormatted}`}
</Text>
<Center>
<LineGraph
style={styles.graph}
animated={true}
color="#067dfb"
dotColor="#ffffff"
gradientColors={["#067dfb4d", "#37385f1a"]}
lineThickness={1.5}
points={graph.data.points}
enablePanGesture={true}
onGestureStart={() => hapticFeedback("impactLight")}
onPointSelected={(p) => {
console.log(p);
const selectedPrice = formatAmount(
p.value,
fiatCurrency.code as CurrencyName,
"fiat",
);
const timestamp = DateTime.fromSeconds(p.date);
setAmountTitle(selectedPrice);
setTimestamp(timestamp);
}}
onGestureEnd={() => {
setAmountTitle("");
setTimestamp(undefined);
}}
/>Creates infinite loop onPointSelected fires at the first render and then onGestureEnd fires next and so on
Graph tick marks
Hi @mrousavy , It would be possible to implement the possibility of having tick marks as seen in the images.
[Feature request] Scrollable
Looks cool. But can it be scrollable instead of period change?
Vertical scrolling not supported when enablePanGesture = true
If LineGraph is placed in a Scrollview, would it be possible to make it scroll with the rest of the view as well as supporting the the pan gesture? Right now the pan gesture will work but we cannot do vertical scroll if the touch initiated from the graph
<Scrollview>
...
<LineGraph
style={styles.chart}
points={dataPoints}
color={colors[accentColorTheme]}
lineThickness={2}
animated={true}
enablePanGesture={true}
/>
...
</Scrollview>
TypeError: undefined is not a function (near '...(0, _reactNativeSkia.useDerivedValue)...')
Hi, thanks for this amazing library.
OK so I installed the library and rendered the line chart but there was this problem that the pointer was not showing up and it was just partially stuck at the top left of the container.
To fix that I followed this fix given in #26 , where I just reverted the skia version to 0.1.123.
After implementing above fix I re-run the app and tried to render the chart but it got crash giving the following error:
` ERROR TypeError: undefined is not a function (near '...(0, _reactNativeSkia.useDerivedValue)...')
This error is located at:
in AnimatedLineGraph (at LineGraph.tsx:7)
in LineGraphImpl (at portfolio/index.js:663)
in RCTView (at View.js:32)`
I did some investigation and found the cause of the above error, it seems like when animated={true} it crashes the App with above error but works just fine when animated={false} but I need animated=true to enable enablePanGesture.
Line of control
Hi @mrousavy , congratulations on an excellent project, would it be possible to add the possibility of having a control line like the one you see in the video?
Registrazione.schermo.2022-04-30.alle.10.29.58.mov
Version 1.0.2 is not working
New version is not working.
I have an error. All is working fine on 1.0.1.
React native reanimated 2.17.0
@shopify/react-native-skia: ^0.1.193
The graph is not drawing outliers
Both charts have the same exact data; the one above (react-native-graph) is not drawing the outliers. I checked onPointSelected, and the data is correct. The problem is with the line.
selection point not moving
Code:
`import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
import React from 'react';
import {useNavigation} from '@react-navigation/native';
import {getMutualFund} from '../services/MutualFundApi';
import {LineGraph} from 'react-native-graph';
import {hapticFeedback} from './hapticFeedBack';
export default function MutualFundDetailScreen({route}) {
const navigation = useNavigation();
const loadMFDetails = async scheme_name => {
let data = await getMutualFund(scheme_name);
console.log(data);
let tempArray = [];
data.data.map(item => {
var newdate = item.date.split('-').reverse().join('-');
tempArray.push({
data: new Date(newdate).getTime(),
value: Number(item.nav),
});
});
setPointsArray(tempArray);
setMfData(data);
};
React.useEffect(() => {
if (route.params != undefined) {
console.log(route.params.code);
loadMFDetails(route.params.code);
}
}, []);
const [mfData, setMfData] = React.useState(null);
const [value, setValue] = React.useState(0);
const [date, setDate] = React.useState(0);
const [pointsArray, setPointsArray] = React.useState([]);
return (
{value}
{new Date(date).toString('MMM dd')}
<LineGraph
color="#31CBD1"
style={{height: 200, width: 300, marginLeft:30}}
points={pointsArray.reverse()}
animated={true}
enablePanGesture={true}
selectionDotShadowColor="#333333"
onGestureStart={() => hapticFeedback('impactLight')}
onPointSelected={p => {
setValue(p.value);
setDate(p.data);
}}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
});
`
pointer is present at top corner , not moving when i drag my finger on graph,
Support in Expo SDK 48
Hi everyone,
react-native-skia is supported in Expo starting Expo SDK 46. I am trying to get react-native-graph working in my Expo app (Expo SDK 48) but am not successful at that. Can someone create a Snack example to get it working?
Thanks!
X and Y axis values auto calculate with data given to the line chart
Is it possible to calculate/get the x and y-axis labels from the line chart data? or what is the best way to show the corresponding x and y-axis values in line/bar graphs?
Please post your answers.
My requirement is to show the months in the x-axis in case of year data.
Please find the below data:
const lineGraphData = {
data: {
prices: {
latest: '10404.19502652',
latest_price: {
amount: {
amount: '10404.19502652',
currency: 'CHF',
scale: '2',
},
timestamp: '2020-09-03T07:54:24+00:00',
percent_change: {
hour: 0.008619466515323599,
day: -0.036829332796034134,
week: -0.006295281193811376,
month: 0.019727500038499168,
year: -0.006590892810039769,
},
},
hour: {
percent_change: 0.008619466515323599,
x_axis_labels: [
{label: '2018'},
{label: '2019'},
{label: '2020'},
{label: '2021'},
{label: '2022'},
],
prices: [
['10303.6542326', 1599117540],
['10306.59791248', 1599117480],
['10308.20189904', 1599117420],
['10314.79100292', 1599117360],
['10308.81250756', 1599117300],
['10296.64590496', 1599116520],
['10295.29709808', 1599116460],
['10288.92671964', 1599116400],
['10279.7767054', 1599116340],
['10288.070045', 1599116280],
['10301.44875108', 1599116220],
['10264.74844496', 1599116160],
['10272.79571844', 1599116100],
['10277.1793408', 1599116040],
],
},
day: {
percent_change: -0.036829332796034134,
x_axis_labels: [
{label: '2018'},
{label: '2019'},
{label: '2020'},
{label: '2021'},
{label: '2022'},
],
prices: [
['10336.47659604', 1599118800],
['10344.41745078', 1599118500],
['10340.22365838', 1599118200],
['10329.31979814', 1599117900],
['10307.4756099', 1599117600],
['10312.63579794', 1599117300],
['10271.144604', 1599117000],
['10283.39777136', 1599116700],
['10292.74263486', 1599116400],
['10276.60565106', 1599116100],
['10287.10836594', 1599115800],
['10319.59202316', 1599115500],
['10305.333129', 1599115200],
['10302.34277268', 1599114900],
['10284.01772328', 1599114600],
['10307.77646892', 1599114300],
['10314.43183512', 1599114000],
['10329.49302', 1599113700],
['10315.98171492', 1599113400],
['10320.7407576', 1599113100],
['10299.47093658', 1599112800],
['10304.877282', 1599112500],
['10310.74859136', 1599112200],
['10282.98750906', 1599111900],
['10305.34224594', 1599111600],
['10330.3591293', 1599108300],
['10323.6125937', 1599108000],
['10346.21348796', 1599107700],
['10341.35415894', 1599107400],
['10367.89357128', 1599107100],
['10374.166026', 1599106800],
['10383.34678458', 1599106500],
['10372.60702926', 1599106200],
['10372.23323472', 1599105900],
['10362.05872968', 1599105600],
['10357.299687', 1599105300],
['10384.1490753', 1599105000],
['10366.7813046', 1599104700],
['10358.85868374', 1599104400],
['10377.75810036', 1599104100],
['10377.93132222', 1599103800],
['10388.50697262', 1599103500],
['10390.23919122', 1599103200],
['10402.43765694', 1599102900],
['10410.4970319', 1599102600],
['10424.14509108', 1599102300],
['10424.00833698', 1599102000],
['10430.4175458', 1599101700],
['10404.7989444', 1599101400],
['10412.01044394', 1599101100],
['10407.4884417', 1599100800],
['10415.47488114', 1599100500],
['10414.59053796', 1599100200],
['10409.07478926', 1599099900],
['10414.19850954', 1599099600],
['10426.5428463', 1599099300],
['10415.12843742', 1599099000],
['10412.6395128', 1599098700],
['10426.80723756', 1599098400],
['10424.79239382', 1599098100],
['10429.11382338', 1599097800],
['10411.42695978', 1599094800],
['10418.69316096', 1599094500],
['10429.58790426', 1599094200],
['10420.27039158', 1599093900],
['10424.24537742', 1599093600],
['10434.89396334', 1599093300],
['10414.90963086', 1599093000],
['10414.5540702', 1599092700],
['10410.97111278', 1599092400],
['10397.85183612', 1599092100],
['10392.1263978', 1599091800],
['10368.02120844', 1599091500],
['10389.19986006', 1599091200],
['10394.95202268', 1599090900],
['10403.72867949', 1599090600],
['10401.92413323', 1599090300],
['10402.82640636', 1599090000],
['10411.767112829999', 1599089700],
['10415.67696306', 1599089400],
['10423.56046061', 1599089100],
['10411.75799896', 1599088800],
['10411.75799896', 1599088500],
['10408.65928316', 1599088200],
['10415.66784919', 1599087900],
['10425.401462349999', 1599087600],
['10434.971025849998', 1599087300],
['10429.684981249999', 1599087000],
['10405.952463769998', 1599086700],
['10418.38378245', 1599086400],
['10409.42484824', 1599086100],
['10409.70737821', 1599085800],
['10399.590982509999', 1599085500],
['10387.95257052', 1599085200],
['10389.274081669999', 1599084900],
['10388.82750204', 1599084600],
['10382.192604679998', 1599084300],
['10380.169325539999', 1599084000],
['10364.958276509999', 1599083700],
['10357.48490311', 1599083400],
['10372.93291276', 1599083100],
['10363.746131799999', 1599079800],
['10340.897659709999', 1599079500],
['10731.718633049999', 1599032700],
],
},
week: {
percent_change: -0.0072519905172536755,
x_axis_labels: [
{label: '2018'},
{label: '2019'},
{label: '2020'},
{label: '2021'},
{label: '2022'},
],
prices: [
['10639.84639692', 1598936400],
['10641.12869181', 1598934600],
['10637.591013000001', 1598932800],
['10622.33079438', 1598931000],
['10582.46142702', 1598929200],
['10564.463827110001', 1598927400],
['10574.840412000001', 1598925600],
['10574.30384889', 1598923800],
['10497.84917136', 1598866200],
['10471.5682053', 1598864400],
['10492.18976828', 1598862600],
['10510.578308', 1598860800],
['10501.971675839999', 1598859000],
['10557.6345269', 1598857200],
['10546.94856134', 1598855400],
['10551.72198758', 1598853600],
['10551.089146979999', 1598851800],
['10544.54376706', 1598850000],
['10566.62086342', 1598848200],
['10561.36828644', 1598846400],
['10566.177875000001', 1598844600],
['10559.49688638', 1598842800],
['10571.674547640001', 1598841000],
['10569.08894176', 1598839200],
['10581.83615956', 1598837400],
['10580.362545020002', 1598835600],
['10575.14613036', 1598833800],
['10591.943528', 1598832000],
['10570.5332022', 1598830200],
['10537.2676371', 1598828400],
['10515.1448163', 1598826600],
['10487.4099564', 1598824800],
['10515.659931', 1598823000],
['10518.4343207', 1598821200],
['10507.1108344', 1598819400],
['10518.9223241', 1598817600],
['10526.2514122', 1598815800],
['10530.93263', 1598814000],
['10513.9699933', 1598812200],
['10522.8082771', 1598810400],
['10522.3293108', 1598808600],
['10540.421585', 1598806800],
['10511.5390134', 1598805000],
['10499.1310751', 1598803200],
['10509.885224099999', 1598801400],
['10501.1192371', 1598799600],
['10498.7786282', 1598797800],
['10510.1382629', 1598796000],
['10509.062848', 1598794200],
['10483.036', 1598792400],
['10467.184926599999', 1598790600],
['10486.2712818', 1598788800],
['10475.4990586', 1598787000],
['10450.1499931', 1598785200],
['10453.5660169', 1598783400],
['10469.9502792', 1598781600],
['10462.7477105', 1598779800],
['10449.643915499999', 1598778000],
['10476.258175', 1598776200],
['10478.942193699999', 1598774400],
['10463.3983817', 1598772600],
['10474.2338646', 1598770800],
['10477.9842611', 1598769000],
['10476.6558074', 1598767200],
['10464.175572299999', 1598765400],
['10471.486586199999', 1598763600],
['10485.792315499999', 1598761800],
['10497.0796534', 1598760000],
['10475.7882458', 1598758200],
['10506.3336438', 1598756400],
['10509.2164787', 1598754600],
['10384.361900639999', 1598742000],
['10409.97720672', 1598740200],
['10412.192437919999', 1598738400],
['10416.50535744', 1598736600],
['10410.46546176', 1598734800],
['10428.52185648', 1598733000],
['10424.697192', 1598731200],
['10443.133340639999', 1598729400],
['10428.71173344', 1598727600],
['10420.51085712', 1598725800],
['10407.54497328', 1598724000],
['10430.764212959999', 1598722200],
['10408.86507024', 1598720400],
['10389.759831360001', 1598718600],
['10401.43274352', 1598716800],
['10403.033135040001', 1598715000],
['10393.50312', 1598713200],
['10363.891356', 1598711400],
['10344.451572', 1598709600],
['10369.7685', 1598707800],
['10368.28565136', 1598706000],
['10369.79562528', 1598704200],
['10353.095494559999', 1598702400],
['10369.56053952', 1598700600],
['10360.6815312', 1598698800],
['10431.32480208', 1598697000],
['10441.0627776', 1598695200],
['10432.93423536', 1598693400],
['10432.075268159999', 1598691600],
['10442.518500959999', 1598689800],
['10460.60202096', 1598688000],
['10433.86553664', 1598686200],
['10422.5723784', 1598684400],
['10414.05504048', 1598682600],
['10411.035092639999', 1598680800],
['10397.463410879998', 1598679000],
['10402.57200528', 1598677200],
['10391.05280304', 1598675400],
['10402.047583200001', 1598673600],
['10387.68926832', 1598671800],
['10383.57526752', 1598670000],
['10399.9679784', 1598668200],
['10390.41987984', 1598666400],
['10388.65673664', 1598664600],
['10395.754518239999', 1598662800],
['10399.0638024', 1598661000],
['10429.67016', 1598659200],
['10419.04219474', 1598657400],
['10378.943674439999', 1598655600],
['10381.113605640001', 1598653800],
['10399.24157254', 1598652000],
['10395.24528258', 1598650200],
['10398.41880696', 1598648400],
['10400.33557952', 1598646600],
['10403.915966', 1598644800],
['10399.06978632', 1598643000],
['10387.7771027', 1598641200],
['10407.351690399999', 1598639400],
['10380.85140562', 1598637600],
['10400.67011058', 1598635800],
['10413.23762878', 1598634000],
['10415.15440134', 1598632200],
['10434.855568359999', 1598630400],
['10402.4241383', 1598628600],
['10355.85198992', 1598626800],
['10351.53925166', 1598625000],
['10368.329094319999', 1598623200],
['10340.55397496', 1598621400],
['10351.21376198', 1598619600],
['10380.3631711', 1598617800],
['10381.0412746', 1598616000],
['10340.61726462', 1598614200],
['10346.539368520002', 1598612400],
['10317.60695252', 1598610600],
['10354.323996699999', 1598608800],
['10351.928031', 1598607000],
['10309.0266829', 1598605200],
['10308.59269666', 1598603400],
['10294.39773006', 1598601600],
['10307.0375793', 1598599800],
['10344.97520978', 1598598000],
['10339.71312662', 1598596200],
['10311.36840032', 1598594400],
['10287.282164', 1598592600],
['10302.27277204', 1598590800],
['10291.820936760001', 1598589000],
['10290.66364012', 1598587200],
['10270.45615582', 1598585400],
['10284.56975', 1598583600],
['10284.66920518', 1598581800],
['10291.22420568', 1598580000],
['10255.7277478', 1598578200],
['10263.774576', 1598576400],
['10217.36517246', 1598574600],
['10244.389857279999', 1598572800],
['10297.99285173', 1598571000],
['10247.07826773', 1598569200],
['10273.017429900001', 1598567400],
['10264.74381', 1598565600],
['10272.926511', 1598563800],
['10241.514031050001', 1598562000],
['10260.69791895', 1598560200],
['10230.04006587', 1598558400],
['10246.141803060002', 1598556600],
['10246.132711170001', 1598554800],
['10194.86354346', 1598553000],
['10177.10708229', 1598551200],
['10114.727625', 1598549400],
['10249.94221308', 1598547600],
['10282.84576299', 1598545800],
['10300.73860251', 1598544000],
['10273.84479189', 1598542200],
['10286.20976229', 1598540400],
['10304.66629899', 1598538600],
['10368.49136679', 1598536800],
['10504.51513308', 1598535000],
['10326.48683499', 1598533200],
['10267.90778772', 1598531400],
['10286.34614064', 1598529600],
['10316.75851269', 1598527800],
['10339.170021540001', 1598526000],
['10336.6606599', 1598524200],
['10383.43843395', 1598522400],
['10344.4796853', 1598520600],
['10340.2974159', 1598518800],
['10345.234312170001', 1598517000],
['10370.18245833', 1598515200],
],
},
month: {
percent_change: 0.00428201453052589,
x_axis_labels: [
{label: '2018'},
{label: '2019'},
{label: '2020'},
{label: '2021'},
{label: '2022'},
],
prices: [
['10301.70775644', 1599112800],
['10364.30914224', 1599105600],
['10429.07171208', 1599098400],
['10391.45616708', 1599091200],
['10380.169325539999', 1599084000],
['10391.12419728', 1599076800],
['10357.621611159999', 1599069600],
['10337.461730719999', 1599062400],
['10337.79894391', 1599055200],
['10399.27199706', 1599048000],
['10703.18310608', 1599040800],
['10687.89914609', 1599033600],
['10816.21332182', 1599026400],
['10788.10614674', 1599019200],
['10837.41218344', 1599012000],
['10867.579093139999', 1599004800],
['10936.53851388', 1598997600],
['10887.71127087', 1598990400],
['10888.58432271', 1598983200],
['10962.893766300002', 1598976000],
['10798.2871173', 1598968800],
['10805.544360720001', 1598961600],
['10867.86753009', 1598954400],
['10847.523603360001', 1598947200],
['10729.42515342', 1598940000],
['10637.591013000001', 1598932800],
['10574.840412000001', 1598925600],
['10599.394995', 1598918400],
['10519.69121264', 1598911200],
['10605.16989654', 1598904000],
['10588.969177179999', 1598896800],
['10622.24755216', 1598889600],
['10590.41566998', 1598882400],
['10563.21256476', 1598875200],
['10491.35803492', 1598868000],
['10510.578308', 1598860800],
['10551.72198758', 1598853600],
['10561.36828644', 1598846400],
['10569.08894176', 1598839200],
['10591.943528', 1598832000],
['10487.4099564', 1598824800],
['10518.9223241', 1598817600],
['10522.8082771', 1598810400],
['10499.1310751', 1598803200],
['10510.1382629', 1598796000],
['10486.2712818', 1598788800],
['10469.9502792', 1598781600],
['10478.942193699999', 1598774400],
['10476.6558074', 1598767200],
['10497.0796534', 1598760000],
['10502.5109505', 1598752800],
['10369.439653', 1598745600],
['10412.192437919999', 1598738400],
['10424.697192', 1598731200],
['10407.54497328', 1598724000],
['10401.43274352', 1598716800],
['10344.451572', 1598709600],
['10353.095494559999', 1598702400],
['10441.0627776', 1598695200],
['10460.60202096', 1598688000],
['10411.035092639999', 1598680800],
['10402.047583200001', 1598673600],
['10390.41987984', 1598666400],
['10429.67016', 1598659200],
['10399.24157254', 1598652000],
['10403.915966', 1598644800],
['10380.85140562', 1598637600],
['10434.855568359999', 1598630400],
['10368.329094319999', 1598623200],
['10381.0412746', 1598616000],
['10354.323996699999', 1598608800],
['10294.39773006', 1598601600],
['10311.36840032', 1598594400],
['10290.66364012', 1598587200],
['10291.22420568', 1598580000],
['10244.389857279999', 1598572800],
['10264.74381', 1598565600],
['10230.04006587', 1598558400],
['10177.10708229', 1598551200],
['10300.73860251', 1598544000],
['10368.49136679', 1598536800],
['10286.34614064', 1598529600],
['10383.43843395', 1598522400],
['10370.18245833', 1598515200],
['10317.69497736', 1598508000],
['10352.42599716', 1598500800],
['10367.94585339', 1598493600],
['10422.27898803', 1598486400],
['10414.1320572', 1598479200],
['10408.360242720002', 1598472000],
['10399.76604726', 1598464800],
['10425.603084720002', 1598457600],
['10352.448058740001', 1598450400],
['10328.534959440001', 1598443200],
['10321.27481544', 1598436000],
['10299.884616180001', 1598428800],
['10313.261431500001', 1598421600],
['10318.60671252', 1598414400],
['10673.053133180001', 1598313600],
['10721.359543499999', 1598306400],
['10708.815239499998', 1598299200],
['10715.242372', 1598292000],
['10728.725675499998', 1598284800],
['10723.5475035', 1598277600],
['10750.432062', 1598270400],
['10744.7069', 1598263200],
['10721.003999999999', 1598256000],
['10630.4315725', 1598248800],
['10652.338522', 1598241600],
['10611.596883499999', 1598234400],
['10620.7316165', 1598227200],
['10648.6981146', 1598220000],
['10660.901076', 1598212800],
['10613.0012604', 1598205600],
['10625.851763100001', 1598198400],
['10576.3285341', 1598191200],
['10518.4784712', 1598184000],
['10571.2850082', 1598176800],
['10598.0986902', 1598169600],
['10562.182948799998', 1598162400],
['10564.82466025', 1598126400],
['10554.74651175', 1598083200],
['10451.65051525', 1598076000],
['10455.304527499999', 1598068800],
['10431.69468775', 1598061600],
['10506.415137749998', 1598054400],
['10510.652333999999', 1598047200],
['10639.864039', 1598040000],
['10658.78107', 1598032800],
['10685.63487075', 1598025600],
['10654.999486249999', 1598018400],
['10678.21749925', 1598011200],
['10733.975357', 1598004000],
['10787.10888675', 1597996800],
['10798.052699', 1597989600],
['10813.6710955', 1597982400],
['10764.5742925', 1597975200],
['10811.010318499999', 1597968000],
['10738.5880217', 1597960800],
['10753.743707630001', 1597953600],
['10729.1553985', 1597946400],
['10763.44842573', 1597939200],
['10723.686291009999', 1597932000],
['10719.86789258', 1597924800],
['10686.76301308', 1597917600],
['10614.08646529', 1597910400],
['10613.714602259999', 1597903200],
['10616.48997024', 1597896000],
['10663.17238525', 1597888800],
['10665.09518921', 1597881600],
['10714.761117839998', 1597874400],
['10660.714911079998', 1597867200],
['10778.35780528', 1597860000],
['10734.346921609998', 1597852800],
['10862.49168537', 1597845600],
['10832.486343769999', 1597809600],
['10953.834165819999', 1597802400],
['10935.684593339998', 1597795200],
['10902.07377136', 1597788000],
['10824.74346976', 1597780800],
['10825.26713088', 1597773600],
['10777.821627680001', 1597766400],
['10991.3760496', 1597759200],
['10995.47505216', 1597752000],
['11035.499013280001', 1597744800],
['11073.5818168', 1597737600],
['11045.65623328', 1597730400],
['11117.88535328', 1597723200],
['11142.07307984', 1597716000],
['11108.82059872', 1597708800],
['11185.95367954', 1597701600],
['11189.71596164', 1597694400],
['11227.0577447', 1597687200],
['11267.889837660001', 1597680000],
['11320.03597414', 1597672800],
['10799.20921114', 1597665600],
['10752.20334924', 1597658400],
['10709.3133333', 1597651200],
['10697.5732', 1597644000],
['10740.57200482', 1597636800],
['10740.39975576', 1597629600],
['10805.31045416', 1597622400],
['10779.6678792', 1597615200],
['10745.90644215', 1597608000],
['10758.15689091', 1597600800],
['10783.67562987', 1597593600],
['10740.30831423', 1597586400],
['10681.34621367', 1597579200],
['10790.936838', 1597572000],
['10780.98562035', 1597564800],
['10817.237133780001', 1597557600],
['10845.43679439', 1597550400],
['10812.702286650001', 1597543200],
['10778.231995740001', 1597536000],
['10818.534348', 1597528800],
['10764.262436250001', 1597521600],
['10784.086090499999', 1597514400],
['10780.8139605', 1597507200],
['10728.041775', 1597500000],
['10772.8154205', 1597492800],
['10818.59797275', 1597485600],
['10818.5161695', 1597478400],
['10814.38056075', 1597471200],
['10817.161871249999', 1597464000],
['10848.9106215', 1597456800],
['10704.8641875', 1597449600],
['10704.727971479999', 1597442400],
['10740.76299096', 1597435200],
['10727.218041659999', 1597428000],
['10681.41065943', 1597420800],
['10658.575147590002', 1597413600],
['10703.91891075', 1597406400],
['10646.99376141', 1597399200],
['10653.36625098', 1597392000],
['10673.19278415', 1597384800],
['10675.91995515', 1597377600],
['10738.035819960001', 1597370400],
['10723.19091915', 1597363200],
['10645.61886144', 1597356000],
['10478.44724416', 1597348800],
['10488.73626784', 1597341600],
['10465.31077184', 1597334400],
['10471.06935008', 1597327200],
['10512.179958399998', 1597320000],
['10374.92929504', 1597312800],
['10484.67888096', 1597305600],
['10495.15894752', 1597298400],
['10531.075008959999', 1597291200],
['10561.49631328', 1597284000],
['10522.31432832', 1597276800],
['10486.3106925', 1597269600],
['10556.84398194', 1597262400],
['10523.747311739999', 1597255200],
['10560.609525959999', 1597248000],
['10548.355552199999', 1597240800],
['10455.91281414', 1597233600],
['10470.64675878', 1597226400],
['10440.56799432', 1597219200],
['10266.93356256', 1597212000],
['10379.67194466', 1597204800],
['10343.91295278', 1597197600],
['10383.856895519999', 1597190400],
['10364.7970836', 1597183200],
['10449.4093947', 1597176000],
['10545.536393549999', 1597168800],
['10540.095588900002', 1597161600],
['10694.4015798', 1597154400],
['10779.90387075', 1597147200],
['10738.04729265', 1597140000],
['10786.17960495', 1597132800],
['10881.104672250001', 1597125600],
['10860.0662826', 1597118400],
['10948.8440664', 1597111200],
['10918.19022435', 1597104000],
['10847.232227999999', 1597096800],
['10870.076448', 1597089600],
['10894.733556', 1597082400],
['10929.773568', 1597075200],
['10936.33842', 1597068000],
['10752.632436', 1597060800],
['10969.66626', 1597053600],
['10974.354131999999', 1597046400],
['10972.541244', 1597039200],
['11020.189068', 1597032000],
['10863.328475999999', 1597024800],
['10701.7617', 1597017600],
['10633.8171', 1597010400],
['10620.14374548', 1597003200],
['10640.252156699999', 1596967200],
['10746.307367759999', 1596931200],
['10744.893', 1596924000],
['10697.0740275', 1596916800],
['10695.567989999998', 1596909600],
['10726.38243', 1596902400],
['10736.002815', 1596895200],
['10760.44626', 1596888000],
['10732.1145', 1596880800],
['10599.930045', 1596873600],
['10609.7238525', 1596866400],
['10547.5290675', 1596859200],
['10626.399795', 1596852000],
['10593.85113', 1596844800],
['10598.3874975', 1596837600],
['10508.728065', 1596830400],
['10542.755385', 1596823200],
['10632.360052499998', 1596816000],
['10720.960695', 1596808800],
['10737.937844999999', 1596801600],
['10789.462582499998', 1596794400],
['10764.2433', 1596787200],
['10765.064774999999', 1596780000],
['10800.2147775', 1596772800],
['10801.8759825', 1596765600],
['10746.618097499999', 1596758400],
['10697.406410000001', 1596751200],
['10811.978899', 1596744000],
['10807.4375', 1596736800],
['10790.709862000002', 1596729600],
['10810.577345000002', 1596722400],
['10652.074329000001', 1596715200],
['10690.444145000001', 1596708000],
['10596.330704000002', 1596700800],
['10596.949572', 1596693600],
['10611.174435', 1596686400],
['10633.435481', 1596679200],
['10699.818175', 1596672000],
['10699.36018874', 1596664800],
['10593.52940879', 1596657600],
['10612.90674765', 1596650400],
['10607.967069889999', 1596643200],
['10560.377269999999', 1596636000],
['10392.31926268', 1596628800],
['10349.58741794', 1596621600],
['10241.949660279999', 1596614400],
['10257.313510959999', 1596607200],
['10209.905316870001', 1596600000],
['10161.30760479', 1596592800],
['10167.24611445', 1596585600],
['10255.560091', 1596578400],
['10253.01395095', 1596571200],
['10274.998364500001', 1596564000],
['10235.10883705', 1596556800],
['10160.62283315', 1596549600],
['10044.1665852', 1596542400],
['10272.98152955', 1596535200],
['10309.12029155', 1596528000],
['10298.371821286417', 1596520800],
['10270.719620224314', 1596513600],
['10350.862300427254', 1596506400],
['10263.361660229866', 1596499200],
['10388.501031598338', 1596492000],
['10475.406255392716', 1596484800],
['10485.12325876422', 1596477600],
['10415.748955294406', 1596470400],
['10301.175667922558', 1596463200],
['10259.158120220618', 1596456000],
['10233.941828282652', 1596448800],
['10257.783777254803', 1596441600],
],
},
year: {
percent_change: -0.003254002000649953,
x_axis_labels: [
{label: '2018'},
{label: '2019'},
{label: '2020'},
{label: '2021'},
{label: '2022'},
],
prices: [
['10391.45616708', 1599091200],
['10867.579093139999', 1599004800],
['10599.394995', 1598918400],
['10591.943528', 1598832000],
['10369.439653', 1598745600],
['10429.67016', 1598659200],
['10244.389857279999', 1598572800],
['10422.27898803', 1598486400],
['10277.568748560001', 1598400000],
['10673.053133180001', 1598313600],
['10620.7316165', 1598227200],
['10646.0532276', 1598140800],
['10506.415137749998', 1598054400],
['10811.010318499999', 1597968000],
['10665.09518921', 1597881600],
['10935.684593339998', 1597795200],
['11108.82059872', 1597708800],
['11320.03597414', 1597622400],
['10778.231995740001', 1597536000],
['10704.8641875', 1597449600],
['10723.19091915', 1597363200],
['10522.31432832', 1597276800],
['10383.856895519999', 1597190400],
['10918.19022435', 1597104000],
['10701.7617', 1597017600],
['10746.307367759999', 1596931200],
['10593.85113', 1596844800],
['10789.19573913', 1596326400],
['10369.366538310001', 1596240000],
['10154.13450129', 1596153600],
['10093.52955744', 1596067200],
['9978.27394806', 1595980800],
['10141.005095', 1595894400],
['9141.84301', 1595808000],
['8945.869681650001', 1595721600],
['8793.77039337', 1595635200],
['8850.1410088', 1595548800],
['8825.7531', 1595462400],
['8736.775659359999', 1595376000],
['8542.72493025', 1595289600],
['8650.22315612', 1595203200],
['8609.873981429999', 1595116800],
['8592.445451250001', 1595030400],
['8572.5736305', 1594944000],
['8689.5613404', 1594857600],
['8739.477054', 1594771200],
['8677.85525916', 1594684800],
['8762.10004822', 1594598400],
['8686.31171', 1594512000],
['8744.9126688', 1594425600],
['8695.415332350001', 1594339200],
['8873.88084', 1594252800],
['8683.31429778', 1594166400],
['8806.02295845', 1594080000],
['8702.703009', 1593475200],
['8667.29231641', 1593388800],
['8535.1114661', 1593302400],
['8678.26697586', 1593216000],
['8761.26361134', 1593129600],
['8807.16621954', 1593043200],
['9125.367545919999', 1592956800],
['9153.17698845', 1592870400],
['8793.343122479999', 1592784000],
['8910.406776', 1592697600],
['8856.9294723', 1592611200],
['8929.0387641', 1592524800],
['9002.73617414', 1592438400],
['9037.972530000001', 1592352000],
['8973.69433464', 1592265600],
['8855.397928729999', 1592179200],
['9014.884525', 1592092800],
['9012.050779539999', 1592006400],
['8824.90097984', 1591920000],
['9342.116643450001', 1591833600],
['9229.406060700001', 1591747200],
['9303.45826177', 1591660800],
['9337.543672200001', 1591574400],
['9296.939500040002', 1591488000],
['9251.474737', 1591401600],
['9423.292706', 1591315200],
['9239.1365181', 1591228800],
['9153.97989894', 1591142400],
['9818.24268288', 1591056000],
['9079.02008361', 1590969600],
['9319.155625919999', 1590883200],
['9060.5605825', 1590796800],
['9210.7006145', 1590710400],
['8879.91439842', 1590624000],
['8561.97261106', 1590537600],
['8592.9767', 1590451200],
['8466.31667772', 1590364800],
['8917.47336283', 1590278400],
['8903.6771472', 1590192000],
['8797.3244656', 1590105600],
['9231.059862', 1590019200],
['9439.88296947', 1589932800],
['9448.2413388', 1589846400],
['9403.578165', 1589760000],
['9117.57608022', 1589673600],
['9049.126296', 1589587200],
['9518.719598399999', 1589500800],
['9071.67571695', 1589414400],
['8573.528379', 1589328000],
['8314.9622556', 1589241600],
['8493.149846100001', 1589155200],
['9262.71955899', 1589068800],
['9525.343129820001', 1588982400],
['9710.35927', 1588896000],
['8908.58367', 1588809600],
['8809.832085', 1588723200],
['8644.470650009998', 1588636800],
['8602.248390050001', 1588550400],
['8647.87194128', 1588464000],
['8489.71689492', 1588377600],
['8294.354756', 1588291200],
['8499.83893059', 1588204800],
['7554.8339597', 1588118400],
['7585.506651060001', 1588032000],
['7520.336678399999', 1587945600],
['7348.09647726', 1587859200],
['7313.14488359', 1587772800],
['7295.469919499999', 1587686400],
['6968.1671797', 1587600000],
['6667.38039573', 1587513600],
['6631.02995646', 1587427200],
['6903.0024876', 1587340800],
['7030.736763960001', 1587254400],
['6807.0758029', 1587168000],
['6875.881933', 1587081600],
['6420.02316844', 1586995200],
['6637.603184', 1586908800],
['6586.8099535500005', 1586822400],
['6678.874037799999', 1586736000],
['6655.03830562', 1586649600],
['5942.428323599999', 1585440000],
['6061.8030354', 1585353600],
['6432.816', 1585267200],
['6435.8190096', 1585180800],
['6605.862312', 1585094400],
['6367.1889588799995', 1585008000],
['5709.73410068', 1584921600],
['6107.68735528', 1584835200],
['6125.17540502', 1584748800],
['6099.101666', 1584662400],
['7413.54662208', 1583884800],
['7434.2463192000005', 1583798400],
['9483.809829', 1582329600],
['9400.0704075', 1582243200],
['9438.43976972', 1582156800],
['10186.792925310001', 1581724800],
['10047.6267595', 1581638400],
['10134.3773378', 1581552000],
['10041.954157940001', 1581465600],
['9614.411212680001', 1581379200],
['9939.05331364', 1581292800],
['9674.2937778', 1581206400],
['9588.57567712', 1581120000],
['9544.67004436', 1581033600],
['9370.12047022', 1580947200],
['8921.475255', 1580860800],
['8995.21701789', 1580774400],
['9006.21588313', 1580688000],
['9037.20309848', 1580601600],
['8993.982515579999', 1580515200],
['9154.09358094', 1580428800],
['9004.6469137', 1580342400],
['9140.05848096', 1580256000],
['8655.350136300001', 1580169600],
['8336.34207', 1580083200],
['8078.003542799999', 1579996800],
['8185.3292129', 1579910400],
['8144.177138549999', 1579824000],
['8397.43354244', 1579737600],
['8438.049425230001', 1579651200],
['8360.12596317', 1579564800],
['8422.940280370001', 1579478400],
['8625.6810258', 1579392000],
['8609.1654167', 1579305600],
['8435.83635661', 1579219200],
['8500.413561899999', 1579132800],
['8493.07109952', 1579046400],
['7839.3715680000005', 1578960000],
['7943.329266510001', 1578873600],
['7802.754135929999', 1578787200],
['7972.19982814', 1578700800],
['7601.43271472', 1578614400],
['7831.1528565', 1578528000],
['7942.358053270001', 1578441600],
['7523.150007', 1578355200],
['7124.3742414', 1578268800],
['7139.75988951', 1578182400],
['7131.3004039', 1578096000],
['6754.21252052', 1578009600],
['6969.66071376', 1577923200],
['6934.9479874', 1577836800],
['6982.7028740000005', 1577750400],
['7154.78433531', 1577664000],
['7111.81471955', 1577577600],
['7065.234933080001', 1577491200],
['7018.852216679999', 1577404800],
['7059.05858788', 1577318400],
['7107.9436922899995', 1577232000],
['7168.229595', 1577145600],
['7375.9803259', 1577059200],
['7016.243001530001', 1576972800],
['7066.1378700000005', 1576886400],
['7025.9719374900005', 1576800000],
['7130.6718483', 1576713600],
['6485.29332624', 1576627200],
['6739.32039696', 1576540800],
['6992.303188', 1576454400],
['6949.58838568', 1576368000],
['7134.8440869999995', 1576281600],
['7071.8696082999995', 1576195200],
['7093.91992028', 1576108800],
['7093.031025', 1576022400],
['7224.3215707399995', 1575936000],
['7429.07568', 1575849600],
['7432.061932199999', 1575763200],
['7469.472230400001', 1575676800],
['7322.68282325', 1575590400],
['7106.903192999999', 1575504000],
['7217.634357859999', 1575417600],
['7212.06835777', 1575331200],
['7342.31804703', 1575244800],
['7557.5067432000005', 1575158400],
['7760.603039209999', 1575072000],
['7434.424183109999', 1574985600],
['7513.81161677', 1574899200],
['7152.25547782', 1574812800],
['7110.617877000001', 1574726400],
['6886.6359816', 1574640000],
['7312.432633', 1574553600],
['7262.76065205', 1574467200],
['7595.1157736', 1574380800],
['8025.79107022', 1574294400],
['8045.77378864', 1574208000],
['8090.8439156800005', 1574121600],
['8410.438847', 1574035200],
['8388.624948', 1573948800],
['8369.158536359999', 1573862400],
['8543.23524945', 1573776000],
['8660.57940892', 1573689600],
['8720.748927', 1573603200],
['8658.778591650002', 1573516800],
['8970.6301914', 1573430400],
['8783.18386855', 1573344000],
['8735.57301569', 1573257600],
['9176.018454300001', 1573171200],
['9292.31240393', 1573084800],
['9251.773475130001', 1572998400],
['9342.091750779999', 1572912000],
['9099.99135708', 1572825600],
['9176.962686840001', 1572739200],
['9129.40394597', 1572652800],
['9037.51881468', 1572566400],
['9039.914288950002', 1572480000],
['9328.81282272', 1572393600],
['9171.3701508', 1572307200],
['9506.638942939999', 1572220800],
['9208.52229114', 1572134400],
['8620.02262', 1572048000],
['7389.74013455', 1571961600],
['7418.24746144', 1571875200],
['7946.969599999999', 1571788800],
['8122.79632896', 1571702400],
['8121.30395114', 1571616000],
['7845.55995717', 1571529600],
['7824.2825929499995', 1571443200],
['7945.06780062', 1571356800],
['7896.470056560001', 1571270400],
['8117.138457999999', 1571184000],
['8343.043995', 1571097600],
['8264.34818888', 1571011200],
['8293.75800286', 1570924800],
['8235.5867736', 1570838400],
['8560.65409375', 1570752000],
['8557.91772264', 1570665600],
['8123.87702', 1570579200],
['8147.49645591', 1570492800],
['7819.705071', 1570406400],
['8098.4183148', 1570320000],
['8121.198442000001', 1570233600],
['8205.87374535', 1570147200],
['8367.06875344', 1570060800],
['8295.323234700001', 1569974400],
['8244.91351645', 1569888000],
['8035.2434294', 1569801600],
['8144.211254949999', 1569715200],
['8119.54760085', 1569628800],
['7987.6615', 1569542400],
['8382.65689', 1569456000],
['8455.07386215', 1569369600],
['9560.2087315', 1569283200],
['9923.092937820002', 1569196800],
['9889.44048677', 1569110400],
['10077.33035', 1569024000],
['10182.53491', 1568937600],
['10084.029588239999', 1568851200],
['10155.96376536', 1568764800],
['10187.664508160002', 1568678400],
['10231.3798251', 1568592000],
['10223.52722826', 1568505600],
['10262.2806', 1568419200],
['10319.6115', 1568332800],
['10063.70322078', 1568246400],
['10029.767355', 1568160000],
['10223.85955644', 1568073600],
['10322.643073019999', 1567987200],
['10363.63199508', 1567900800],
['10180.554195', 1567814400],
['10441.678528800001', 1567728000],
['10435.810608', 1567641600],
['10425.380375679999', 1567555200],
],
},
all: {
percent_change: 105.57293655639661,
x_axis_labels: [
{label: '2018'},
{label: '2019'},
{label: '2020'},
{label: '2021'},
{label: '2022'},
],
prices: [
['10391.45616708', 1599091200],
['10277.568748560001', 1598400000],
['11108.82059872', 1597708800],
['10701.7617', 1597017600],
['10789.19573913', 1596326400],
['8793.77039337', 1595635200],
['8572.5736305', 1594944000],
['8873.88084', 1594252800],
['8640.84417301', 1593561600],
['9153.17698845', 1592870400],
['8855.397928729999', 1592179200],
['9296.939500040002', 1591488000],
['9060.5605825', 1590796800],
['8797.3244656', 1590105600],
['9071.67571695', 1589414400],
['8809.832085', 1588723200],
['7585.506651060001', 1588032000],
['6903.0024876', 1587340800],
['6655.03830562', 1586649600],
['6587.55797706', 1585958400],
['6432.816', 1585267200],
['5353.01174716', 1584576000],
['7413.54662208', 1583884800],
['8525.391201659999', 1583193600],
['9764.872905', 1582502400],
['9730.340235', 1581811200],
['9588.57567712', 1581120000],
['9154.09358094', 1580428800],
['8397.43354244', 1579737600],
['8493.07109952', 1579046400],
['7523.150007', 1578355200],
['7154.78433531', 1577664000],
['7016.243001530001', 1576972800],
['7134.8440869999995', 1576281600],
['7322.68282325', 1575590400],
['7513.81161677', 1574899200],
['8045.77378864', 1574208000],
['8658.778591650002', 1573516800],
['9099.99135708', 1572825600],
['9208.52229114', 1572134400],
['7824.2825929499995', 1571443200],
['8560.65409375', 1570752000],
['8367.06875344', 1570060800],
['8455.07386215', 1569369600],
['10187.664508160002', 1568678400],
['10322.643073019999', 1567987200],
['9500.05097', 1567296000],
['10147.646688750001', 1566604800],
['10077.06628355', 1565913600],
['11672.476460729999', 1565222400],
['9531.648542179999', 1564531200],
['10173.211867659998', 1563840000],
['10032.88974954', 1563148800],
['11141.260031239999', 1562457600],
['12069.950130000001', 1561766400],
['9294.12115125', 1561075200],
['8124.66817954', 1560384000],
['7626.45505688', 1559692800],
['8836.84528211', 1559001600],
['8265.221041', 1558310400],
['7291.499212', 1557619200],
['5752.7373585000005', 1556928000],
['5236.746176999999', 1556236800],
['5305.927699999999', 1555545600],
['5198.621862', 1554854400],
['4129.4806418', 1554163200],
['3939.18889768', 1553472000],
['3999.77949', 1552780800],
['3873.36096', 1552089600],
['3788.6891526', 1551398400],
['3942.647514', 1550707200],
['3620.00808624', 1550016000],
['3408.8880860000004', 1549324800],
['3501.6595687', 1548633600],
['3666.8174285', 1547942400],
['3577.5193498000003', 1547251200],
['3736.38099145', 1546560000],
['3760.96876056', 1545868800],
['3645.79378536', 1545177600],
['3386.96098', 1544486400],
['4094.4425964', 1543795200],
['3764.954725', 1543104000],
['5508.3187341', 1542412800],
['6441.794631999999', 1541721600],
['6318.005066739999', 1541030400],
['6375.08126745', 1540339200],
['6380.1411347700005', 1539648000],
['6519.97266613', 1538956800],
['6458.7316009999995', 1538265600],
['6472.2375', 1537574400],
['6275.0656051999995', 1536883200],
['6456.8241024', 1536192000],
['6862.6980453999995', 1535500800],
['6161.33522938', 1534809600],
['6274.53546', 1534118400],
['6967.474215', 1533427200],
['8137.05451256', 1532736000],
['7415.96447765', 1532044800],
['6407.88738172', 1531353600],
['6453.38866398', 1530662400],
['6188.15320937', 1529971200],
['6410.5559766', 1529280000],
['7382.59950338', 1528588800],
['7425.125021599999', 1527897600],
['7506.67790775', 1527206400],
['8358.6954576', 1526515200],
['9228.847801409998', 1525824000],
['9213.325361000001', 1525132800],
['8602.732505', 1524441600],
['7708.3490841600005', 1523750400],
['6349.31843755', 1523059200],
['6755.205', 1522368000],
['8416.907319709999', 1521676800],
['8637.5291003', 1520985600],
['10670.1172515', 1520294400],
['9011.663999999999', 1519603200],
['10314.4016235', 1518912000],
['8148.286107', 1518220800],
['8394.9881571', 1517529600],
['10694.698559999999', 1516838400],
['11163.902649', 1516147200],
['14753.590420319999', 1515456000],
['13513.80273514', 1514764800],
['14914.577976999999', 1514073600],
['19717.497463720003', 1513468800],
['17575.572837400003', 1513382400],
['17260.4544255', 1512691200],
['9762.42426835', 1512000000],
['7962.835275', 1511308800],
['6468.89040424', 1510617600],
['7375.953820199999', 1509926400],
['5740.241387540001', 1509235200],
['5893.993092000001', 1508544000],
['5302.5312', 1507852800],
['4123.504417200001', 1507161600],
['3776.05494915', 1506470400],
['3946.3853', 1505779200],
['4065.7711305599996', 1505088000],
['4461.030392260001', 1504396800],
['4170.558', 1503705600],
['4129.8458491500005', 1503014400],
['3216.0209672', 1502323200],
['2651.1352588', 1501632000],
['2631.1768116', 1500940800],
['1841.64451311', 1500249600],
['2467.5434771200003', 1499558400],
['2353.2014074', 1498867200],
['2597.91074235', 1498176000],
['2371.6163522700003', 1497484800],
['2770.0483146', 1496793600],
['2223.9167225399997', 1496102400],
['2001.8996938199998', 1495411200],
['1793.4827415000002', 1494720000],
['1531.3161534', 1494028800],
['1342.7916891', 1493337600],
['1212.884358', 1492646400],
['0.06032699999999999', 1492214400],
['1226.5912079999998', 1491955200],
['1154.0831157', 1491264000],
['960.139626', 1490572800],
['967.60216', 1489881600],
['1124.317908', 1489190400],
['1278.8791505', 1488499200],
['1136.82773946', 1487808000],
['1019.014948', 1487116800],
['1020.3541507499999', 1486425600],
['911.5464168', 1485734400],
['926.14787056', 1485043200],
['838.694925', 1484352000],
['1025.0142230000001', 1483660800],
['999.4128542500001', 1482969600],
['820.2871986399999', 1482278400],
['789.3327147599999', 1481587200],
['773.80859748', 1480896000],
['745.92197652', 1480204800],
['755.84162555', 1479513600],
['704.078944', 1478822400],
['725.2084418400001', 1478131200],
['650.2060448999999', 1477440000],
['633.00514956', 1476748800],
['605.9346882599999', 1476057600],
['598.1224445', 1475366400],
['585.0514850400001', 1474675200],
['592.6251555', 1473984000],
['597.62101668', 1473292800],
['565.2114969', 1472601600],
['563.56488874', 1471910400],
['559.65682399', 1471219200],
['580.1346318000001', 1470528000],
['637.73995842', 1469836800],
['658.37929452', 1469145600],
['643.7090536', 1468454400],
['652.8394822500001', 1467763200],
['644.44097172', 1467072000],
['739.31427968', 1466380800],
['587.7402405', 1465689600],
['558.45120721', 1464998400],
['452.16829474', 1464307200],
['448.54073152', 1463616000],
['439.90091829', 1462924800],
['426.32853627', 1462233600],
['453.19313287', 1461542400],
['419.44718671', 1460851200],
['400.19314856000005', 1460160000],
['398.96611351999996', 1459468800],
['407.24331338999997', 1458777600],
['407.13378657000004', 1458086400],
['410.46016854999993', 1457395200],
['432.78707098', 1456704000],
['433.72662012', 1456012800],
['373.1627529', 1455321600],
['385.26437025', 1454630400],
['400.3366948', 1453939200],
['377.09935743999995', 1453248000],
['449.87323990000004', 1452556800],
['432.62731959999996', 1451865600],
['413.93711891000004', 1451174400],
['459.74703636', 1450483200],
['408.7921824', 1449792000],
['360.00648', 1449100800],
['327.67319935999996', 1448409600],
['337.18170990000004', 1447718400],
['375.31330343999997', 1447027200],
['310.77163751999996', 1446336000],
['271.27585152', 1445644800],
['243.04617105999998', 1444953600],
['235.79720799999998', 1444262400],
['230.64152832', 1443571200],
['221.36811659999998', 1442880000],
['223.59094037000003', 1442188800],
['229.58699742', 1441497600],
['221.2463501', 1440892800],
['220.571021184', 1440201600],
['257.815019088', 1439510400],
['276.39953010199997', 1438819200],
['284.628209488', 1438128000],
['267.581422478', 1437436800],
['294.568261284', 1436745600],
['245.91094805999998', 1436054400],
['227.38928030099999', 1435363200],
['228.605535248', 1434672000],
['213.51439163999999', 1433980800],
['211.17489931999998', 1433289600],
['225.460296768', 1432598400],
['218.91912105', 1431907200],
['225.166454107', 1431216000],
['216.644739063', 1430524800],
['225.61209685', 1429833600],
['214.84634624699999', 1429142400],
['244.280907752', 1428451200],
['240.11080255000002', 1427760000],
['259.0758966', 1427068800],
['283.28353070000003', 1426377600],
['267.92286441799996', 1425686400],
['241.705968', 1425081600],
['225.66968630800002', 1424390400],
['203.866070496', 1423699200],
['210.536859312', 1423008000],
['245.61401054499999', 1422316800],
['185.012594364', 1421625600],
['278.16005448', 1420934400],
['315.147937314', 1420243200],
['315.082173696', 1419552000],
['312.323456595', 1418860800],
['340.9555723', 1418169600],
['367.91307975', 1417478400],
['354.915408132', 1416787200],
['359.57029785000003', 1416096000],
['331.175646756', 1415404800],
['331.81033569600004', 1414713600],
['365.06044131', 1414022400],
['378.28781098499996', 1413331200],
['316.912037512', 1412640000],
['358.552006144', 1411948800],
['383.84271057499996', 1411257600],
['446.13682478500004', 1410566400],
['455.10052698000004', 1409875200],
['466.487563875', 1409270400],
['465.20229019100003', 1408579200],
['517.6878542479999', 1407888000],
['535.311456141', 1407196800],
['537.2531353459999', 1406505600],
['562.769615147', 1405814400],
['563.806564227', 1405123200],
['576.0962782979999', 1404432000],
['505.8303883489999', 1403740800],
['546.853680008', 1403049600],
['584.0230844380001', 1402358400],
['565.298429225', 1401667200],
['470.233477032', 1400976000],
['399.852558515', 1400284800],
['389.28682053', 1399593600],
['393.84899978399994', 1398902400],
['431.534035119', 1398211200],
['403.288941471', 1397520000],
['410.101791372', 1396828800],
['436.765475808', 1396137600],
['504.29824907999995', 1395446400],
['556.78544582', 1394755200],
['585.88934196', 1394064000],
['516.7006344', 1393459200],
['556.52864402', 1392768000],
['613.866387', 1392076800],
['743.4025680000001', 1391385600],
['763.26845856', 1390694400],
['742.34215585', 1390003200],
['765.43231401', 1389312000],
['694.03400896', 1388620800],
['596.6606157', 1387929600],
['625.42282348', 1387238400],
['707.0646492', 1386547200],
['1022.75523428', 1385856000],
['700.5585204', 1385164800],
['383.75302003', 1384473600],
['239.52617120000002', 1383782400],
['183.78258264', 1383091200],
['163.95065830000001', 1382400000],
['126.91145874000001', 1381708800],
['116.34126812000002', 1381017600],
['121.30009437', 1380326400],
['118.11545539999999', 1379635200],
['126.2238889', 1378944000],
['127.74811734000001', 1378252800],
['116.54221344000001', 1377648000],
['109.387537', 1376956800],
['97.17834', 1376265600],
['97.50558165', 1375574400],
],
},
},
},
}Dot position on Line graph not follow when pan gesture
I've followed by example project but got dot on line graph not follow on the line
here is video
Image.from.iOS.MP4
Can't import AxisLabel
Thanks for this module, animation works very well!
Can you also add an AxisLabel component, that you mention in a README file?
Error when I try to use the react native graph
I'm getting this weird error when I load the chart. Basically I'm doing this.
1- Install all the dependencies.
And called like this.
<LineGraph animated={true} points={generateRandomGraphData(10)} color="#4484B2" />
Those are the errors.
Uncaught TypeError: this.CanvasKit is undefined
The above error occurred in the <AnimatedLineGraph> component:
Anyone can help me with this?
StaticGraph paths and AnimatedGraph paths aren't consistent
Hi, I recently upgraded to v0.3.0, and noticed that the StaticGraphs and AnimatedGraphs are not consistent.
Reproducible demo
data = [{"date": 2022-09-07T22:15:00.000Z, "value": 156.06}, {"date": 2022-09-07T22:20:00.000Z, "value": 156.08}, {"date": 2022-09-07T22:25:00.000Z, "value": 156.02}, {"date": 2022-09-07T22:30:00.000Z, "value": 156}, {"date": 2022-09-07T22:35:00.000Z, "value": 155.99}, {"date": 2022-09-07T22:40:00.000Z, "value": 155.95}, {"date": 2022-09-07T22:45:00.000Z, "value": 155.93}, {"date": 2022-09-07T22:50:00.000Z, "value": 155.96}, {"date": 2022-09-07T22:55:00.000Z, "value": 156.02}, {"date": 2022-09-07T23:00:00.000Z, "value": 155.97}, {"date": 2022-09-07T23:05:00.000Z, "value": 155.98}, {"date": 2022-09-07T23:10:00.000Z, "value": 156}, {"date": 2022-09-07T23:15:00.000Z, "value": 156.04}, {"date": 2022-09-07T23:20:00.000Z, "value": 155.96}, {"date": 2022-09-07T23:25:00.000Z, "value": 155.96}, {"date": 2022-09-07T23:30:00.000Z, "value": 155.93}, {"date": 2022-09-07T23:35:00.000Z, "value": 155.88}, {"date": 2022-09-07T23:40:00.000Z, "value": 155.88}, {"date": 2022-09-07T23:45:00.000Z, "value": 155.93}, {"date": 2022-09-07T23:50:00.000Z, "value": 155.91}, {"date": 2022-09-07T23:55:00.000Z, "value": 156.04}, {"date": 2022-09-08T08:00:00.000Z, "value": 155.64}, {"date": 2022-09-08T08:05:00.000Z, "value": 155.74}, {"date": 2022-09-08T08:10:00.000Z, "value": 155.8}, {"date": 2022-09-08T08:15:00.000Z, "value": 155.87}, {"date": 2022-09-08T08:20:00.000Z, "value": 155.8}, {"date": 2022-09-08T08:25:00.000Z, "value": 155.71}, {"date": 2022-09-08T08:30:00.000Z, "value": 155.9}, {"date": 2022-09-08T08:35:00.000Z, "value": 155.94}, {"date": 2022-09-08T08:40:00.000Z, "value": 156}, {"date": 2022-09-08T08:50:00.000Z, "value": 156.02}, {"date": 2022-09-08T08:55:00.000Z, "value": 156.08}, {"date": 2022-09-08T09:00:00.000Z, "value": 156.15}, {"date": 2022-09-08T09:05:00.000Z, "value": 156.07}, {"date": 2022-09-08T09:10:00.000Z, "value": 156.07}, {"date": 2022-09-08T09:15:00.000Z, "value": 156}, {"date": 2022-09-08T09:20:00.000Z, "value": 156}, {"date": 2022-09-08T09:30:00.000Z, "value": 155.9}, {"date": 2022-09-08T09:40:00.000Z, "value": 156.01}, {"date": 2022-09-08T09:50:00.000Z, "value": 156.02}, {"date": 2022-09-08T09:55:00.000Z, "value": 156.07}, {"date": 2022-09-08T10:00:00.000Z, "value": 156.14}, {"date": 2022-09-08T10:05:00.000Z, "value": 156}, {"date": 2022-09-08T10:20:00.000Z, "value": 156.13}, {"date": 2022-09-08T10:25:00.000Z, "value": 156.11}, {"date": 2022-09-08T10:35:00.000Z, "value": 156.08}, {"date": 2022-09-08T10:40:00.000Z, "value": 156.14}, {"date": 2022-09-08T10:45:00.000Z, "value": 156.29}, {"date": 2022-09-08T10:50:00.000Z, "value": 156.38}, {"date": 2022-09-08T10:55:00.000Z, "value": 156.33}, {"date": 2022-09-08T11:00:00.000Z, "value": 156.38}, {"date": 2022-09-08T11:05:00.000Z, "value": 156}, {"date": 2022-09-08T11:10:00.000Z, "value": 156.28}, {"date": 2022-09-08T11:15:00.000Z, "value": 156.06}, {"date": 2022-09-08T11:20:00.000Z, "value": 155.95}, {"date": 2022-09-08T11:25:00.000Z, "value": 156}, {"date": 2022-09-08T11:30:00.000Z, "value": 155.69}, {"date": 2022-09-08T11:35:00.000Z, "value": 155.6}, {"date": 2022-09-08T11:40:00.000Z, "value": 155.5}, {"date": 2022-09-08T11:45:00.000Z, "value": 155.35}, {"date": 2022-09-08T11:50:00.000Z, "value": 155.45}, {"date": 2022-09-08T11:55:00.000Z, "value": 155.6}, {"date": 2022-09-08T12:00:00.000Z, "value": 155.6}, {"date": 2022-09-08T12:05:00.000Z, "value": 155.59}, {"date": 2022-09-08T12:10:00.000Z, "value": 155.62}, {"date": 2022-09-08T12:15:00.000Z, "value": 155.3822}, {"date": 2022-09-08T12:20:00.000Z, "value": 155.5}, {"date": 2022-09-08T12:25:00.000Z, "value": 155.29}, {"date": 2022-09-08T12:30:00.000Z, "value": 154.9}, {"date": 2022-09-08T12:35:00.000Z, "value": 154.85}, {"date": 2022-09-08T12:40:00.000Z, "value": 154.8}, {"date": 2022-09-08T12:45:00.000Z, "value": 154.81}, {"date": 2022-09-08T12:50:00.000Z, "value": 154.76}, {"date": 2022-09-08T12:55:00.000Z, "value": 154.71}, {"date": 2022-09-08T13:00:00.000Z, "value": 154.629}, {"date": 2022-09-08T13:05:00.000Z, "value": 154.6}, {"date": 2022-09-08T13:10:00.000Z, "value": 154.45}, {"date": 2022-09-08T13:15:00.000Z, "value": 154.6}, {"date": 2022-09-08T13:20:00.000Z, "value": 154.65}, {"date": 2022-09-08T13:25:00.000Z, "value": 154.65}, {"date": 2022-09-08T13:30:00.000Z, "value": 154.3996}, {"date": 2022-09-08T13:35:00.000Z, "value": 154.83}, {"date": 2022-09-08T13:40:00.000Z, "value": 155.18}, {"date": 2022-09-08T13:45:00.000Z, "value": 155.38}, {"date": 2022-09-08T13:50:00.000Z, "value": 155.56}, {"date": 2022-09-08T13:55:00.000Z, "value": 155.39}, {"date": 2022-09-08T14:00:00.000Z, "value": 154.72}, {"date": 2022-09-08T14:05:00.000Z, "value": 154.88}, {"date": 2022-09-08T14:10:00.000Z, "value": 154.5798}, {"date": 2022-09-08T14:15:00.000Z, "value": 155.09}, {"date": 2022-09-08T14:20:00.000Z, "value": 154.7673}, {"date": 2022-09-08T14:25:00.000Z, "value": 154.92}, {"date": 2022-09-08T14:30:00.000Z, "value": 155.145}, {"date": 2022-09-08T14:35:00.000Z, "value": 155.5475}, {"date": 2022-09-08T14:40:00.000Z, "value": 155.675}, {"date": 2022-09-08T14:45:00.000Z, "value": 155.375}, {"date": 2022-09-08T14:50:00.000Z, "value": 155.4}, {"date": 2022-09-08T14:55:00.000Z, "value": 155.76}, {"date": 2022-09-08T15:00:00.000Z, "value": 156.0234}, {"date": 2022-09-08T15:05:00.000Z, "value": 156.1812}, {"date": 2022-09-08T15:10:00.000Z, "value": 156.14}, {"date": 2022-09-08T15:15:00.000Z, "value": 156.18}, {"date": 2022-09-08T15:20:00.000Z, "value": 156.1847}, {"date": 2022-09-08T15:25:00.000Z, "value": 155.99}, {"date": 2022-09-08T15:30:00.000Z, "value": 156.14}, {"date": 2022-09-08T15:35:00.000Z, "value": 155.6793}, {"date": 2022-09-08T15:40:00.000Z, "value": 155.69}, {"date": 2022-09-08T15:45:00.000Z, "value": 155.56}, {"date": 2022-09-08T15:50:00.000Z, "value": 155.79}, {"date": 2022-09-08T15:55:00.000Z, "value": 155.52}, {"date": 2022-09-08T16:00:00.000Z, "value": 154.58}, {"date": 2022-09-08T16:05:00.000Z, "value": 153.88}, {"date": 2022-09-08T16:10:00.000Z, "value": 153.39}, {"date": 2022-09-08T16:15:00.000Z, "value": 153.0199}, {"date": 2022-09-08T16:20:00.000Z, "value": 152.985}, {"date": 2022-09-08T16:25:00.000Z, "value": 153.1499}, {"date": 2022-09-08T16:30:00.000Z, "value": 153.3901}, {"date": 2022-09-08T16:35:00.000Z, "value": 153.16}, {"date": 2022-09-08T16:40:00.000Z, "value": 153.586}, {"date": 2022-09-08T16:45:00.000Z, "value": 153.29}, {"date": 2022-09-08T16:50:00.000Z, "value": 153.2092}, {"date": 2022-09-08T16:55:00.000Z, "value": 153.182}, {"date": 2022-09-08T17:00:00.000Z, "value": 152.879}, {"date": 2022-09-08T17:05:00.000Z, "value": 152.97}, {"date": 2022-09-08T17:10:00.000Z, "value": 153.65}, {"date": 2022-09-08T17:15:00.000Z, "value": 153.82}, {"date": 2022-09-08T17:20:00.000Z, "value": 153.77}, {"date": 2022-09-08T17:25:00.000Z, "value": 153.7335}, {"date": 2022-09-08T17:30:00.000Z, "value": 153.67}, {"date": 2022-09-08T17:35:00.000Z, "value": 153.87}, {"date": 2022-09-08T17:40:00.000Z, "value": 154.01}, {"date": 2022-09-08T17:45:00.000Z, "value": 154.0691}, {"date": 2022-09-08T17:50:00.000Z, "value": 153.81}, {"date": 2022-09-08T17:55:00.000Z, "value": 153.55}, {"date": 2022-09-08T18:00:00.000Z, "value": 153.7}, {"date": 2022-09-08T18:05:00.000Z, "value": 153.635}, {"date": 2022-09-08T18:10:00.000Z, "value": 153.52}, {"date": 2022-09-08T18:15:00.000Z, "value": 153.77}, {"date": 2022-09-08T18:20:00.000Z, "value": 153.74}, {"date": 2022-09-08T18:25:00.000Z, "value": 153.79}, {"date": 2022-09-08T18:30:00.000Z, "value": 154.155}, {"date": 2022-09-08T18:35:00.000Z, "value": 154.33}, {"date": 2022-09-08T18:40:00.000Z, "value": 154.09}, {"date": 2022-09-08T18:45:00.000Z, "value": 153.98}, {"date": 2022-09-08T18:50:00.000Z, "value": 154.105}, {"date": 2022-09-08T18:55:00.000Z, "value": 153.8}, {"date": 2022-09-08T19:00:00.000Z, "value": 153.6826}, {"date": 2022-09-08T19:05:00.000Z, "value": 153.635}, {"date": 2022-09-08T19:10:00.000Z, "value": 154}, {"date": 2022-09-08T19:15:00.000Z, "value": 154.0397}, {"date": 2022-09-08T19:20:00.000Z, "value": 154.08}, {"date": 2022-09-08T19:25:00.000Z, "value": 154.11}, {"date": 2022-09-08T19:30:00.000Z, "value": 154.0073}, {"date": 2022-09-08T19:35:00.000Z, "value": 153.98}, {"date": 2022-09-08T19:40:00.000Z, "value": 153.7}, {"date": 2022-09-08T19:45:00.000Z, "value": 153.88}, {"date": 2022-09-08T19:50:00.000Z, "value": 154.25}, {"date": 2022-09-08T19:55:00.000Z, "value": 154.47}, {"date": 2022-09-08T20:00:00.000Z, "value": 154.56}, {"date": 2022-09-08T20:05:00.000Z, "value": 154.37}, {"date": 2022-09-08T20:10:00.000Z, "value": 154.32}, {"date": 2022-09-08T20:15:00.000Z, "value": 154.35}, {"date": 2022-09-08T20:20:00.000Z, "value": 154.44}, {"date": 2022-09-08T20:25:00.000Z, "value": 154.44}, {"date": 2022-09-08T20:30:00.000Z, "value": 154.38}, {"date": 2022-09-08T20:35:00.000Z, "value": 154.43}, {"date": 2022-09-08T20:40:00.000Z, "value": 154.47}, {"date": 2022-09-08T20:45:00.000Z, "value": 154.49}, {"date": 2022-09-08T20:50:00.000Z, "value": 154.4901}, {"date": 2022-09-08T20:55:00.000Z, "value": 154.45}, {"date": 2022-09-08T21:00:00.000Z, "value": 154.5}, {"date": 2022-09-08T21:05:00.000Z, "value": 154.46}, {"date": 2022-09-08T21:10:00.000Z, "value": 154.47}, {"date": 2022-09-08T21:15:00.000Z, "value": 154.45}, {"date": 2022-09-08T21:20:00.000Z, "value": 154.44}, {"date": 2022-09-08T21:25:00.000Z, "value": 154.46}, {"date": 2022-09-08T21:30:00.000Z, "value": 154.4}, {"date": 2022-09-08T21:35:00.000Z, "value": 154.49}, {"date": 2022-09-08T21:40:00.000Z, "value": 154.47}, {"date": 2022-09-08T21:45:00.000Z, "value": 154.48}, {"date": 2022-09-08T21:50:00.000Z, "value": 154.49}, {"date": 2022-09-08T21:55:00.000Z, "value": 154.49}, {"date": 2022-09-08T22:00:00.000Z, "value": 154.45}]
<LineGraph
points={data}
animated={true}
color="#960018"
enablePanGesture={true}
/>
<LineGraph
points={data}
animated={false}
color="#960018"
/>
The output of the static graph is
while for animated graph is
As you can see from the animated graph, the lines on this graph is a little mangled up somehow.
Another dataset also yield to other mangled animatedGraphs
data = [{"date": 2022-08-08T04:00:00.000Z, "value": 164.87}, {"date": 2022-08-09T04:00:00.000Z, "value": 164.92}, {"date": 2022-08-10T04:00:00.000Z, "value": 169.24}, {"date": 2022-08-11T04:00:00.000Z, "value": 168.49}, {"date": 2022-08-12T04:00:00.000Z, "value": 172.1}, {"date": 2022-08-15T04:00:00.000Z, "value": 173.19}, {"date": 2022-08-16T04:00:00.000Z, "value": 173.03}, {"date": 2022-08-17T04:00:00.000Z, "value": 174.55}, {"date": 2022-08-18T04:00:00.000Z, "value": 174.15}, {"date": 2022-08-19T04:00:00.000Z, "value": 171.52}, {"date": 2022-08-22T04:00:00.000Z, "value": 167.57}, {"date": 2022-08-23T04:00:00.000Z, "value": 167.23}, {"date": 2022-08-24T04:00:00.000Z, "value": 167.53}, {"date": 2022-08-25T04:00:00.000Z, "value": 170.03}, {"date": 2022-08-26T04:00:00.000Z, "value": 163.62}, {"date": 2022-08-29T04:00:00.000Z, "value": 161.38}, {"date": 2022-08-30T04:00:00.000Z, "value": 158.91}, {"date": 2022-08-31T04:00:00.000Z, "value": 157.22}, {"date": 2022-09-01T04:00:00.000Z, "value": 157.96}, {"date": 2022-09-02T04:00:00.000Z, "value": 155.81}, {"date": 2022-09-06T04:00:00.000Z, "value": 154.53}, {"date": 2022-09-07T04:00:00.000Z, "value": 155.96}, {"date": 2022-09-08T04:00:00.000Z, "value": 154.46}]
<LineGraph
points={data}
animated={true}
color="#960018"
enablePanGesture={true}
/>
<LineGraph
points={data}
animated={false}
color="#960018"
/>
Static:
Animated:
@chrispader This may be related to the recent PR pushed.
Empty Line Graph
Hello, after I updated to the latest version of the lib I noticed that my charts are not visible anymore
After some investigation, I noticed that it might be related to the way how I build the graph points
For example, if I build points like this (got this function from your examples)
const points = generateSinusGraphData(priceList.length);
/*
[
{
"date": "1970-01-01T00:00:00.093Z",
"value": -0.9482821412699473
},
{
"date": "1970-01-01T00:00:00.094Z",
"value": -0.2452519854676543
},
{
"date": "1970-01-01T00:00:00.095Z",
"value": 0.683261714736121
},
...
]
*/then I get such a Graph
But my own function doesn't show anything, however, data points look good
const points: GraphPoint[] = priceList.map(
({ cryptoPriceInFiat: value, intervalTimestampUtc: date }) => ({
value,
date: new Date(date),
}),
);
/*
[
{
"value": 0.021040000021457672,
"date": "2022-11-10T14:00:00.000Z"
},
{
"value": 0.022228000685572624,
"date": "2022-11-10T14:15:00.000Z"
},
{
"value": 0.021880999207496643,
"date": "2022-11-10T14:30:00.000Z"
},
...
]
*/
This also might be related to the #44
Readme is not clear
1-) Where does usePriceHistory come from?
2-) Is priceHistory an array or an object? What value should it contain?
Thank you
README does not provide enough info for new users
Hello there!
I would love to integrate this library into my app, but I am finding it hard to learn how to use. Perhaps I am missing something, but I feel the current README provides very little information about creating graphs. For example, we see the following code block in the 'usage' section:
`function App() {
const priceHistory = usePriceHistory('ethereum')
return
}`
However, there is no information on what the format should be for the data passed to the points property of LineGraph, or what the 'usePriceHistory' function actually does/returns.
Line graph looks stiff
When we only have some data. line graph looks very stiff. Is there a way to fix this?
Add new values
Hi how can i add new datas to chart realt time or refresh datas
Q: How to render current point data correctly?
Initially, the UI on gestures works pretty well.
But if I try to render the current point price and timestamp I get a laggy thing. Here is an example of code with setState:
const onPointSelected = useCallback(
(p) => {
console.log(p);
const selectedPrice = formatAmount(p.value, fiatCurrency.code as CurrencyName, "fiat");
const timestamp = DateTime.fromSeconds(p.date);
setAmountTitle(selectedPrice);
setTimestamp(timestamp);
},
[fiatCurrency.code],
);As a result with setState I get slow UI:
So the question is how to render it properly and smoothly?
How onGestureStart, onGestureEnd and onPointSelected work?!
Could someone please edit the documentation or explain how to make it work?
I spent 3 days and still can't figure it out. The person who made this package is not cool.
const Test = ({ setPriceTitle }) => {
const currentPrice = 0;
const onGestureStart = useCallback(() => {
hapticFeedback("impactLight");
}, []);
const onGestureEnd = useCallback(() => {
setPriceTitle(currentPrice);
}, [currentPrice, setPriceTitle]);
const onPointSelected = useCallback((p) => {
setPriceTitle(p);
}, []);
return (
<LineGraph
points={somePoints}
color={someColors}
style={someStyles}
animated={true}
onGestureStart={onGestureStart}
onPointSelected={onPointSelected}
onGestureEnd={onGestureEnd}
/>
);
};
export default Test;Example on snack expo
Hi @mrousavy , It would be possible to have the example above: https://snack.expo.dev
Q: Worklet version of 'getYforX' function
Hi! First of all - thanks for your library - it`s really very great solution!
I have a question about 'getYforX' function realisation.
For example in 'react-native-redash', also from William Candillon - this functions is 'worklet'.
Why didn't you use them also in worklet's maner?
Chart doesn't appear when all values are the same
As said in the title, all the values can be the same, and the chart won't show - the cause is simple - in createGraphPath there is an issue in getting y value for certain x
const y = height - ((value - minValue) / (maxValue - minValue))
* innerHeight - graphPadding
so if the value is 5 all the way then it's
height - ((5 - 5) / (5 - 5)) * anything and it will give as NaN
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.