Chart.js: why legend onClick override default action

[elvisbegovic]

Hi,

I use Chart.defaults.global.legend.onClick juste to show in console which legend is clicke but by this way the default action is cancelled... so when I use this onClick function and click on legend... the dataset don't disappears and legend isn't barred/closed off ... even if in onClick function I return event;

thanks in advance

[etimberg]

@istiti The legend config onClick function is used to toggle the bars because it makes it easy to override the default behaviour.

If you want to log data and then do the original action you should call the original onClick function at the end of your new one

[elvisbegovic]

Thx, actually I have:

legend:{
    labels: {
    lineWidth: 1
    },
    onClick:function(e,p){
        console.log(p);
        // ???
    }
}

How calls original onClick here, please?

[etimberg]

Its at Chart.defaults.global.legend.onClick

[elvisbegovic]

not understand not resolved, i'm really sorry, you don't advice me to use code above ? so when I use the pointed syntax like

Chart.defaults.global.legend.onClick = function(){
...
}

this override too the origiinal onClick and the lgend aren't barred/closed off when clicked as default...

idea: I think if we use the configuration in each chart of legend like onClick I think the good think wil be that won't affect the original behavior ... I think the good think will be that to add possibility to add a return state like return evt; to ability to execute default behavior... so I really don't understand how call this default pointed function in my new one ...I have to do this Chart.defaults.global.legend.onClick(evt) or what way ... sorry

[etimberg]

if you're going to replace the original function but still want to run the original, you need to store that somewhere.

var original = Chart.defaults.global.legend.onClick;
Chart.defaults.global.legend.onClick = function(e, legendItem) {
  /* do custom stuff here */
  original.call(this, e, legendItem);
};

I don't think we can hard code the default behaviour into the library. This will make it much harder to overwrite for new chart types. The polar area and doughnut charts already use a different implementation and we don't want to lose that.

[elvisbegovic]

thx this looks nice, I have little error:

Chart.js:5590 Uncaught TypeError: Cannot read property 'datasetIndex' of undefined

when using your code

[etimberg]

Sorry about that. I forgot the second parameter. I updated my previous comment.

[elvisbegovic]

this helps me, thx a lot !! best and beautiful plugins

[giovanniciriello]

@etimberg Using your code I can't override onClick callback. In this code no log appears in console.

var original = Chart.defaults.global.legend.onClick;
Chart.defaults.global.legend.onClick = function(e, legendItem) {
    console.log("hello boy");
    original.call(this, e, legendItem);
};

[jamsshhayd]

I am using a doughnut chart, and when the legend item is clicked, I am getting legendItem undefined always. How should it be resolved?

[matthewhegarty]

@etimberg Thank you for clarifying the correct syntax for overriding the legend handler.
I suggest that the documentation should be updated also.

[jfoclpf]

@giovanniciriello you don't need to override, you can call it directly

'legend' : {
    onClick: function (evt, item) {
        // do something
        Chart.defaults.global.legend.onClick.call(this, evt, item)
     },
    display: true,
    labels: ...

[jfoclpf]

@etimberg just a question: shouldn't be easier to implement something like when the onClick event return true it performs the default action, that is, calls the default function? I think I have seen such behaviour elsewhere. Just for your consideration. Or maybe a paramter in the onClick function like a callback

'legend' : {
    onClick: function (evt, item, default) {
        // do something
        default()
        // do something more
     },
    display: true,
    labels: ...