The option 1 that you mentioned does not make good UX just because your legend feels like a label, at first user will not have any clue that it can be selected.
Option 2 will be fine but I would suggest few enhancement that you can add to that:
-> You can make the text of selected legend Bold.
-> Or you can also make UI better like shown below:
-> Use the border and background color as per legend (e.g. green for completed, yellow for pending)
-> If you prefer more customiztion than replace circle radio with the checkbox that you mentioned in option 2.
Design I have showed is particularly for mobile, but I hope you got the hint on how to take advantage of it in your website.