I would like to customize my legend to replace the current behavior with check boxes instead.

However, in the ChartOptions, there is no more legendCallback function to call in order to override the default behavior, and so the Html. Seems legit since it was changed after version 2.1 of chartjs. Here is my current ChartOptions :

interface ChartOptions {
responsive?: boolean;
responsiveAnimationDuration?: number;
aspectRatio?: number;
maintainAspectRatio?: boolean;
events?: string;
onHover?(this: Chart, event: MouseEvent, activeElements: Array<{}>): any;
onClick?(event?: MouseEvent, activeElements?: Array<{}>): any;
onResize?(this: Chart, newSize: ChartSize): void;
title?: ChartTitleOptions;
legend?: ChartLegendOptions;
tooltips?: ChartTooltipOptions;
hover?: ChartHoverOptions;
animation?: ChartAnimationOptions;
elements?: ChartElementsOptions;
layout?: ChartLayoutOptions;
scales?: ChartScales;
showLines?: boolean;
spanGaps?: boolean;
cutoutPercentage?: number;
circumference?: number;
rotation?: number;
devicePixelRatio?: number;
// Plugins can require any options
plugins?: { [pluginId: string]: any };
}


Then I saw there were new plugin features in order to customize the charts here. But I don't know how to get it working on my chart.

If you have some example or any idea, don't hesitate to share !

Thanks.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.