Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done?

I attempted the CSS below, but it resulted in the hand cursor showing even when hovering between two bars.

.c3-event-rect {
    cursor: pointer;
}

Just to clarify, this can be seen in a jsfiddle example, where I would like the pointer cursor to only appear on bar items as they are the clickable elements.

javascriptcssd3.jsc3.js

Answer №1

After spending a considerable amount of time, I have finally found a solution. If you're interested, check out this jsfiddle which provides a detailed explanation of the two lines of code (with comments).

If the details are confusing, feel free to ask for clarification. :)

In summary: 

  1. data: { 
    selection: {
        enabled: true 
    },
 [...]
  2. .c3-bar { cursor: pointer; }

Answer №2

Simply apply the CSS snippet below

.c3-bar {
    pointer-events: auto !important;
}

Keep in mind that the !important declaration is necessary to supersede C3's default inline style of pointer-events: none on the bars.

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

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet: HTML: <div class="relative-parent"> <div v-for="item in 12" class="hiding-parent"> <div c ...

javascripthtmlcssvue.js

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

javascriptjqueryhtml

What could be causing me to not receive the prepackaged error messages from Angular in my WebStorm 8?

Having some trouble here... my angular errors are always so cryptic, like this: I usually manage to figure out the issue on my own, but I'm really hoping someone can offer guidance on how to get those nice error messages that angular supposedly displ ...

javascriptangularjswebstorm

Modifying the border hue of Material-UI's Select Component

Here is the Select component I've created using materials-UI <FormControl variant="outlined"> <Select value={this.state.value} onChange = {this.handleChange} className={this.props.classes.select} inputProps = {{class ...

cssreactjsmaterial-ui

Best Practices for Safely Storing the JWT Client Credentials Grant

Currently, I am working on a NodeJS Express Application that connects to an Auth Server using client credentials grant. After receiving the token from the Auth Server, I use it to access data from an API. I am seeking advice on the most effective way to s ...

javascriptnode.jsexpressjwtopenid-connect

Issues with Iframe { height:70%;} in Internet Explorer 8 and Firefox causing display problems

In my website's design, I have a div structure with an iframe to load pages. The header remains at the top seamlessly The footer stays at the bottom perfectly The content is positioned in the middle flawlessly However, the iframe does not stret ...

htmlasp.netcssiframe

A numeric input area that only accepts decimal numbers, with the ability to delete and use the back

I have successfully implemented a code for decimal numbers with only two digits after the decimal point. Now, I am looking to enhance the code in the following ways: Allow users to use backspace and delete keys. Create a dynamic code that does not rely o ...

javascriptjqueryhtml

Avoiding double tapping to zoom on Chrome Android while using the desktop version of a website

Is there a way to disable zooming when double clicking in Google Chrome with the desktop site enabled? I attempted to use <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> without success. I al ...

javascriptandroidhtmlgoogle-chromeevents

Steps for comparing two inputs and displaying a div:1. Obtain the values of

I am looking to create a basic JavaScript function that will show or hide an element based on whether two input values match. This needs to happen before the form is submitted. <form> <input type="number" name="some1" id="some1"> <input t ...

javascriptjquery

What are the necessary conditions for executing npm start?

I'm encountering issues running npm start in my project, which is linked to my package.json file below: { "name": "babek", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test speci ...

javascriptnpmwebpackpackage.json

Is there a method to implement colorPicker in an Angular WYSIWYG directive without utilizing jQuery?

After removing the jQuery reference, the color picker is no longer functioning in the WYSIWYG directive. In my project, I am avoiding the use of jQuery, so is there a way to achieve this without using jQuery? Alternatively, are there any other editors av ...

javascriptangularjsangularjs-directivewysiwygcontenteditable

Is it possible to insert a second hyperlink into a JavaScript-occupied anchor?

Check out my reference page at: To change the content in a 'containerarea' div, I am utilizing Dynamic Drive's "Dynamic Ajax" script. Below is an example of the anchor code used: <a href="javascript:ajaxpage('videos-maintenance/app ...

javascriptajaxanchor

After upgrading to version 4.0.0 of typescript-eslint/parser, why is eslint having trouble recognizing JSX or certain react @types as undefined?"

In a large project built with ReactJs, the eslint rules are based on this specific eslint configuration: const DONT_WARN_CI = process.env.NODE_ENV === 'production' ? 0 : 1 module.exports = { ... After upgrading the library "@typescript-es ...

javascriptreactjstypescripteslintrules

Issue with Component: Data is not being injected into controller from ui-router resolve, resulting in undefined data

Encountering an issue with resolve when using a component and ui-router: the data returned after resolving the promise is displaying as "undefined" in the controller. Service: class userService { constructor ($http, ConfigService, authService) { th ...

javascriptangularjsangular-promise

Using TypeScript's reference function within an HTML document

It feels like ages since my early days of web development. Back when I first started coding, we would reference a script using a <script> tag: <html> <head> <script src="lealet.js"></script> <!-- I know the path isn´t c ...

javascripttypescript

Leveraging Columns in HTML and CSS

Looking to create a layout with 2 separate columns for the content on my website. The desired layout is shown below: https://i.stack.imgur.com/V4uX2.jpg On my computer monitor, it displays as intended. However, on my mobile device it appears like this: ...

htmlcss

Trouble with feedback form not showing up

I've been working on creating an ajax feedback form, but I'm facing difficulties in getting it to show up properly. The feedback image appears, but clicking on it doesn't trigger any action. Here's my Form: <div id="feedback"> ...

javascripthtmlajaxfeedback

Manipulate Attributes in Javascript

Having an issue here - I'm trying to use JavaScript to set some attributes. for(i=0;i<div_navi.childNodes.length;i++){ if(div_navi.childNodes[i].nodeName =="SPAN"){ div_navi.childNodes[i].setAttribute("onclick","g ...

javascripthtmlajaxdom

Encountering issues with website optimization on Google Page Speed Insights and facing compatibility problems on a specific website I designed

I attempted to analyze the performance of my website using Google Page Speed Insights and encountered an error message. I have tried looking for a solution without success. Interestingly, when I tested other websites that I manage, everything worked just ...

htmlcssbootstrap-4google-pagespeed

Tips for using jQuery dropdown menus

I am currently in the process of creating a prototype for a quick dropdown menu using jQuery. However, I have reached the limits of my knowledge on jQuery and could use some assistance in solving my issue. My objective is to have a dropdown animate down w ...

javascriptjqueryhtmlcss