Cannot access customdata array

[AyoCodess]

I can access customdata without an issue if customdata is not an array, hovertemplate formats the x points according to the 1st function correctly.

customdata: d.x.map((x) => {
          const years = Math.floor(x);
          const months = Math.floor(12 * (x % 1));
          if (years === 0) return `${months}m`;
          if (months === 0) return `${years}y`;
          return `${years}y ${months}m`;
        }),

        hovertemplate: `<b>${eyeNames[i]}</b><br>
            <i>Risk</i>: <br>
            <i>Risk</i>: %{y:.2p}<br>
            <i>Time</i>: %{customdata}<extra></extra>`,
      }));

To add another function to customdata, according to the documentation i need to convert customdata into an array, which i have done, but the hovertemplate no longer picks up customdata.

     customdata: [
          d.x.map((x) => {
            const years = Math.floor(x);
            const months = Math.floor(12 * (x % 1));
            if (years === 0) return `${months}m`;
            if (months === 0) return `${years}y`;
            return `${years}y ${months}m`;
          }),
          d.y.map((y) => {
            let p = y.toFixed(2);
            if (inverse1 === 0) return p;
            if (inverse1 === 1) {
              p = null;
            }
            return p;
          })
        ],

        hovertemplate: `<b>${eyeNames[i]}</b><br>
            <i>Risk</i>: %{customdata[1]}<br>
            <i>Risk</i>: %{y:.2p}<br>
            <i>Time</i>: %{customdata[0]}<extra></extra>`,
      }));

In hovertemplate if i write %{fullData.customedata} it picks up the array, but the functions map out every point instead of the single point hovered on the graph.

hovertemplate: `<b>${eyeNames[i]}</b><br> <i>Risk</i>: %{fullData.customdata[1]}<br> <i>Risk</i>: %{y:.2p}<br> <i>Time</i>: %{fullData.customdata[0]}<extra></extra>`, }));

What is the correct syntax here to access the customdata array and have the functions manipulate the hovered point on the graphs only, like in the first image, with the time variable. Thanks.

[seanwessmith]

@AyoCodess how do you hover two lines at once?

[AyoCodess]

@AyoCodess how do you hover two lines at once?

In the layout object add "hovermode: 'x'

 const layout = {
    autoSize: true,
    dragmode: false,
    showlegend: false,
    title: '',
    hovermode: 'x',
    xaxis: {
      title: 'Years since first appointment',
      standoff: 50,
      titlefont: {
        size: 22, // - not in use, set in index.css
        color: 'black',
      },
      ```

[seanwessmith]

Thank you. That helps but it only shows labels for "one lane". Any idea on how to do that for all lanes?

[govindthakur25]

@AyoCodess may be because you are not dealing with a one-dimensional array, but multi-dimension.

customdata: [
          d.x.map((x) => {
            const years = Math.floor(x);
            const months = Math.floor(12 * (x % 1));
            if (years === 0) return `${months}m`;
            if (months === 0) return `${years}y`;
            return `${years}y ${months}m`;
          }),
          d.y.map((y) => {
            let p = y.toFixed(2);
            if (inverse1 === 0) return p;
            if (inverse1 === 1) {
              p = null;
            }
            return p;
          })
        ],

is translating to:

customdata: [[d.x], [d.y]],

Hence, in order to access it, you might try with:

<i>Risk</i>: %{customdata[1][someVariable]}<br>,
<i>Risk</i>: %{customdata[0][someVariable]}<br>,

In the above snippet, someVariable can be your i (not sure), or some other variable that you might derive from your business logic.