Added multi-pointer support to Line and Area Charts
This commit is contained in:
parent
41c5919874
commit
9b76a74fc5
28
App.js
28
App.js
|
@ -670,6 +670,19 @@ const App = () => {
|
|||
{value: -6, label: 'Wed'},
|
||||
{value: 30, label: 'Thu'},
|
||||
];
|
||||
const barData3 = [
|
||||
{
|
||||
value: 15,
|
||||
label: 'Mon',
|
||||
},
|
||||
{value: 10, label: 'Tue'},
|
||||
{value: -3, label: 'Wed'},
|
||||
{value: 20, label: 'Thu'},
|
||||
{value: -6, label: 'Wed'},
|
||||
{value: 20, label: 'Thu'},
|
||||
{value: -6, label: 'Wed'},
|
||||
{value: 20, label: 'Thu'},
|
||||
];
|
||||
|
||||
const sdata = [
|
||||
{
|
||||
|
@ -1229,7 +1242,13 @@ const App = () => {
|
|||
<LineChart
|
||||
// width={200}
|
||||
// height={300}
|
||||
pointerConfig={{}}
|
||||
pointerConfig={{
|
||||
activatePointersOnLongPress: true,
|
||||
pointerColor: 'green',
|
||||
pointer3Color: 'red',
|
||||
pointer2Color: 'orange',
|
||||
hidePointer2: true,
|
||||
}}
|
||||
// isAnimated
|
||||
// rotateLabel
|
||||
// barWidth={32}
|
||||
|
@ -1240,9 +1259,12 @@ const App = () => {
|
|||
// data2={lineData2}
|
||||
data={barData}
|
||||
data2={barData2}
|
||||
data3={barData3}
|
||||
hideDataPoints
|
||||
color2='red'
|
||||
// curved
|
||||
color2="red"
|
||||
color3="green"
|
||||
thickness3={3}
|
||||
curved
|
||||
// initialSpacing={90}
|
||||
// stackData={stackData}
|
||||
// horizontal
|
||||
|
|
|
@ -276,7 +276,12 @@ type Pointer = {
|
|||
height?: number; // default: 0
|
||||
width?: number; // default: 0
|
||||
radius?: number; // default: 5
|
||||
color?: ColorValue; // default: 'red'
|
||||
pointerColor?: ColorValue; // default: 'red
|
||||
pointer1Color?: ColorValue; // default: 'red
|
||||
pointer2Color?: ColorValue; // default: 'red
|
||||
pointer3Color?: ColorValue; // default: 'red
|
||||
pointer4Color?: ColorValue; // default: 'red
|
||||
pointer5Color?: ColorValue; // default: 'red
|
||||
pointerComponent?: Function; // default: null
|
||||
showPointerStrip?: boolean; // default: true
|
||||
pointerStripWidth?: number; // default: containerHeight
|
||||
|
@ -290,6 +295,11 @@ type Pointer = {
|
|||
pointerVanishDelay?: number; // default: 150
|
||||
activatePointersOnLongPress?: boolean; // default: false
|
||||
activatePointersDelay?: number; // default: 150
|
||||
hidePointer1?: boolean; // default: false
|
||||
hidePointer2?: boolean; // default: false
|
||||
hidePointer3?: boolean; // default: false
|
||||
hidePointer4?: boolean; // default: false
|
||||
hidePointer5?: boolean; // default: false
|
||||
};
|
||||
```
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-native-gifted-charts",
|
||||
"version": "1.2.4",
|
||||
"version": "1.2.5",
|
||||
"description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
|
||||
"main": "src/index.tsx",
|
||||
"files": [
|
||||
|
|
Loading…
Reference in New Issue