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
๐ Beautiful, high-performance Graphs and Charts for React Native built with Skia
Home Page: https://margelo.io
License: MIT License
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?
Hi @mrousavy , It would be possible to have the example above: https://snack.expo.dev
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} />
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 main
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
Hi how can i add new datas to chart realt time or refresh datas
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,
When we only have some data. line graph looks very stiff. Is there a way to fix this?
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!
This is not supporting multiple lines in a single chart.
Thanks for this module, animation works very well!
Can you also add an AxisLabel
component, that you mention in a README file?
Looks cool. But can it be scrollable instead of period change?
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>
Hi @mrousavy , It would be possible to implement the possibility of having tick marks as seen in the images.
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?
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}
/>
</>)
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?
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?
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;
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.
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?
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"
/>
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
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.
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
Shopify/react-native-skia@2f45037
useDerivedValue
should be changed to useComputedValue
.
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.
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?
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.
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
I've followed by example project but got dot on line graph not follow on the line
here is video
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
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"
/>
@chrispader This may be related to the recent PR pushed.
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
},
...
]
*/
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
1-) Where does usePriceHistory come from?
2-) Is priceHistory an array or an object? What value should it contain?
Thank you
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?
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?
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.
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.
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],
],
},
},
},
}
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
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
Will the library be supported?
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.