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)

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?

score 0 · Answer 1 · answered Aug 04 '22 at 14:17

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.

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)

1 Answers1