Chart.js как динамически скрывать осиY?

Question

Мне надо скрыть не используемые осиY когда выключаю связанные с ними labelы. Пробую display: 'auto', но почему то не работает. Подскажите правильный подход?

Код:

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [1, 1, 1, 1, 0]
    },
    {
      label: 'C',
      yAxisID: 'C',
      data: [150, 101, 105, 10, 99]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
        display: 'auto'
      }, {
        id: 'B',
        type: 'linear',
        position: 'left',
        display: 'auto',
        gridLines: {
          display : false
        },
      },
       {
        id: 'C',
        type: 'linear',
        position: 'left',
        display: 'auto',
        gridLines: {
          display : false
        },
      }]
    }
  }
});

Пример на jsfiddle: https://jsfiddle.net/pfykaxL3/43/

Answer 1

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem, attr) {
    var index = legendItem.datasetIndex;
    var ci = this.chart;
    var meta = ci.getDatasetMeta(index);

    // See controller.isDatasetVisible comment
    meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
    
    var axisId = ci.data.datasets[index].yAxisID;
    
    console.log(axisId, meta.hidden);
    
    ci.options.scales.yAxes.forEach(function(yAxis) {
      yAxis.display = yAxis.id === axisId ? !meta.hidden : yAxis.display;
    });

    ci.update();
};

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'Aaaaa',
      yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [1, 1, 1, 1, 0]
    },
    {
      label: 'C',
      yAxisID: 'C',
      data: [150, 101, 105, 10, 99]
    }]
  },
  options: {
    legend: {
      onClick: newLegendClickHandler
    },
    scales: {
      yAxes: [ {
        id: 'A',
        type: 'linear',
        position: 'right',
        display: true,
        
      }, {
        id: 'B',
        type: 'linear',
        position: 'left',
        display: 'auto',
      },
       {
        id: 'C',
        type: 'linear',
        position: 'left',
        display: 'auto',
      }]
    }
  }
});

БЛОГ НА HUSL

Chart.js как динамически скрывать осиY?

Ответы (1 шт):