Victory-native: VictoryScatter onClick event not working ?

Created on 7 Sep 2016  路  2Comments  路  Source: FormidableLabs/victory-native

My goal is to display data point attributes when a user touches a datapoint.

  • When I click on a star, it does not not turn blue like it does in the web browser.
  • A console log statement inserted into onClick is not displayed in the debugger.

Am I missing something?

I am using VictoryScatter and referring to this code as a starting point See: Events

      <VictoryScatter
        data={[
          {x: 1, y: 3},
          {x: 2, y: 5},
          {x: 3, y: 4},
          {x: 4, y: 2},
          {x: 5, y: 5}
        ]}
        labels={[
          "a", "b", "c", "d", "e"
        ]}
        size={8}
        symbol={"star"}
        style={{
          data: {
            fill: "gold",
            stroke: "orange",
            strokeWidth: 3
          },
          labels: {
            fill: "none",
            padding: 12
          }
        }}

        events={[{
          target: "data",
          eventHandlers: {
            onClick: () => {
              // Never get here ??
              console.log('VictoryScatter:onClick Pressed!'); debugger;
              return [{
                mutation: (props) => {
                  return  props.style.stroke === "blue" ?
                    null :
                    { style:
                      merge({}, props.style, {
                        stroke: "blue", fill: "cyan"
                      }),
                      symbol: "circle"
                    };
                }
              }];
            }
          }
        }]}
      />

  "dependencies": {
    "react": "15.3.1",
    "react-native": "0.32.1",
    "react-native-svg": "^4.2.1",
    "victory-native": "^0.2.0"
  }

I expected event to fire, then star change to a blue circle like this:
screen shot 2016-09-07 at 4 30 59 pm

Thank you for sharing your work!

-Ed

Most helpful comment

@boygirl resolved on gitter that event name is actually onPress on react native and onClick on react version of Victory. On react native, touching the stars now changes to a yellow circle when touched the first time. They do not change back to a star when touched a second time like the react web example does. Still trying to comprehend the differences. I never see a blue circle and I cannot change back to a star.

Anyway, and most importantly for my use case, how may I access the data point object in the event handler?

All 2 comments

@boygirl resolved on gitter that event name is actually onPress on react native and onClick on react version of Victory. On react native, touching the stars now changes to a yellow circle when touched the first time. They do not change back to a star when touched a second time like the react web example does. Still trying to comprehend the differences. I never see a blue circle and I cannot change back to a star.

Anyway, and most importantly for my use case, how may I access the data point object in the event handler?

@esutton the event handlers are called with the arguments evt, props, eventKey, eventName all primitive components receive datum with props

Was this page helpful?
0 / 5 - 0 ratings