toggleShape not defined on onclick for scatter chart.

[lgardner-condati]

Description

Attempting to implement onclick functions for billboard charts. I have it working for everything except bubble and scatter charts. Below examples are of scatter charts.

Originally believed #1752 might be my problem as our platform also resizes. However, upgrading to 2.1.4 did not fix the problem.

I tracked the error back to line 516 of src/ChartInternal/interactions/eventrect.ts
"TypeError: e.toggleShape is not a function" is the error output.

Steps to check or reproduce

I was unable to reproduce in the playground on observable. Please let me know anyway I might provide better reproduction steps.

var bbchart = bb.generate({
  "point": {
    "r": 10
  },
  "chartType": "billboard",
  "axis": {
    "x": {
      "label": "Session",
      "tick": {
        "fit": false
      }
    },
    "y": {
      "label": "Transactions",
      "tick": {}
    }
  },
  "tooltip": {},
  "data": {
    "names": {
      "TRANSACTIONS": "Transactions",
      "SESSIONS": "Session"
    },
    "json": [
      {
        "TRANSACTIONS": 0,
        "SESSIONS": 0
      },
      {
        "TRANSACTIONS": 3354,
        "SESSIONS": 26011
      },
      {
        "TRANSACTIONS": 499,
        "SESSIONS": 49810
      },
      {
        "TRANSACTIONS": 3206,
        "SESSIONS": 221198
      },
      {
        "TRANSACTIONS": 22822,
        "SESSIONS": 259192
      },
      {
        "TRANSACTIONS": 21657,
        "SESSIONS": 326251
      },
      {
        "TRANSACTIONS": 36920,
        "SESSIONS": 1030432
      },
      {
        "TRANSACTIONS": 53345,
        "SESSIONS": 1276156
      },
      {
        "TRANSACTIONS": 92399,
        "SESSIONS": 1885959
      },
      {
        "TRANSACTIONS": 133211,
        "SESSIONS": 3449525
      }
    ],
    "type": "scatter",
    "keys": {
      "x": "SESSIONS",
      "value": [
        "TRANSACTIONS"
      ]
    }
  },
  "chart": {
    "title": "Transactions x Session",
    "info": "January 01, 2020 to November 23, 2020"
  },
  "inCDA": true,
  "bindTo": "#chart_9xkm4m5zvov",
  "dashboardID": "rlj2acxu1xkhwrx7f2",
  "bindto": "#chart_9xkm4m5zvov",
  "color": {
    "pattern": [
      " #56a5bf",
      " #f2763d",
      " #8347cc",
      " #4cd97c",
      " #699bbf",
      " #d9d94c",
      " #30c2f2",
      " #d94cd4",
      " #bf5656",
      " #61f279",
      " #6cabd9",
      " #d9c84c",
      " #9573bf",
      " #91bf86",
      " #4c6fd9",
      " #56bf72",
      " #d96d4c",
      " #7dd94c",
      " #f26db4",
      " #babf56",
      " #8e3df2",
      " #bf7a73",
      " #73b9bf",
      " #4cb6d9",
      " #bf56bb"
    ]
  },
  "preserveaspectratio": true,
  "firstDraw": true
});

[lgardner-condati]

I see I forgot to mention that the $$ in $$.toggleShape(this, closest, closest.index); is defined as the circle clicked however it does not have a toggleShape attribute to be called.

Could a possible fix be to make the toggle Shape optional?

[netil]

Hi @lgardner-condati, thanks for the report.

The issue is related with the issue #1619, where not covered for this issue.