0

I'm trying to make the labels on a chart tabbable. In this implementation, I'm using react-chartjs-2. However, the configuration options object remains standard to chartjs.

Example code: 

    const options = {
        legend: {
            onHover: (e) => {
                console.log(e.target); // this is the entire legend, not individual labels
            },
            labels: {
                onHover: (e) => { 
                /* doesn't work; trying to see if have access to e.target even to do DOM manipulation... */
                    console.log(e.target); // doesn't fire
                }
            }
        }
    }

Interestingly, clicking on these labels filters the display of that dataset, I just need a way to make then tabbable with the enter key as well as being clickable.

I have searched the chartjs documentation, but cannot find a way to add hover and focus events, or enable focus-ability of the labels (Fall 2014 to Fall 2018 in screenshot).

enter image description here

curtybear
  • 1,458
  • 2
  • 20
  • 39

1 Answers1

-1

I think by specifying just position you will get result.

options: {
    legend: {
        position: 'top'
    },
}
Derk Jan Speelman
  • 11,291
  • 4
  • 29
  • 45
sachind
  • 387
  • 5
  • 8
  • I think by specifying just position you will get result. – sachind Mar 22 '19 at 06:17
  • I editted your answer because it was flagged as low quality. Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) before answering more questions. – Derk Jan Speelman Mar 22 '19 at 07:17
  • Thanks, but this only adjusts the position of the legend. The labels are still not selectable (do not receive focus) using the tab key. – curtybear Mar 24 '19 at 20:28