how to highlight bar in ChartJS with onkeyup Input

Question

I am trying to make a 'searchable' bar graph in ChartJS, where the user can dynamically search in an input field (onkeyup) for names of x-axis labels. When that label or labels are 'found', that bar (or those bars) are highlighted a different color.

I am not sure how to link the 'input' text and the function that highlights the bar.

Fiddle in progress https://jsfiddle.net/hironymous_vis/mk0sLfgt/9/

Currently, the search does not work because the input does not link to the function that highlights the bar.

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">

and

function highlightBar(s) {
// this clears off any tooltip highlights
chart1.update();
chart1.activeElements = [];

// reset any coloring because of selection
chart1.datasets.forEach(function(dataset) {
    dataset.bars.forEach(function (bar) {
        if (bar.selected) {
            bar.fillColor = bar.selected.fillColor;
            bar.strokeColor = bar.selected.strokeColor;
            delete bar.selected;
        }
    })
});

var index = chart1.scale.xLabels.indexOf(this.value);
chart1.datasets.forEach(function (dataset) {
    var selectedBar = dataset.bars[index];

    // store the current values
    selectedBar.selected = {
        fillColor: selectedBar.fillColor,
        strokeColor: selectedBar.strokeColor
    }

    // now set the color
    selectedBar.fillColor = "red";
    selectedBar.strokeColor = "red";
});

chart1.update();
}

document.getElementById("myInput").onchange = highlightBar.bind(document.getElementById("myInput"));
document.getElementById("myInput").onchange();

Specifically, lines 21 and the function starting on Line 66 in my fiddle. The function is taken from this question: How to highlight single bar in bar chart using Chartjs). The difference between this question and that question is that that question had a select dropdown input. I am, instead, trying to have an onkeyup dynamic input.

Thanks in advance

Answer 1

Note that dataset.backgroundColor may be defined as a string or as an array of strings. Unfortunately this is not clearly reflected in the Chart.js documentation.

In order to have a specific bar highlighted, you need to define dataset.backgroundColor as an array of same colors, the color at the desired index however must be different.

This can be done with the following simple function.

function highlightMatchingBar() {
  var searchValue = document.getElementById('search').value.toUpperCase();
  chart.data.datasets[0].backgroundColor = labels.map(v => v.toUpperCase() == searchValue ? 'red' : 'green');
  chart.update();
}

Please take a look at below runnable code snippet, enter any valid animal name (case is irrelevant) and see how it works.

const labels = ['Cow', 'Horse', 'Dog', 'Cat', 'Bird', 'Fish', 'Sheep', 'Goat', 'Mouse', 'Rabbit', 'Bee', 'Rat', 'Pig', 'Fly'];
const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: "My Dataset",
      data: labels.map(l => Math.floor(Math.random() * 1000) + 1),
      backgroundColor: 'green'
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

function highlightMatchingBar() {
  var searchValue = document.getElementById('search').value.toUpperCase();
  chart.data.datasets[0].backgroundColor = labels.map(v => v.toUpperCase() == searchValue ? 'red' : 'green');
  chart.update();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<input id="search" type="text" id="myInput" onkeyup="highlightMatchingBar()" placeholder="Search...">
<canvas id="myChart" height="80"></canvas>