How to show/hide data labels of a certain y-axis for a line graph (using multiple y-axis, one on the left, another on the right) - charts

Question

I am using chartjs 2.9.4. I am trying to add the second y-axis on the right. As you can see below, I added the second y-axis 'B' that is positioned on the right.
var myDataSets = [
{% for key, value in mean_matrix_dic.items %}
{
yAxisID: 'A',
label: [{% for key2, val in value.items %}{% if forloop.first %}'{{ key }}',{% endif %}{% endfor %}],
backgroundColor: fixedColors({{ forloop.counter0 }}),
borderColor: fixedColors({{ forloop.counter0 }}),
borderWidth: 3.5,
data: [{% for key2, val in value.items %}'{{ val }}',{% endfor %}],
fill: false,
lineTension: 0,
tension: 0.0
},
{
yAxisID: 'B',
label: [{% for key2, val in value.items %}{% if forloop.first %}'{{ key }}',{% endif %}{% endfor %}],
backgroundColor: fixedColors({{ forloop.counter0 }}),
borderColor: fixedColors({{ forloop.counter0 }}),
borderWidth: 3.5,
data: [{% for key2, val in value.items %}'{{ val }}',{% endfor %}],
fill: false,
lineTension: 0,
tension: 0.0,
},
{% endfor %}
];
var estimatedMeansLineChart = new Chart(chx, {
type: 'line',
data: {
labels: [{% for var_2 in vars_2 %}'{{ var_2 }}',{% endfor %}],
datasets:myDataSets,//datasets
},//data
options: {
responsive: true,
title: {
display: true,
text: 'Estimated Marginal Means of {{ dep_var }}'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
x: {
display: true,
scaleLabel: {
display: true,
labelString: '{{ ind2 }}'
}
},
yAxes: [{
id: 'A',
position: 'left',
display: true,
scaleLabel: {
display: true,
labelString: 'Estimated Marginal Means'
}
},
{
id: 'B',
position: 'right',
display: true,
scaleLabel: {
display: false,
labelString: 'Estimated Marginal Means'
}
}]
}
}//options
});
I get the following output when I run it:
My question is that how can I get rid of those additional data labels and have only one? E.g., one of the red box, one of the blue box and one of the black box. Since I added an additional y-axis on the right, it automatically added those data labels too.
To hide the data labels, I know that I should use the legend property
options: {
legend: {
display: false
},
......
......
......
}
However, when I use it, all data labels disappears. I only want to show the data labels of the left y-axis 'A' and hide the data labels of the second one (the right y-axis 'B').
Any suggestions?

Answer 1

Yeah, I think I found the solution here.
Basically, I needed add the filter property:
....
....
options: {
legend: {
labels: {
filter: function(item, chart) {
return !item.text.includes('_temp_xyz_abc');
}
},
},
....
....
....
The '_temp_xyz_abc' can be seen here:
var myDataSets = [
{% for key, value in mean_matrix_dic.items %}
{
yAxisID: 'A',
label: [{% for key2, val in value.items %}{% if forloop.first %}'{{ key }}',{% endif %}{% endfor %}],
backgroundColor: fixedColors({{ forloop.counter0 }}),
borderColor: fixedColors({{ forloop.counter0 }}),
borderWidth: 3.5,
data: [{% for key2, val in value.items %}'{{ val }}',{% endfor %}],
fill: false,
lineTension: 0,
tension: 0.0,
},
{
yAxisID: 'B',
label: [{% for key2, val in value.items %}{% if forloop.first %}'_temp_xyz_abc',{% endif %}{% endfor %}],
backgroundColor: fixedColors({{ forloop.counter0 }}),
borderColor: fixedColors({{ forloop.counter0 }}),
borderWidth: 3.5,
data: [{% for key2, val in value.items %}'{{ val }}',{% endfor %}],
fill: false,
lineTension: 0,
tension: 0.0,
},
{% endfor %}
];
And it worked as you can see below.