title: How to filter react-chartjs-2
body: <p>I am using react-chartjs-2 in my project, and I am creating a grouped stacked bar chart with it, to remove duplicate labels I have created a custom <code>generateLabels</code> function, but the problem with custom <code>generateLabels</code> function is that when I click on chart legend (ie. Cinema) it only updates the right side (taller) chart and the left side (smaller) chart doesn't update. I know that there is <code>onClick</code> function but I couldn't find how to use it: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>onClick: (e, legendItem) =&gt; {
          let i = legendItem.datasetIndex;
          let ci = chRef.current.chartInstance;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;Bar data={data} width={100} height={50} options={options} ref={chRef} /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any solutions for this?
  I want both charts (taller and smaller) to be updated.
  I have highlighted the bar chart that updates in this image:
  <a href="https://i.stack.imgur.com/dSHK5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dSHK5.jpg" alt="t"></a></p>
  
  <p>Here is my code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useRef } from "react";
  import { Bar } from "react-chartjs-2";
  
  const mocked_data = {
    labels: ["Brand 1", "Brand 2", "Brand 3", "Brand 4", "Brand 5"],
    spend_per_channel: {
      spends: [
        {
          label: "Cinema",
          data: [56, 23, 55, 56, 57]
        },
        {
          label: "Retails",
          data: [22, 17, 32, 47, 62]
        },
        {
          label: "Fashion",
          data: [46, 73, 25, 76, 27]
        },
        {
          label: "Oil",
          data: [26, 40, 80, 50, 62]
        },
        {
          label: "Gas",
          data: [36, 13, 35, 46, 67]
        }
      ],
      sales: [
        {
          label: "Cinema",
          data: [156, 123, 155, 56, 157]
        },
        {
          label: "Retail",
          data: [122, 117, 132, 147, 162]
        },
        {
          label: "Fashion",
          data: [416, 173, 125, 176, 127]
        },
        {
          label: "Oil",
          data: [126, 135, 180, 100, 86]
        },
        {
          label: "Gas",
          data: [136, 113, 135, 146, 167]
        }
      ]
    }
  };
  
  const MyChart = () =&gt; {
    const chRef = useRef(null);
  
    const CHART_COLORS = [
      "#e35b2c",
      "#e77235",
      "#eb8a40",
      "#f0a04b",
      "#f5b858",
      "#f9cf63",
      "#fde76e",
      "#fced86",
      "#ffffb7",
      "#fefeeb"
    ];
  
    const spendsdata = mocked_data.spend_per_channel.spends.map(
      (spend, index) =&gt; {
        return {
          label: spend.label,
          backgroundColor: CHART_COLORS[index],
          data: spend.data,
          stack: 1
        };
      }
    );
  
    const salesdata = mocked_data.spend_per_channel.sales.map((sale, index) =&gt; {
      return {
        label: sale.label,
        backgroundColor: CHART_COLORS[index],
        data: sale.data,
        stack: 2
      };
    });
  
    const newdataset = [spendsdata, salesdata];
    const spnedperchanneldata = newdataset.flat();
  
    const data = {
      labels: ["Brand 1", "Brand 2", "Brand 3", "Brand 4", "Brand 5"],
      datasets: spnedperchanneldata
    };
  
    const options = {
      legend: {
        position: "bottom",
        labels: {
          generateLabels: function(chart) {
            return Chart.defaults.global.legend.labels.generateLabels
              .apply(this, [chart])
              .filter(function(item, i) {
                return i &gt; 4;
              });
          },
          boxWidth: 10,
          usePointStyle: true
        },
        onClick: (e, legendItem) =&gt; {
          let i = legendItem.datasetIndex;
          let ci = chRef.current.chartInstance;
        }
      }
    };
  
    return (
      &lt;&gt;
        &lt;Bar data={data} width={100} height={50} options={options} ref={chRef} /&gt;
      &lt;/&gt;
    );
  };
  
  export default MyChart;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>you can check the live demo in this codesandbox <a href="https://codesandbox.io/s/flamboyant-hypatia-tmy9k" rel="nofollow noreferrer">demo</a></p>
  
  <p>any help please?</p>