How do you implement show/hide column when clicking on a Data Series Label?

[alexbrylov1994]

How do you implement show/hide column when clicking on a Data Series Label?

[alexbrylov1994]

chartEvent is coming from (chartSelect), make sure row of the event isn't null

If x axis is made of string and other data type, you don't need showHideDate().

But, if your x axis is made of data objects, when you unselect the last visible series, your chart will break and get the Null error. That's why In showHideDate(), I check if you unselect the last series and turn x value data type into string.

showHideLegend(chartEvent) {

    let col;
    let chartData;

    chartData = dataChart;
    col = dataChart.options.selectedColumn;

    // If there's no row value, user clicked the legend.
    if (chartEvent.row === null && (col === chartEvent.column)) {

      // If true, the chart series is currently displayed normally.  Hide it.
      if (chartData.view.columns[col] === col) {
        chartData.view.columns[col] = {

          label: chartData.dataTable[0][col].label,
          type: 'number',

          calc: () => {
            return null;
          }
        };

        chartData.options.colors[col - 1] = '#CCCCCC';

        this.showHideDate(chartData);

      } else {

        this.showHideDate();

        chartData.view.columns[col] = col;
        chartData.options.colors[col - 1] = chartData.options.defaultColors[col - 1];
      }

      chartData.component.draw();

    }
  }

  showHideDate() {
    const size = chart.view.columns.filter(e => typeof e === 'number').length;
    if (size === 1) {

      chartData.view.columns[0] = {

        label: chartData.dataTable[0][0].label,
        type: 'string',

        calc: () => {
          return '';
        }

      };
    } else if (size === 0) {
      chartData.view.columns[0] = 0;
    }
  }