title: Filtering labels to show user from Chart.js
body: <p>I'm working on a Chart.js project, On it, I will have a bunch of data. If the user wants to see a specific date ex:(10/10/2019), I would like to get all the data from that specific date, show him, and when he clears the input it will turn back to its normal state. At the moment I don't have any idea how to do it, I looked into searching for chart labels, but I didn't have success.
  <a href="https://i.stack.imgur.com/XiJey.png" rel="nofollow noreferrer">Here</a> is an image of my chart. </p>
  
  <p>This is my button method:</p>
  
  <pre><code> &lt;div class="chart1"&gt;
        &lt;canvas id="mychart1" &gt;&lt;/canvas&gt;
        &lt;form method="post"&gt;
          &lt;p class="datafilter"&gt;Filtrar data:&lt;input type="date" id="datafilter"&gt;
          &lt;button type="submit" id="subfilt"&gt;FILTRAR&lt;/button&gt;&lt;/p&gt;
        &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This is my chart.js:</p>
  
  <pre><code>&lt;script&gt;
      chartIt();
  
      async function chartIt(){
        var lbl = [&lt;?php echo $labels; ?&gt;];
        var ctx1 = document.getElementById('mychart1');
  
        var myLineChart = new Chart(ctx1, {
            type: 'line', 
            data: {
              labels: lbl,
              datasets: [
                {
                  label: "Corrente 1",
                  data: [&lt;?php echo $datacor1;?&gt;],
                  borderWidht: 6,
                  borderColor: 'red',
                  backgroundColor: 'transparent'
                },
                {
                  label: "Corrente 2",
                  data: [&lt;?php echo $datacor2; ?&gt;],
                  borderWidht: 6,
                  borderColor: 'blue',
                  backgroundColor: 'transparent'
                },
                {
                  label: "Corrente 3",
                  data: [&lt;?php echo $datacor3; ?&gt;],
                  borderWidht: 6,
                  borderColor: 'green',
                  backgroundColor: 'transparent'
                },
                {
                  label: "Corrente Total",
                  data: [&lt;?php echo $datatotcor; ?&gt;],
                  borderWidht: 6,
                  borderColor: 'black',
                  backgroundColor: 'transparent'
                },
              ]            
            },
            plugins: [
  
            ],
            options: {
              scales: {
                yAxes: [{
                  ticks: {
                    beginAtZero: true
                  }
                }],
                xAxes: [{
                  gridLines: {
                    display: false
                  }
                }]
              },
  
              title: {
                display: true,
                fontSize: 20,
                text: "Gráfico das Correntes"
              },
  
              labels: {
                fontStyle: "bold",
              },
  
              layout: {
                padding: {
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0
                }
              },
              tooltips: {
                enabled: true,
                mode: 'single',
                responsive: true,
                backgroundColor: 'black',
                titleFontFamily: "'Arial'",
                titleFontSize: 14,
                titleFontStyle: 'bold',
                titleAlign: 'center',
                titleSpacing: 4,
                titleMarginBottom: 10,
                bodyFontFamily: "'Mukta'",
                bodyFontSize: 14,
                borderWidth: 2,
                borderColor: 'grey',
                callbacks:{
                  title: function(tooltipItem, data) {
                      return data.labels[tooltipItem[0].index];
                  },
                  afterTitle: function(tooltipItem, data) {
                    var date = &lt;?php echo json_encode($tempo) ?&gt;
  
                    return date[tooltipItem[0]['index']]; 
                  },
                  label: function(tooltipItem, data) {
                        var label = data.datasets[tooltipItem.datasetIndex].label || '';                  
                        if (label) {
                            label += ': ';
                        }
                        label += (tooltipItem.yLabel)+"A";                  
                        return label;
                  }
                }
              },
              aspectRatio: 1,
              maintainAspectRatio: false
            }
        });
      }
  </code></pre>