How to emphasize a dataset in ChartJS stacked bar chart by hovering over the legend?

My Chart.js displays a horizontal stacked bar chart with legends corresponding to different classes. Here's a snippet (using dummy data, please ignore the random names): https://i.sstatic.net/XNTZZ.png

The left labels represent users, while the legend labels (associated with the classes in the chart) represent mailing lists. The chart depicts how many users are members of specific mailing lists; the length of each bar indicates the number of mailing lists a user is a part of.

I am looking to configure it so that hovering over a legend entry will highlight the relevant parts of the bar chart (ideally with a border or similar effect). For example, if I hover over the first dataset entry, the blue section at the left end of all bars (excluding "anionic") would be highlighted.

Currently, using the onHover and onLeave events for the legend, I can successfully log the index of the dataset being hovered over. However, I am struggling to figure out how to make the bar elements belonging to that dataset stand out visually.

javascriptchart.js

Answer №1

Experience the enhanced features in the upcoming version 3 through the utilization of setActive elements.

For more details, refer to the documentation: https://www.chartjs.org/docs/master/developers/api/#setactiveelementsactiveelements

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        hoverBackgroundColor: 'green',
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1,
        hoverBackgroundColor: 'red',
      }
    ]
  },
  options: {
    scales: {}
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
chart.setActiveElements([{
  datasetIndex: 0,
  index: 1,
}, {
  datasetIndex: 1,
  index: 1,
}]);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.10/chart.js" integrity="sha512-7igYTuENB1pHNsZ/SyzMYrcJAmRCk084yVOsxNNCQAdX1wSYvCeBOgSOMC6wUdKMO76kCJNOpW4jY3UW5CoBnA==" crossorigin="anonymous"></script>
</body>

Answer №2

When utilizing the setActiveElements API from ChartJS 3, you have the ability to highlight an entire dataset on legend hover by implementing the code below within options.plugins.legend:

onHover: function (event, legendItem) {
    const datasetIndex = legendItem.datasetIndex;
    let elementList = [];
    for (let i = 0; i < this.chart.getDatasetMeta(datasetIndex).data.length; i++) {
            elementList.push({
                'datasetIndex': datasetIndex,
                'index': i,
            });
    }
    this.chart.setActiveElements(elementList);
    this.chart.update();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

execute javascript code found in the html document

Currently, I have a bash script that utilizes curl to download a page. Then, it uses grep and sed to extract javascript within the html block to a file. Following this, I use node to evaluate and leverage the downloaded javascript. Here is an example: cur ...

javascripthtmlnode.jsbashsed

Having difficulty connecting images or photos to CodePen

I've been attempting to connect images and sound files to my CodePen project using a Dropbox shared link. <div class="container"> <div class="row second-line"> <div class="col-12"> <div d ...

javascripthtmlcssdropboxcodepen

Creating a CSS selector element with an index is a useful skill to have when

Currently, I am in the process of developing a test application using Selenium that relies on CSS Selectors or XPath strings. One specific challenge I encountered was testing menu items that only appear upon hovering. When utilizing "Inspect Element" in bo ...

javascriptjqueryseleniumjquery-selectorscss-selectors

Customizing Paths in Express Handlebars

I have a query regarding setting up custom folders in Express.js Here's my situation: I need to implement logic where if a specific name is present in my database, the paths for CSS and JS files should be altered before rendering. By default, my pat ...

javascriptcssnode.jsexpresshandlebars.js

The JavaScript function is not being activated by clicking on Selenium in Chrome

Take a look at the HTML snippet below: <table class="table-main "> <thead> <tbody> <!----> <tr class="" ng-if="mapCtrl.isAdded" style=""> <td/> <td> <td> <t ...

javascripthtmlangularjsselenium

Is there a way to change the data type of all parameters in a function to a specific type?

I recently created a clamp function to restrict values within a specified range. (I'm sure most of you are familiar with what a clamp function does) Here is the function I came up with (using TS) function clamp(value: number, min: number, max: number ...

javascripttypescript

Internet Explorer 11 Ajax problem

Once again, Internet Explorer is causing some issues. I have a file called validation.php where the values from a text box are sent for validation. The text box value is read and then a result indicates whether it is valid or not. This functionality work ...

javascriptjqueryajaxinternet-explorer-11

JavaScript - changing object into a string (not functioning properly)

Looking to convert a JavaScript object into a string? Here's an example: var obj = {"name": "XXX", "age": "27"}; After doing some research, I found out about JSON.stringify(obj); JSON.stringify(obj); works perfectly when the IE8 modes are set as fo ...

javascriptjsoninternet-explorer-8ie8-browser-mode

How to make L.divIcon stand out on Leaflet map with mouse hover or through programming

Is there a way to highlight the L.divIcon svg markers on mouseover or trigger it from another action, such as clicking a button? An example test case can be found here: https://jsfiddle.net/sxvLykkt/5/ The markers are dynamically generated (originally ge ...

javascriptleaflet

What is the most effective way to retrieve the default value of ng model?

When working with php and angular, I am trying to set a value in ng model from a php expression. However, when I try to read the ng model value from the controller, it is showing up as null. <input ng-model="id" ng-init="id= '<?php echo $userID ...

javascriptphpangularjsfunction

Encountering the error "object object" while attempting to pass parameters to my servlet through AJAX

Experiencing an issue where my ajax call is ending up in the error function. I have noticed that my success function is empty, but I was expecting to receive messages from my servlet whether the data provided is correct or incorrect. The popup dialog displ ...

javascriptjqueryajaxjsonservlets

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

javascripthtmlangulartypescriptrxjs

What is the best way to set up jest to generate coverage reports for Selenium tests?

I recently made the switch to using jest for testing my JavaScript project after encountering coverage issues with mocha and chai. While my unit tests are providing coverage data, my Selenium tests are not. I've tried various solutions found in outdat ...

javascriptnode.jsselenium-webdriverjestjs

What is the inner workings behind server side rendering in Next.js?

I am seeking clarification on Server Side Rendering, specifically with Next.js. During server side rendering, I want to confirm the 'execution path' as follows: Client makes a request to the server for the webpage, which serves up an HTML only ...

javascriptreactjsnext.jsserver-side-rendering

Tips for aggregating the values of object arrays in React props

I need help sorting three top-rated posts. Currently, the function displays three post titles along with their ratings, but they are not sorted by best rating. Can anyone assist me with this issue? {posts.slice(0, 3).sort((a, b) => ...

javascriptarraysreactjs

What is the reason for the absence of the $.ajax function in the jQuery package designed for node.js?

Here is my code sample, which I would like to use for practicing with jQuery's ajax function. Note that I have already installed the jQuery package using npm install jquery: var $ = require('jquery'); var remoteValue = false; var doSometh ...

javascriptjqueryajaxnode.js

Use the `string.replace()` method to swap out strings in a nested object with values from a separate file

Is there a way to swap out the placeholders __fruit_type__, __clothing_type__, __fitness_equipment__, __meditation_app__ in collection.js with the corresponding values from values.js? I'm attempting to do this using the string.replace() Method co ...

javascriptnode.jsjsonobjectstr-replace

Have developers created an event trigger for when google maps controls finish loading?

While I am aware of the tilesloaded event, it appears that the controls load after this event. My goal is to use jQuery to retrieve the controls, but I am struggling to identify the appropriate event to listen for. ...

javascriptgoogle-mapsgoogle-maps-api-3

Send the Vue component as an argument to the function

Currently, I am in the process of transferring a project to Vue and utilizing Muuri as a layout manager. In my code, I have the following snippet: grid.add(itemElem, { layout: false, active: false }); The variable itemElem used to be an HTML element c ...

javascriptvue.js

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

javascriptjqueryhtmlcss