Attach object to Highcharts click event

Question

Moving from D3 to Highcharts and this is eluding me. I have a fairly complex object that contains a clickthrough object which needs to be accessed in a function on a point click in the series. I'm creating the series array with the data and name just fine with a small conversion, but I need to attach this object to the data points as well. No idea how.

Quick example. original data:

[
  {
    "key": "Super Cool Thing",
    "format": ".2f",
    "values": [
      {
        "label": "01",
        "value": 9.5,
        "format": ".2f",
        "order": 0,
        "tooltip": "numerator = 133, denominator = 14",
        "clickthrough": {
          "output_format": "json",
          "metrics": "",
          "options": {
            "columns": [
              {
                "order": 1,
                "display_as": "Brand",
                "format": "{0}",
                "name": "brand",
                "data_type": "string"
              },
              {
                "order": 2,
                "display_as": "Last Submit Time (Month)",
                "format": "%m",
                "name": "last-submit-time-month",
                "data_type": "datetime"
              },
              {
                "order": 3,
                "display_as": "Agent Things",
                "format": "{0}",
                "name": "agent-thing-values",
                "data_type": "string"
              }
            ]
          },
          "cut_y": "brand",
          "type": "",
          "filter": { },
          "cut_x": "last-submit-time-month"
        },
        "metrics": [
          {
            "name": "Agent - Feel Appreciated Mean",
            "slug": "qcustomersatr4-mean"
          }
        ]
      }
    ]
  }
]

run through a (super quick POC) funct:

for(let i = 0; i < data.length; i++){
   var values = [];
    var xcuts = [];

    data[i].values.forEach(val => {
      values.push(val.value);
      xcuts.push(val.label);
    });

    chart.addSeries({
        name: data[i].key,
        data: values
    })

    chart.xAxis[0].setCategories(xcuts);
 }

and this all works fine. But I need the clickthrough object so I can do something like:

plotOptions: {
      series: {
        allowPointSelect: true,
        cursor: 'pointer',
            point: {
                events: {
                    click: function (event) {
                        console.log('CLICKTHROUGH DATA HERE');
                        console.log(event.point);
                    }
                }
            }
      },
    },

I'm unsure how to format the series data to include additional data that's accessible in an event function later down the line. I currently do this via d3 and it's fine, but am struggling with the Highcharts method to do the same. It seems I can't just add whatever I want to the series or data, so is this possible?

Answer 1

Have it. I have to set the y value explicitly and then I can add whatever else which is then avail in the event.

example:

    data[i].values.forEach(val => {
      values.push({link: val.clickthrough, y:val.value}); 
      xcuts.push(val.label);
    });

    chart.addSeries({
        name: data[i].key,
      data: values
    })