Utilizing the ApexCharts feature for cursor pointer functionality

Question

Utilizing the ApexCharts feature for cursor pointer functionality

I utilized apexcharts.js to create a bar chart in JavaScript and now I need help changing the cursor to a pointer. Any assistance would be greatly appreciated!

Here is my code:

var options = {
  series: [{
    name: 'series1',
    data: [60, 85, 75, 120, 100, 109, 97]
  }],
  toolbar: {
    show: false,
  },
  chart: {
    height: 350,
    type: 'area',
    fontFamily: 'Proxima Nova',

    toolbar: {
      show: false
    },
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'smooth'
  },
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  tooltip: {
    x: {
      format: 'dd/MM/yy HH:mm'
    },
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

javascript html css apexcharts

Answer 1

Answer №1

I encountered a similar issue and have come up with two possible solutions:

Method 1: Found on Github

To set the cursor to point, you can use the following code snippet:

chart: {
  ...
  events: {
    dataPointMouseEnter: function(event) {
      event.path[0].style.cursor = "pointer";
    }
  }
}

For more details, visit this GitHub link: https://github.com/apexcharts/apexcharts.js/issues/1466

Method 2: My custom method

You can target the class name of the apexchart component using Inspector and then add the following property to this class at the code level:

cursor: pointer

Here's an example:

// Change cursor on hover
.apexcharts-pie {
  cursor: pointer;
}

Answer 2

I encountered a similar issue and have come up with two possible solutions:

Method 1: Found on Github

To set the cursor to point, you can use the following code snippet:

chart: {
  ...
  events: {
    dataPointMouseEnter: function(event) {
      event.path[0].style.cursor = "pointer";
    }
  }
}

For more details, visit this GitHub link: https://github.com/apexcharts/apexcharts.js/issues/1466

Method 2: My custom method

You can target the class name of the apexchart component using Inspector and then add the following property to this class at the code level:

cursor: pointer

Here's an example:

// Change cursor on hover
.apexcharts-pie {
  cursor: pointer;
}

Answer 3

Answer №2

I encountered a similar issue and found two potential solutions:

chart: {
            width: 320,
            type: ...,
            events: {
                dataPointMouseEnter: function(event) {
                    event.target.style.cursor = "pointer";
                    // alternatively
                    event.fromElement.style.cursor = "pointer";
                }
            },
        }

Answer 4

I encountered a similar issue and found two potential solutions:

chart: {
            width: 320,
            type: ...,
            events: {
                dataPointMouseEnter: function(event) {
                    event.target.style.cursor = "pointer";
                    // alternatively
                    event.fromElement.style.cursor = "pointer";
                }
            },
        }

Utilizing the ApexCharts feature for cursor pointer functionality

Answer №1

Answer №2

Similar questions

Minimize the gap between the input text and the lower border

Enlarging the current division while reducing the size of the others when hovering

Creating a clickable link using a for loop to set the destination URL

Loop Through Mongoose to Retrieve Multiple Objects

Heroku Foreman unexpectedly stops while using Express.js bodyParser() function

Node interprets string as an object

Hidden Document Scroll Offset

PHP query will execute even in the absence of clicking the button

Encountering an issue while attempting to convert a string into JSON from a .json file within a Node.js environment

Is THREE.js disregarding the line thickness when using a BufferGeometry with LineBasicMaterial in a THREE.Line object?

error displays stating that the module '../util/http_util' cannot be located

What causes the Error: ENOENT open error to occur when attempting to render a doT.js view?

The innovative technique of using pure CSS to secure the bottom edge of a div to the viewport

What could be the reason I am unable to choose data properties from the dropdown options?

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

Error: No route found at this location

The Vue.js reactivity system does not detect changes when a property is updated within a WebRTC callback

What are the steps for integrating an external API into a React project?

The colors of my SVG button remain constant and do not dynamically change when I hover over it

transforming array elements into properties of a React component