
Research
PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
react-native-line-chart
Advanced tools
Forked from https://github.com/indiespirit/react-native-chart-kit
Forked from https://github.com/indiespirit/react-native-chart-kit
Same library, just smaller and optimised for the Blockspace.ch cryptocurrency App
yarn add react-native-line-chart
import { LineChart } from 'react-native-line-chart'
<View>
<Text>
Bezier Line Chart
</Text>
<LineChart
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100
]
}]
}}
width={Dimensions.get('window').width} // from react-native
height={220}
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#fb8c00',
backgroundGradientTo: '#ffa726',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
</View>
Define a chart style object with following properies as such:
const chartConfig = {
backgroundGradientFrom: '#1E2923',
backgroundGradientTo: '#08130D',
color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`
}
Property | Type | Description |
---|---|---|
backgroundGradientFrom | string | Defines the first color in the linear gradient of a chart's background |
backgroundGradientTo | string | Defines the second color in the linear gradient of a chart's background |
color | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart |
To render a responsive chart, use Dimensions
react-native library to get the width of the screen of your device like such
import { Dimensions } from 'react-native'
const screenWidth = Dimensions.get('window').width
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
data: [ 20, 45, 28, 80, 99, 43 ]
}]
}
<LineChart
data={data}
width={screenWidth}
height={220}
chartConfig={chartConfig}
/>
Property | Type | Description |
---|---|---|
data | Object | Data for the chart - see example above |
width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |
height | Number | Height of the chart |
chartConfig | Object | Configuration object for the chart, see example config object above |
<LineChart
data={data}
width={screenWidth}
height={220}
chartConfig={chartConfig}
bezier
/>
Property | Type | Description |
---|---|---|
bezier | boolean | Add this prop to make the line chart smooth and curvy |
Every charts also accepts style
props, which will be applied to parent svg
or View
component of each chart.
Renders background horizontal lines like in the Line Chart and Bar Chart. Takes a config object with following properties:
{
// width of your chart
width: Number,
// height of your chart
height: Number,
// how many lines to render
count: Number,
// top padding from the chart top edge
paddingTop: Number
}
Render background vertical lines. Takes a config object with following properties:
{
// data needed to calculate the number of lines to render
data: Array,
// width of your chart
width: Number,
// height of your chart
height: Number,
paddingTop: Number,
paddingRight: Number
}
Render definitions of background and shadow gradients
{
// width of your chart
width: Number,
// height of your chart
height: Number,
// first color of background gradient
backgroundGradientFrom: String,
// second color of background gradient
backgroundGradientTo: String
}
This library is built on top of the following open-source projects:
See the contribution guide and join the contributors!
FAQs
Forked from https://github.com/indiespirit/react-native-chart-kit
The npm package react-native-line-chart receives a total of 19 weekly downloads. As such, react-native-line-chart popularity was classified as not popular.
We found that react-native-line-chart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.