Chartjs-Is there a way to show 2 lines in 1 label on Chart Js in Javascript?

by

0👍

✅

After a lot of headache, what I did is hide the second values legend and add on click event to each one that when u click one of then it clicks the other one and it works.

    plugins: {
                        legend: {
                            labels: {
                                filter: function(legendItem, data) {
                                        if (legendItem.datasetIndex % 2 === 0){
                                            return true;
                                        }
                                        else{
                                            return false;
                                        }
                                },
                            },
                            onClick: newLegendClickHandler,
                        },

This hides the legend of even indexes, since i running them on pairs i just gonna hide the second and show the first.

The on click event goes like this:

                const newLegendClickHandler = function (e, legendItem, legend) {
                var index = parseInt(legendItem.datasetIndex);
                const type = legend.chart.config.type;
                
                    var index2 = adjustNumber(index);

                    function adjustNumber(index){
                        if (index % 2 === 0) {
                            index2= index + 1
                            return index2;
                          } else {
                            index2 = index - 1
                            return index2 ;
                          }
                    }

                    let ci = legend.chart;
                    [
                        ci.getDatasetMeta(index),
                        ci.getDatasetMeta(index2)
                    ].forEach(function(meta) {
                        meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
                    });

                    ci.update();

            };

Again, this only works because the data Im getting is correctly formatted and the first object goes with the second.

Leave a comment