chart.js custom legend - make legend items clickable to select/deselect data - chart.js

Question

I've created a custom html legend using the legendCallback functionality, but I'm not sure how to make the legend items "clickable" to select/deselect the corresponding dataset.
I'm sure this must be possible, but I'm not sure how to do it.
I did find one potential solution here: https://github.com/chartjs/Chart.js/issues/5070
...but I couldn't figure out how to adapt it (or know if it's possible to adapt that approach) to make it work with my custom legend.
UPDATE: I've got part way there, thanks to this post:
https://github.com/chartjs/Chart.js/issues/2565
... I have updated the codepen and codesnippet with some changes that make the legend items clickable... what I still need help with is getting the legend items to toggle class to/from "hidden".
Here's what I've got:
On codepen
var allData = [5.36, 4.75, 5.64, 5.82, 5.43, 5.34, 7.05, 6.50, 5.91, 5.52, 4.66, 5.30, 4.75, 4.41, 4.66, 5.70, 5.34, 6.52, 5.48, 5.43, 5.55, 6.18, 6.14, 5.45];
var femaleData = [5.33, 5.17, 5.44, 5.44, 5.61, 5.61, 6.67, 6.22, 5.83, 5.61, 4.56, 4.67, 5.61, 4.28, 4.11, 5.83, 5.61, 6.33, 5.50, 5.56, 6.22, 5.94, 5.72, 4.83];
var maleData = [5.38, 4.46, 5.77, 6.08, 5.31, 5.15, 7.31, 6.69, 5.96, 5.46, 4.73, 5.73, 4.15, 4.50, 5.04, 5.62, 5.15, 6.65, 5.46, 5.35, 5.08, 6.35, 6.42, 5.88];
// function1Data is G&A
var function1Data = [5.18, 5.18, 6.09, 5.09, 5.36, 5.09, 6.45, 6.55, 5.36, 5.64, 4.55, 5.09, 4.82, 4.55, 4.91, 6.00, 5.91, 5.64, 5.45, 5.27, 6.27, 5.73, 5.64, 4.82];
// function2Data is Sales & Service
var function2Data = [5.63, 4.50, 5.56, 5.88, 5.63, 6.13, 7.19, 6.75, 5.75, 5.69, 4.88, 5.44, 4.75, 4.44, 4.31, 5.94, 5.06, 6.63, 5.44, 5.75, 5.25, 6.50, 6.50, 5.63];
// function3Data is tech
var function3Data = [5.24, 4.71, 5.41, 6.24, 5.29, 4.76, 7.29, 6.24, 6.41, 5.29, 4.53, 5.29, 4.71, 4.29, 4.82, 5.29, 5.24, 7.00, 5.53, 5.24, 5.35, 6.18, 6.12, 5.71];
// function4Data is dev
var program1Data = [5.08, 4.54, 5.58, 5.58, 5.42, 5.29, 7.13, 6.58, 5.63, 5.54, 4.58, 4.79, 4.88, 4.54, 4.46, 6.04, 5.04, 6.67, 5.75, 5.33, 5.33, 6.46, 5.96, 5.00];
var program2Data = [5.21, 4.58, 5.89, 5.58, 5.42, 5.32, 6.89, 6.53, 5.68, 5.42, 4.58, 5.37, 4.47, 4.32, 4.79, 5.84, 5.32, 6.26, 5.68, 5.47, 5.32, 6.21, 6.16, 5.37];
// service1Data is 0-50
var service1Data = [5.50, 4.58, 5.67, 5.50, 5.50, 5.25, 7.00, 6.75, 5.67, 5.58, 4.92, 5.50, 4.67, 4.33, 5.25, 5.42, 5.33, 6.33, 4.92, 5.50, 5.42, 6.17, 6.17, 5.67];
// service2Data is 51-80
var service2Data = [4.90, 5.20, 5.90, 5.60, 5.40, 5.00, 7.20, 6.10, 5.60, 5.00, 4.30, 5.00, 4.90, 4.50, 4.00, 5.60, 5.90, 6.20, 5.90, 5.10, 5.70, 5.80, 5.80, 4.50];
// service3Data is 81-100
var service3Data = [6.25, 4.42, 5.67, 6.08, 5.00, 5.83, 7.08, 6.42, 6.08, 6.33, 4.50, 5.67, 4.75, 4.25, 4.17, 5.17, 4.83, 6.67, 5.08, 4.92, 5.17, 6.50, 6.58, 5.42];
// service4Data is 101-154
var service4Data = [4.60, 4.90, 5.30, 6.10, 5.90, 5.20, 6.90, 6.70, 6.30, 5.00, 4.90, 4.90, 4.70, 4.60, 5.20, 6.80, 5.40, 6.90, 6.20, 6.30, 6.00, 6.20, 5.90, 6.20];
// role1Data is 0-4
var role1Data = [5.33, 4.67, 5.75, 6.50, 5.17, 4.75, 7.42, 6.75, 6.33, 5.42, 4.50, 6.08, 4.17, 4.50, 4.83, 5.42, 5.08, 6.83, 5.83, 5.17, 5.50, 6.50, 6.58, 6.08];
// role2Data is 5-18
var role2Data = [5.27, 5.09, 5.45, 5.64, 5.64, 6.18, 7.18, 6.27, 5.64, 4.91, 4.82, 5.09, 4.73, 4.36, 4.73, 5.82, 5.91, 6.64, 5.36, 5.45, 5.73, 5.73, 5.73, 5.27];
// role3Data is 19-32
var role3Data = [4.78, 4.67, 6.56, 5.22, 6.44, 4.78, 7.00, 6.78, 5.78, 5.56, 5.22, 4.89, 4.56, 4.11, 4.22, 5.89, 5.22, 5.44, 6.44, 6.78, 6.00, 6.33, 6.22, 5.33];
// role4Data is 33-60
var role4Data = [5.50, 5.00, 5.67, 5.58, 5.25, 5.00, 6.50, 5.83, 5.75, 5.83, 4.58, 5.00, 5.08, 4.75, 4.67, 5.58, 5.58, 6.25, 5.25, 5.25, 5.33, 5.83, 5.75, 5.08];
// data from research for global norms/profiles
// sds realistic high
var norm1Data = [5.7, 5.4, 5.7, 6.0, 4.5, 5.2, 5.5, 5.2, 5.9, 6.2, 4.4, 5.7, 4.5, 6.1, 5.9, 5.6, 5.3, 5.9, 5.2, 4.8, 5.3];
// sds realistic low
var norm2Data = [6.1, 6.2, 4.4, 5.2, 4.7, 6.4, 5.4, 5.2, 5.1, 6.0, 4.5, 5.1, 7.2, 5.9, 6.0, 5.1, 6.7, 5.5, 5.2, 5.1, 5.9];
// sds investigative high
var norm3Data = [5.2, 5.8, 5.4, 5.5, 4.4, 4.8, 6.5, 5.1, 5.4, 5.6, 4.5, 5.3, 5.1, 5.8, 6.5, 5.7, 5.8, 5.8, 5.8, 4.6, 5.2];
// sds investigative low
var norm4Data = [6.5, 6.0, 4.8, 5.4, 4.6, 6.7, 4.7, 5.6, 5.4, 6.7, 4.5, 5.7, 6.7, 5.8, 5.7, 5.1, 6.1, 5.2, 5.0, 5.0, 5.9];
// sds social high
var norm5Data = [6.9, 5.6, 4.4, 6.3, 4.4, 6.9, 5.4, 5.3, 5.8, 6.8, 4.5, 6.6, 5.9, 5.9, 6.2, 4.8, 5.9, 6.4, 4.9, 5.0, 5.0];
// sds social low
var norm6Data = [4.1, 6.4, 6.0, 4.6, 4.8, 3.6, 5.9, 5.0, 4.7, 5.4, 4.5, 4.0, 5.4, 6.3, 5.8, 6.6, 6.1, 5.1, 6.3, 5.0, 6.0];
// sds enterprising high
var norm7Data = [6.7, 5.6, 4.8, 6.9, 4.4, 6.6, 5.2, 5.7, 6.8, 6.9, 4.4, 6.6, 5.3, 6.2, 6.2, 5.1, 5.3, 6.3, 5.0, 5.1, 5.6];
// sds enterprising low
var norm8Data = [4.6, 6.6, 4.8, 4.5, 4.2, 4.4, 5.5, 4.6, 4.2, 5.4, 4.1, 4.1, 6.7, 6.1, 6.4, 5.9, 6.7, 5.7, 6.1, 4.3, 5.7];
// sds conventional high
var norm9Data = [5.8, 5.7, 5.8, 5.5, 5.4, 5.8, 5.4, 5.7, 5.6, 6.1, 5.0, 5.4, 5.4, 5.8, 5.0, 5.5, 6.0, 5.3, 5.4, 5.8, 5.5];
// sds conventional low
var norm10Data = [6.1, 5.8, 4.4, 5.9, 3.9, 5.9, 5.2, 5.4, 5.7, 6.3, 3.9, 5.5, 6.3, 6.0, 6.6, 5.0, 5.8, 6.3, 5.3, 4.4, 5.6];
// corporate
var norm11Data = [6.1, 5.0, 5.5, 5.8, 5.9, 6.5, 7.4, 5.0, 6.0, 5.5, 5.9, 6.1, 5.2, 4.1, 4.7, 5.2, 5.1, 6.0, 5.1, 5.5, 5.1];
// engineers
var norm12Data = [5.3, 5.9, 5.4, 5.6, 5.0, 5.3, 7.8, 4.6, 5.5, 5.5, 4.9, 5.4, 4.8, 5.4, 6.0, 5.5, 5.5, 6.2, 5.9, 5.2, 5.6];
// scientists
var norm13Data = [4.5, 5.4, 4.8, 5.4, 4.6, 4.5, 8.3, 4.8, 5.0, 4.8, 4.3, 5.0, 5.4, 5.1, 6.5, 5.8, 5.0, 6.9, 6.7, 4.9, 5.3];
// emotional expressivity high
var norm14Data = [7.3, 5.8, 4.6, 6.2, 5.2, 7.1, 6.6, 5.6, 5.9, 6.9, 4.3, 6.4, 6.0, 5.4, 6.1, 4.5, 6.0, 6.0, 4.2, 5.0, 5.9];
// emotional expressivity low
var norm15Data = [5.1, 5.8, 5.7, 5.0, 5.5, 5.5, 6.5, 5.7, 4.9, 5.5, 5.3, 5.0, 5.3, 5.9, 5.5, 6.1, 6.0, 5.3, 5.8, 5.3, 5.5];
// emotional sensitivity high
var norm16Data = [6.4, 6.0, 4.5, 5.7, 5.2, 6.9, 6.5, 5.3, 5.6, 6.4, 4.9, 5.3, 5.8, 5.8, 6.2, 5.3, 6.4, 6.1, 5.0, 4.9, 5.6];
// emotional sensitivity low
var norm17Data = [5.2, 5.5, 6.1, 5.1, 5.3, 5.2, 6.3, 5.8, 5.2, 5.7, 5.3, 5.2, 5.1, 5.8, 5.3, 6.1, 5.6, 5.0, 5.6, 5.3, 5.6];
// emotional control high
var norm18Data = [5.4, 5.5, 4.0, 5.7, 5.9, 5.5, 6.6, 5.6, 5.5, 5.9, 4.7, 5.4, 5.7, 5.6, 6.2, 6.2, 5.5, 6.1, 5.6, 5.1, 5.5];
// emotional control low
var norm19Data = [6.1, 5.8, 5.4, 5.4, 5.2, 6.4, 6.4, 5.6, 5.4, 6.1, 5.2, 5.6, 5.6, 5.5, 5.4, 5.3, 6.2, 5.4, 5.2, 5.1, 5.6];
// social expressivity high
var norm20Data = [7.4, 5.4, 4.7, 6.0, 4.9, 7.0, 6.5, 5.6, 5.5, 7.3, 4.5, 6.7, 5.7, 5.2, 5.8, 4.6, 5.8, 6.2, 4.1, 4.9, 5.5];
// social expressivity low
var norm21Data = [4.8, 5.8, 5.9, 4.9, 5.8, 5.2, 6.6, 5.6, 4.9, 5.1, 5.2, 4.8, 5.3, 5.8, 5.5, 6.2, 5.9, 5.1, 6.0, 5.3, 5.6];
// social sensitivity high
var norm22Data = [6.0, 7.0, 5.5, 4.7, 4.9, 6.3, 6.3, 4.6, 4.8, 6.3, 5.0, 4.7, 5.6, 5.7, 5.8, 5.2, 7.1, 5.0, 5.0, 5.3, 6.4];
// social sensitivity low
var norm23Data = [5.8, 4.8, 5.5, 5.7, 5.7, 5.8, 6.6, 6.3, 5.7, 5.9, 5.3, 5.9, 5.4, 5.1, 5.2, 5.6, 5.3, 5.7, 5.4, 5.3, 5.1];
// social control high
var norm24Data = [6.7, 4.8, 4.5, 6.4, 5.9, 6.6, 6.8, 6.2, 6.1, 6.3, 4.9, 6.9, 6.1, 4.7, 5.5, 5.0, 5.3, 6.5, 4.7, 5.3, 5.2];
// social control low
var norm25Data = [5.3, 6.2, 5.9, 4.7, 5.4, 5.4, 6.3, 5.2, 4.7, 5.7, 5.4, 4.8, 5.3, 5.8, 5.6, 5.8, 6.3, 5.0, 5.6, 5.2, 5.8];
// empathy high
var norm26Data = [7.0, 5.1, 4.2, 5.9, 4.3, 6.9, 6.4, 6.1, 5.4, 7.1, 4.5, 6.3, 6.2, 5.0, 6.1, 5.1, 5.8, 6.6, 4.5, 4.7, 5.0];
// empathy low
var norm27Data = [4.6, 7.1, 5.8, 5.0, 4.9, 4.6, 6.0, 4.2, 5.2, 5.5, 4.6, 4.1, 5.2, 6.7, 6.3, 6.1, 6.5, 5.1, 6.1, 5.4, 6.3];
// high psych emotional
var norm28Data = [5.9, 3.7, 5.7, 5.9, 6.0, 5.8, 6.1, 7.2, 5.8, 5.3, 5.9, 6.2, 5.2, 5.2, 4.7, 5.3, 3.6, 5.8, 5.0, 5.7, 4.7];
// high psych social
var norm29Data = [7.1, 4.6, 4.9, 6.8, 5.3, 6.8, 6.2, 6.2, 6.4, 6.3, 5.4, 5.4, 5.6, 5.5, 5.5, 4.5, 4.2, 6.1, 4.6, 5.5, 5.2];
// high psych occupational
var norm30Data = [5.8, 4.5, 5.7, 5.3, 5.8, 6.0, 5.9, 6.5, 5.2, 5.3, 6.0, 5.6, 5.3, 5.2, 5.0, 5.5, 4.6, 5.5, 5.0, 5.4, 5.0];
// self-esteem high
var norm31Data = [6.6, 3.6, 5.3, 6.9, 6.0, 6.6, 4.7, 7.1, 7.1, 5.9, 6.0, 6.8, 5.3, 5.2, 5.1, 5.3, 3.8, 6.0, 4.5, 6.1, 4.2];
// self-esteem low
var norm32Data = [4.9, 6.8, 5.5, 4.9, 5.0, 5.1, 4.2, 4.2, 4.7, 5.3, 5.2, 4.6, 5.5, 6.8, 6.7, 6.0, 6.3, 5.0, 5.9, 5.4, 5.6];
var origin = 5.5;
var factorLabels = [
['Extraversion', 'Introverted • Extroverted'],
['Anxiety', 'Low-Anxiety • High-Anxiety'],
['Tough-Mindedness', 'Receptive • Tough-Minded'],
['Independence', 'Accommodating • Independent'],
['Self-Control', 'Unrestrained • Self-Controlled'],
['Warmth (A)', 'Reserved • Warm'],
['Reasoning (B)', 'Concrete • Absract'],
['Emotional Stability (C)', 'Reactive • Emotionally Stable'],
['Dominance (E)', 'Deferential • Dominant'],
['Liveliness (F)', 'Serious • Lively'],
['Rule-Consciousness (G)', 'Expedient • Rule-Conscious'],
['Social Boldness (H)', 'Shy • Socially Bold'],
['Sensitivity (I)', 'Utilitarian • Sensitive'],
['Vigilance (L)', 'Trusting • Vigilant'],
['Abstractedness (M)', 'Grounded • Abstracted'],
['Privateness', 'Forthright • Private'],
['Apprehension (O)', 'Self-Assured • Apprehensive'],
['Openness to Change (Q1)', 'Traditional • Open to Change'],
['Self-Reliant (Q2)', 'Group-Oriented • Self-Reliant'],
['Perfectionism (Q3)', 'Tolerates Disorder • Perfectionistic'],
['Tension (Q4)', 'Relaxed • Tense'],
['Adjustment', 'Emotionally Fragile', ' • Emotionally Resilient'],
['Leadership', 'Non-Leader • Leader'],
['Creativity', 'Status Quo • Innovative']
];
var factorLabelsResearch = [
['Extraversion', 'Introverted • Extroverted'],
['Anxiety', 'Low-Anxiety • High-Anxiety'],
['Tough-Mindedness', 'Receptive • Tough-Minded'],
['Independence', 'Accommodating • Independent'],
['Self-Control', 'Unrestrained • Self-Controlled'],
['Warmth (A)', 'Reserved • Warm'],
['Reasoning (B)', 'Concrete • Absract'],
['Emotional Stability (C)', 'Reactive • Emotionally Stable'],
['Dominance (E)', 'Deferential • Dominant'],
['Liveliness (F)', 'Serious • Lively'],
['Rule-Consciousness (G)', 'Expedient • Rule-Conscious'],
['Social Boldness (H)', 'Shy • Socially Bold'],
['Sensitivity (I)', 'Utilitarian • Sensitive'],
['Vigilance (L)', 'Trusting • Vigilant'],
['Abstractedness (M)', 'Grounded • Abstracted'],
['Privateness', 'Forthright • Private'],
['Apprehension (O)', 'Self-Assured • Apprehensive'],
['Openness to Change (Q1)', 'Traditional • Open to Change'],
['Self-Reliant (Q2)', 'Group-Oriented • Self-Reliant'],
['Perfectionism (Q3)', 'Tolerates Disorder • Perfectionistic'],
['Tension (Q4)', 'Relaxed • Tense']
];
var factorLabelsThemes = ['Investigative', 'Realistic', 'Enterprising', 'Artistic', 'Conventional', 'Social'];
var factorLabelsLeft = ['Introverted', 'Low Anxiety', 'Receptive', 'Accomodating', 'Unrestrained', 'Reserved', 'Concrete', 'Reactive', 'Deferential', 'Serious', 'Expedient', 'Shy', 'Utilitarian', 'Trusting', 'Grounded', 'Forthright', 'Self-Asured', 'Traditional', 'Group-Oriented', 'Tolerates Disorder', 'Relaxed', 'Emotionally Fragile', 'Non-Leader', 'Status Quo'];
var factorLabelsRight = ['Extroverted', 'High Anxiety', 'Tough-Minded', 'Independent', 'Self-Controlled', 'Warm', 'Abstract', 'Emotionally Stable', 'Dominant', 'Lively', 'Rule-Conscious', 'Socially Bold', 'Sensitive', 'Vigilant', 'Abstracted', 'Private', 'Apprehensive', 'Open to Change', 'Self-Reliant', 'Perfectionistic', 'Tense', 'Emotionally Resilient', 'Leader', 'Innovative'];
var globalProfiles = {
labels: factorLabelsResearch,
datasets: []
};
globalProfiles.datasets.push({
data: role1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(79,143,0,.75)',
label: '0-4'
});
globalProfiles.datasets.push({
data: role2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: '5-18'
});
globalProfiles.datasets.push({
data: role3Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: '19-32'
});
globalProfiles.datasets.push({
data: role4Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: '33-60'
});
globalProfiles.datasets.push({
data: service1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(79,143,0,.75)',
label: '0-50'
});
globalProfiles.datasets.push({
data: service2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: '51-80'
});
globalProfiles.datasets.push({
data: service3Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: '81-100'
});
globalProfiles.datasets.push({
data: service4Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: '101-154'
});
globalProfiles.datasets.push({
data: program1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'green',
label: 'Program 1'
});
globalProfiles.datasets.push({
data: program2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'green',
label: 'Program 2'
});
globalProfiles.datasets.push({
data: function1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'G&A'
});
globalProfiles.datasets.push({
data: function2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Sales & Service'
});
globalProfiles.datasets.push({
data: function3Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'Technology'
});
globalProfiles.datasets.push({
data: femaleData.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'Female'
});
globalProfiles.datasets.push({
data: maleData.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'Male'
});
globalProfiles.datasets.push({
data: allData.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'All'
});
globalProfiles.datasets.push({
data: norm1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.99)',
label: 'High Realistic'
});
globalProfiles.datasets.push({
data: norm2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.35)',
label: 'Low Realistic'
});
globalProfiles.datasets.push({
data: norm3Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'High Investigative'
});
globalProfiles.datasets.push({
data: norm4Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.15)',
label: 'Low Investigative'
});
globalProfiles.datasets.push({
data: norm5Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.99)',
label: 'High Social'
});
globalProfiles.datasets.push({
data: norm6Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.35)',
label: 'Low Social'
});
globalProfiles.datasets.push({
data: norm7Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Enterprising'
});
globalProfiles.datasets.push({
data: norm8Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.15)',
label: 'Low Enterprising'
});
globalProfiles.datasets.push({
data: norm9Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(255,192,0,.99)',
label: 'High Conventional'
});
globalProfiles.datasets.push({
data: norm10Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(255,192,0,.35)',
label: 'Low Conventional'
});
globalProfiles.datasets.push({
data: norm11Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.85)',
label: 'Corporate'
});
globalProfiles.datasets.push({
data: norm12Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.5)',
label: 'Engineers'
});
globalProfiles.datasets.push({
data: norm13Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.25)',
label: 'Scientists'
});
globalProfiles.datasets.push({
data: norm14Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Emotional Expressivity'
});
globalProfiles.datasets.push({
data: norm15Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'Low Emotional Expressivity'
});
globalProfiles.datasets.push({
data: norm16Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Emotional Sensitivity'
});
globalProfiles.datasets.push({
data: norm17Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(79,143,0,.75)',
label: 'Low Emotional Sensitivity'
});
globalProfiles.datasets.push({
data: norm18Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'High Emotional Control'
});
globalProfiles.datasets.push({
data: norm19Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Low Emotional Control'
});
globalProfiles.datasets.push({
data: norm20Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Social Expressivity'
});
globalProfiles.datasets.push({
data: norm21Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(79,143,0,.75)',
label: 'Low Social Expressivity'
});
globalProfiles.datasets.push({
data: norm22Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'High Social Sensitivity'
});
globalProfiles.datasets.push({
data: norm23Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Low Social Sensitivity'
});
globalProfiles.datasets.push({
data: norm24Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Social Control'
});
globalProfiles.datasets.push({
data: norm25Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'green',
label: 'Low Social Control'
});
globalProfiles.datasets.push({
data: norm26Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'green',
label: 'High Empathy'
});
globalProfiles.datasets.push({
data: norm27Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'Low Empathy'
});
globalProfiles.datasets.push({
data: norm28Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'High Psych Emotional'
});
globalProfiles.datasets.push({
data: norm29Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Psych Social'
});
globalProfiles.datasets.push({
data: norm30Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Psych Occupational'
});
globalProfiles.datasets.push({
data: norm31Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'High Self-Esteem'
});
globalProfiles.datasets.push({
data: norm32Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'Low Self-Esteem'
});
updateDataset = function(e, datasetIndex) {
var index = datasetIndex;
var ci = e.view.myGlobalProfiles;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
};
var ctxGlobalProfiles = document.getElementById('global-profiles').getContext('2d');
var myLegendContainer = document.getElementById("chart-legend");
var myGlobalProfiles = new Chart(ctxGlobalProfiles, {
type: 'horizontalBar',
data: globalProfiles,
options: {
elements: {
rectangle: {
borderWidth: 2,
}
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
responsive: true,
legend: {
display: false,
},
legendCallback: function(chart) {
var legendHtml = [];
legendHtml.push('<ul>');
legendHtml.push('<h5>Company Data</h5>');
for (var i = 0; i < 16; i++) {
legendHtml.push('<li onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ')">');
legendHtml.push('<span class="chart-color" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span><span>' + chart.data.datasets[i].label + '</span>');
legendHtml.push('</li>')
}
legendHtml.push('<hr />');
legendHtml.push('<h5>Research Data</h5>');
for (var i = 16; i < chart.data.datasets.length; i++) {
legendHtml.push('<li onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ')">');
legendHtml.push('<span class="chart-color" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span><span>' + chart.data.datasets[i].label + '</span>');
legendHtml.push('</li>')
}
legendHtml.push('</ul>');
return legendHtml.join("");
},
tooltips: {
enabled: true,
backgroundColor: 'rgba(100,190,194,.95)',
bodyFontColor: 'rgba(26,78,125,.99)',
titleFontColor: 'rgba(26,78,125,.99)',
borderColor: 'rgba(26,78,125,.99)',
borderWidth: 1,
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.xLabel + 5.5;
return label;
}
}
},
scales: {
yAxes: [{
display: true,
offsetGridlines: true
}],
xAxes: [{
ticks: {
min: -4.5,
max: 4.5,
callback: function(value, index, values) {
return value + 5.5;
},
display: true
}
}]
},
title: {
display: true,
text: ''
}
}
});
myLegendContainer.innerHTML = myGlobalProfiles.generateLegend();
jQuery('#toggle-profiles').click(function() {
myGlobalProfiles.data.datasets.forEach(function(ds) {
ds.hidden = !ds.hidden;
});
myGlobalProfiles.update();
});
h4 {
text-align: center;
}
ul {
list-style: none;
}
li {
display: inline-block;
padding: 0 10px;
}
li.hidden {
text-decoration: line-through;
}
li span.chart-color {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 5px;
width: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='uk-panel uk-panel-box uk-panel-box-primary'>
<h3>Profiles from Research Data <br />and Company Data</h3>
<div class='uk-panel-box uk-panel-box-secondary uk-margin'>
<h4>The 5 Global & 16 Primary Factors</h4>
<button id='toggle-profiles'>show/hide all</button>
<div id="chart-legend"></div>
<canvas id='global-profiles' height='800'></canvas>
</div>

Answer 1

Jumping off what you've already created, add a click event around each HTML generated legend item, and use that click event to hide indiv. datasets, based on matching conditions.
I configured this in Angular, but the logic is similar.
With the below HTML, I am generating a custom legend which displays each of my labels. When a label is clicked, the hideOneDataset fn is called, passing the value of the legendItem clicked.
<div *ngIf="legendData">
<ul class="my-legend">
<li class="legend-item" *ngFor="let legendItem of legendData" (click)="hideOneDataset($event.target.innerText)">
{{ legendItem.text }}
</li>
</ul>
</div>
Then, I configured the hideOneDataset function to loop through each dataset item and determine if the legendItem from my custom HTML legend === that of the current element's label. If yes, hide it.
hideOneDataset(legendItem) {
// GET each dataset in the chart
this.chartComponent.chart.data.datasets.forEach(ele => {
// IF the custom legend item clicked on equals the label of one of our datapoints, hide that data
if (ele.label === legendItem) {
ele.hidden = !ele.hidden;
}
});
this.chartComponent.update();
}
Hope this helps a bit for anyone who stumbles upon this.